Perawatan Tepat Untuk Mata Sehat
img {opacity:0.5;filter:alpha(opacity=50;}
img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}
img {opacity: 0.5;filter:alpha(opacity=50;}Contoh (arahkan mouse ke atas gambar):
img:hover {opacity:1.0;filter:alpha(opacity=100;}
]]></b:skin>
.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}atau sebaliknya,
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}
<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />
]]></b:skin>
a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}atau sebaliknya,
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}
<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img border="0" src="http://urlgambar.com/image.jpg" /></a>
Klik untuk Memperbesar Gambar |
img {opacity:0.5;filter:alpha(opacity=50;}
img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}
img {opacity: 0.5;filter:alpha(opacity=50;}Contoh (arahkan mouse ke atas gambar):
img:hover {opacity:1.0;filter:alpha(opacity=100;}
]]></b:skin>
.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}atau sebaliknya,
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}
<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />
]]></b:skin>
a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}atau sebaliknya,
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}
<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img border="0" src="http://urlgambar.com/image.jpg" /></a>
Klik untuk Memperbesar Gambar |
Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal
).
Kita anggap saja warna latar (background) merupakan area suatu elemen.
Unordered List:
<ul>
<li></li>
<li></li>
…dst…
</ul>
Ordered List:
<ol>
<li></li>
<li></li>
…dst…
</ol>
Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}
.
Unordered List:
Ordered List:
Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal
), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.
Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;}
(unordered list) atau ol {list-style-type:...;}
(ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);}
atau ol {list-style-image:url(...);}
.
ul {
list-type-image:url(...);
}
Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:
ul {
list-style:none;
margin-left:0;
}
ul li {
background:url(...) no-repeat;
padding-left:1.5em;
}
Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hTvsHB6i8oUWh9KnWV1BAuCrrgR1QRtkefX14zrkT6n7jWPPxNxdidiy5YFIpLCRkSZQydUw4UpgqIVxIRmUWnR9ihUJfjiDPa2hnOPQH8AVso1QrezJ6MQuOHEx6QiblT9KEezjBwg/s800/OB%2520sprite.png) no-repeat -9px -280px;
.
Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.
Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas belum di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before
.
.listwithchar {
list-style:none;
margin-left:0;
}
.listwithchar li {
margin-left:1.5em;
position:relative
}
.listwithchar li:before {
content:"\25CA";
margin-left:-1.5em;
position:absolute
}
.listwithchar li:hover:before {
content:"\221A";
position:absolute
}
Perlu dijadikan catatan bahwa pengkodean untuk <ul>
atau <ol>
pada setiap template mungkin berbeda.
<ul class="listwithchar">
<li></li>
<li></li>
…dst…
<ul>
Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.
Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal
).
Kita anggap saja warna latar (background) merupakan area suatu elemen.
Unordered List:
<ul>
<li></li>
<li></li>
…dst…
</ul>
Ordered List:
<ol>
<li></li>
<li></li>
…dst…
</ol>
Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}
.
Unordered List:
Ordered List:
Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal
), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.
Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;}
(unordered list) atau ol {list-style-type:...;}
(ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);}
atau ol {list-style-image:url(...);}
.
ul {
list-type-image:url(...);
}
Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:
ul {
list-style:none;
margin-left:0;
}
ul li {
background:url(...) no-repeat;
padding-left:1.5em;
}
Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hTvsHB6i8oUWh9KnWV1BAuCrrgR1QRtkefX14zrkT6n7jWPPxNxdidiy5YFIpLCRkSZQydUw4UpgqIVxIRmUWnR9ihUJfjiDPa2hnOPQH8AVso1QrezJ6MQuOHEx6QiblT9KEezjBwg/s800/OB%2520sprite.png) no-repeat -9px -280px;
.
Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.
Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas belum di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before
.
.listwithchar {
list-style:none;
margin-left:0;
}
.listwithchar li {
margin-left:1.5em;
position:relative
}
.listwithchar li:before {
content:"\25CA";
margin-left:-1.5em;
position:absolute
}
.listwithchar li:hover:before {
content:"\221A";
position:absolute
}
Perlu dijadikan catatan bahwa pengkodean untuk <ul>
atau <ol>
pada setiap template mungkin berbeda.
<ul class="listwithchar">
<li></li>
<li></li>
…dst…
<ul>
Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>KOSTUMISASI SCREENSAVER BLOG
<script>jQuery.noConflict();</script>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=80' type='text/javascript'/>
ak - Akan | gr - Greek | sl - Slovenian |
da - Danish | id - Indonesian | se - Swedish |
de - German | jp - Japanese | sk - Slovak |
en - English | it - Italian | sw - Swahili |
es - Spanish | nl - Dutch | tr - Turkish |
fr - French | pl - Polish | vi - Vietnamese |
fi - Filipino | pt - Portuguese | hr - Croatian |
Table Cell | bpt - Brazilian Portuguese | ro - Romanian |
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id' type='text/javascript'/>3. Save template.
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>KOSTUMISASI SCREENSAVER BLOG
<script>jQuery.noConflict();</script>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=80' type='text/javascript'/>
ak - Akan | gr - Greek | sl - Slovenian |
da - Danish | id - Indonesian | se - Swedish |
de - German | jp - Japanese | sk - Slovak |
en - English | it - Italian | sw - Swahili |
es - Spanish | nl - Dutch | tr - Turkish |
fr - French | pl - Polish | vi - Vietnamese |
fi - Filipino | pt - Portuguese | hr - Croatian |
Table Cell | bpt - Brazilian Portuguese | ro - Romanian |
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id' type='text/javascript'/>3. Save template.
Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (Extensible HyperText Markup Language) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.
Saya bukan penganut “harus valid X-HTML (I love validator)”. Bukankah tidak menjadi keliru, jika mencoba sesuatu yang mungkin dapat memberikan sebuah wacana bagi blogosphere (narablog).
Nah, sekarang mari kita melihat salah satu blog (Blogger™) yang melakukan usaha agar menjadi valid XHTML 1.1, seperti Blog milik mas Toto, terbukti valid. Terima kasih kepada Choen yang menjadi inspirasi dari penerbitan posting ini. Dan mungkin masih banyak web/blog lain yang tidak saya sebutkan di atas. :)
Bagi para blogger yang ingin melihat kasus yang saya maksudkan pada paragraf sebelumnya adalah blog yang beralamat di http://ob-template.blogspot.com/. Template tersebut menggunakan template klasik dan disusun (dicoba) menggunakan HTML5. Masih banyak kekurangan pada draft OB template tersebut, terutama pada metadata —antara <head>
…</head>
—serta struktur HTML5 yang masih ‘amburadul’. Mungkin Anda yang menjadi penyempurna-nya.
Update (July 22, 2011):
Ingin melihat contoh blog lain yang—jika menurut saya “sempurna”—menggunakan template klasik di Blogger™. Silakan melompat ke komentar Amdhas. Jika berkenaan bahasa program, dia merupakan salah satu yang menurut saya dapat dijadikan referensi. Optimasi Blog pun telah beeberapa kali menerbitkan posting yang merujuk ke blog dia di Blogger Admin (Blogger™) dan sekarang lagi asyik berkutat dengan “Drupal”-nya di discrimate.
Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (Extensible HyperText Markup Language) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.
Saya bukan penganut “harus valid X-HTML (I love validator)”. Bukankah tidak menjadi keliru, jika mencoba sesuatu yang mungkin dapat memberikan sebuah wacana bagi blogosphere (narablog).
Nah, sekarang mari kita melihat salah satu blog (Blogger™) yang melakukan usaha agar menjadi valid XHTML 1.1, seperti Blog milik mas Toto, terbukti valid. Terima kasih kepada Choen yang menjadi inspirasi dari penerbitan posting ini. Dan mungkin masih banyak web/blog lain yang tidak saya sebutkan di atas. :)
Bagi para blogger yang ingin melihat kasus yang saya maksudkan pada paragraf sebelumnya adalah blog yang beralamat di http://ob-template.blogspot.com/. Template tersebut menggunakan template klasik dan disusun (dicoba) menggunakan HTML5. Masih banyak kekurangan pada draft OB template tersebut, terutama pada metadata —antara <head>
…</head>
—serta struktur HTML5 yang masih ‘amburadul’. Mungkin Anda yang menjadi penyempurna-nya.
Update (July 22, 2011):
Ingin melihat contoh blog lain yang—jika menurut saya “sempurna”—menggunakan template klasik di Blogger™. Silakan melompat ke komentar Amdhas. Jika berkenaan bahasa program, dia merupakan salah satu yang menurut saya dapat dijadikan referensi. Optimasi Blog pun telah beeberapa kali menerbitkan posting yang merujuk ke blog dia di Blogger Admin (Blogger™) dan sekarang lagi asyik berkutat dengan “Drupal”-nya di discrimate.
0 comments:
Post a Comment