Membuat Style pada Link dengan CSS3

GIBZET0407 - 7:32 PM

Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul <a href="http://rudyazhar.com/2011/macam-efek-link-dengan-css3/">Macam Efek Link Dengan CSS3</a>, dan kali ini saya coba memberikan sesuatu yang baru. <a name="more"></a> Kita buat Mark-up HTML terlebih dahulu : <pre><ul class="shift"> <li><a href="#">Sorot ini</a></li> <li><a href="#">Sorot tautan ini</a></li> </ul> </pre> Sesudah itu mari kita buat CSS-nya : <pre>.shift { list-style: none; display: inline-block; } .shift li { background: orangered; width: 0%; display: block; -webkit-transition: all 0.125s ease-in-out; -moz-transition: all 0.125s ease-in-out; transition: all 0.125s ease-in-out; } .shift li:hover { width: 100%; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .shift li a { text-transform: uppercase; display: block; color: #000; font-size: 1em; margin: 0.5em; padding: 0.5em; text-decoration: none; white-space: nowrap; } </pre> Berikut hasilnya yang sudah jadi, coba sorot tulisan 'Sorot ini' lalu lihat efeknya : <ul class="shift"> <li><a href="#">Sorot ini</a></li> <li><a href="#">Sorot tautan ini</a></li> </ul> <style type='text/css'> .shift { list-style: none; display: inline-block; } .shift li { background: orangered; width: 0%; display: block; -webkit-transition: all 0.125s ease-in-out; -moz-transition: all 0.125s ease-in-out; transition: all 0.125s ease-in-out; } .shift li:hover { width: 100%; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .shift li a { text-transform: uppercase; display: block;text-shadow:none; color: #000; font-size: 1em; margin: 0.5em; padding: 0.5em; text-decoration: none; white-space: nowrap; } </style> Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?

7:32 PM

Styling menggunakan CSS pseudo-element

GIBZET0407 - 9:13 AM

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “<a href="http://optimasi-blog.blogspot.com/2011/07/styling-unordered-ordered-lists.html">styling ordered dan unordered list</a>”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks).<a name="more"></a> Semua dapat dilakukan juga dengan menggunakan <abbr title="Cascading Style Sheets">CSS</abbr> pseudo-element <code>:before</code> dan/atau <code>:after</code>. <h1>Credit</h1> Untuk penggunaan <a href="http://rudyazhar.com/2011/buat-3d-ribbon-dengan-css">ribbon</a> & <a href="http://rudyazhar.com/2011/garis-dua-warna-dengan-css3/">border ber-efek tenggelam</a> dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh <a href="http://ardianzzz.com/">Ardianzzz</a>—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (<a href="http://ardianzzz.com/files/me.html" title="Demo ribbon by Ardian Trimurti">demo ribbon</a>). Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini. <h1 id="index-content">Indeks Konten</h1> <ul><li><a href="#element1">Ribbon (membuat pita)</a></li> <li><a href="#element2">Border/line press effect (membuat border/garis tenggelam)</a></li> <li><a href="#element3">Folding angle (melipat sudut)</a></li> <li><a href="#element4">Mirror effect on the text (efek cermin pada teks)</a></li></ul><div id="element1"><h2>Ribbon</h2> Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini. <pre><code>.element { background:#e1e1e1; padding:1.5em 2em; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em } .element h2 { background:#f90; border-bottom:.05em solid #666; /*-- <a href="http://optimasi-blog.blogspot.com/2010/06/rounded-corner-membuat-sudut-menjadi.html">Rounded corner</a> kiri atas --*/ -moz-border-radius:.25em 0 0 0; -webkit-border-radius:.25em 0 0 0; border-radius:.25em 0 0 0; display:block; left:-1.75em; padding:.25em 0 .25em 1.75em; position:relative; width:60% } /* Mulai membentuk ribbon */ .element h2:after, .element h2:before { content:" "; display:block; position:absolute } /* Ribbon kanan */ .element h2:after { top:0; right:0; border-top:.85em solid #f90; border-right:.75em solid #e1e1e1; border-bottom:.80em solid #f90; border-left:.75em solid #f90 box-shadow:0 .05em 0 #666; } /* Ribbon kiri */ .element h2:before { bottom:-.25em; left:0; border-top:none; border-right:none; border-bottom:.25em solid #666; border-left:.40em solid #666; /*-- Rounded corner kiri bawah --*/ -moz-border-radius:0 0 0 .25em; -webkit-border-radius:0 0 0 .25em; border-radius:0 0 0 .25empx; z-index:1 }</code></pre> Dan berikut kode <abbr title="HyperText Markup Language">HTML</abbr> yang menyertainya. <pre style="margin-bottom:0;"><code><div class="element"> <h2>Ribbon</h2> Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini… </div></code></pre></div> —<a href="#index-content">Kembali ke indeks konten</a>— <style type="text/css"> #element1 { background:#e1e1e1; padding:1.5em 2em; margin-bottom:1.7143em; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } #element1 h2 { background:#f90; border-bottom:.05em solid #666; -moz-border-radius:.25em 0 0 0; -webkit-border-radius:.25em 0 0 0; border-radius:.25em 0 0 0; display:block; left:-1.75em; padding:0.25em 0 0.25em 1.75em; position:relative; width:60%; } #element1 h2:after, #element1 h2:before { content:" "; display:block; position:absolute; } #element1 h2:after { top:0; right:0; border-top:0.85em solid #f90; border-right:0.75em solid #e1e1e1; border-bottom:0.80em solid #f90; border-left:0.75em solid #f90; box-shadow:0 .05em 0 #666; } #element1 h2:before { bottom:-0.25em; left:0; border-top:none; border-right:none; border-bottom:.25em solid #666; border-left:.40em solid #666; -moz-border-radius:0 0 0 .25em; -webkit-border-radius:0 0 0 .25em; border-radius:0 0 0 .25empx; z-index:1; } {</style> <div id="element2"><h2>Border/line press effect</h2> Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut. <pre><code>.element2 h2 { padding:0 0 0.25em; position:relative; width:100% } .element2 h2:after { content:" "; position:absolute; bottom:0; left:0; border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */ border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */ width:100% }</code></pre> Catatan: <ul><li>Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).</li> <li>Apabila ingin menambahkan border press di atas h2, tambahkan <code>#element2 h2:before</code> dengan properti yang sama. Kemudian ganti kode yang berwarna merah (<code>bottom:0;</code>) dengan <code>top:0;</code>.</li> <li>Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen. <ul><li>Kiri elemen: <pre><code>top:0; left:0; border-left:1px solid #c3c3c3; border-right:1px solid #f1f1f1; height:100%;</code></pre></li> <li>Kanan elemen: <pre><code>top:0; right:0; border-left:1px solid #c3c3c3; border-right:1px solid #f1f1f1; height:100%;</code></pre></li></ul></li></ul>Sedangkan kode HTML pada elemen ini adalah sebagai berikut. <pre style="margin-bottom:0"><code><div class="element2"> <h2>Border/line press effect</h2> Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut… </div></code></pre></div> —<a href="#index-content">Kembali ke indeks konten</a>— <style type="text/css"> #element2 { background: -webkit-gradient(linear, left top, left center, from(#e1e1e1), to(rgba(250,250,250,1))); background: -moz-linear-gradient(top, #e1e1e1, rgba(250,250,250,1)); margin-bottom:1.7145em; padding:1.5em 2em; } #element2 h2 { padding:0 0 0.25em; position:relative; } #element2 h2:after { content:" "; position:absolute; bottom:0; left:0; border-top: 1px solid #c3c3c3; border-bottom: 1px solid #f1f1f1; width:100%; } </style> <div id="element3"><h2>Folding angle</h2> Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini. <pre><code>.element3 { background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff)); background:-moz-linear-gradient(right, #e1e1e1, #fff); border:1px solid #c3c3c3; padding:1.5em 2em; position:relative } .element3:before, .element3:after { content:" "; display:block; position:absolute; /*-- Memutar elemen 45 derajat (searah jarum jam) --*/ -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg) } /* Menutup sudut kiri atas elemen berbentuk segitiga */ .element3:after { top:-2em; right:-2em; /*-- Warna border sama dengan warna body (di luar elemen) --*/ border-top:2em solid #fff; border-right:2em solid #fff; border-bottom:2em solid #fff; border-left:2em solid #fff } /* Membuat segitiga efek melipat */ .element3:before { top:0.75em; right:0.75em; /*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/ border-top:2em solid #c3c3c3; border-right:2em solid #e1e1e1; border-bottom:2em solid #e1e1e1; border-left:2em solid #e1e1e1; z-index:1 }</code></pre> Di bawah ini merupakan kode HTML-nya. <pre style="margin-bottom:0"><code><div class="element3"> <h2>Folding angle</h2> Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini… </div> </code></pre></div> —<a href="#index-content">Kembali ke indeks konten</a>— <style type="text/css">#element3 { background: -webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff)); background: -moz-linear-gradient(right, #e1e1e1, #fff); border:1px solid #c3c3c3; margin-bottom:1.7143em; padding:1.5em 2em; position:relative; } #element3:before, #element3:after { content:" "; display:block; position:absolute; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } #element3:after { border-top:2em solid #fff; border-right:2em solid #fff; border-bottom:2em solid #fff; border-left:2em solid #fff; top:-2em; right:-2em; } #element3:before { border-top:2em solid #c3c3c3; border-right:2em solid #e1e1e1; border-bottom:2em solid #e1e1e1; border-left:2em solid #e1e1e1; top:0.75em; right:0.75em; z-index:1; } </style> <div id="element4"><h2>Mirror Text</h2> Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut. <pre><code>.element4 h2 { font-size:2em; font-weight:bold; position: relative } .element4 h2:before, .element4 h2:after { display:block; position:absolute; bottom:-0.75em; /* You should change this value to fit your font */ left:0; right:0 } .element4 h2:before { content: "Mirror Text"; opacity:.4; /* This is how the text is flipped vertically */ -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1) } .element4 h2:after { /* Fading using CSS gradient */ /* Don't forget to change the colors to your background color */ background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))); background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1)); /* I left out the `filter` property, because IE doesn't know `:before` and `:after` pseudo-elements anyway */ content: " "; height:0.75em }</code></pre> Catatan: Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai <code>#eeeeee</code> sama dengan <code>rgb(238,238,238)</code> sama dengan <code>rgba(238,238,238,1)</code>. Adapun kode HTML yang menyertainya adalah sebagai berikut. <pre><code><div class="element4"> <h2>Mirror Text</h2> Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut… </div></code></pre></div> —<a href="#index-content">Kembali ke indeks konten</a>— <style type="text/css">#element4 h2 { font-size:2em; font-weight:bold; position: relative; } #element4 h2:before, #element4 h2:after { display:block; position:absolute; bottom:-0.75em; /* You should change this value to fit your font */ left:0; right:0; } #element4 h2:before { content: "Mirror Text"; opacity:.4; /* This is how the text is flipped vertically */ -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1) } #element4 h2:after { /* Fading using CSS gradient */ /* Don't forget to change the colors to your background color */ background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))); background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1)); /* I left out the `filter` property, because IE doesn't know `:before` and `:after` pseudo-elements anyway */ content: " "; height:0.75em; } </style> <h1>Generalisasi</h1> Styling menggunakan CSS pseudo-element <code>:before</code> dan/atau <code>:after</code> di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen. Note: Sampai tulisan ini diterbitkan CSS pseudo-element <code>:before</code> dan/atau <code>:after</code> <del>belum</del> didukung oleh peramban IE (Internet Explorer).

9:13 AM

Styling Unordered & Ordered lists

GIBZET0407 - 10:29 AM

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 (<code>decimal</code>).<a name="more"></a> <h3>Default List</h3> Kita anggap saja warna latar (background) merupakan area suatu elemen.<div class="satu">Unordered List:<div style="background:#ebebeb;"><ul><li>Pasti suatu masa</li><li>Kan bersama lagi</li><li>Engkau dan aku pasti jua nikmati</li></ul></div><pre><ul> <li></li> <li></li> …dst… </ul></pre></div> <div class="dua">Ordered List:<div style="background:#ebebeb;"><ol><li>Satu cinta yang indah </li><li>Walau ku tak pasti</li><li>Bilakah masanya</li></ol></div><pre><ol> <li></li> <li></li> …dst… </ol></pre></div><div class="clear"></div>Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini <code>ul, ol {list-style-position:outside;}</code>.<div class="satu">Unordered List:<div style="background:#ebebeb;"><ul style="margin-left:0em;"><li>Pasti suatu masa</li><li>Kan bersama lagi</li><li>Engkau dan aku pasti jua nikmati</li></ul></div></div><div class="dua">Ordered List:<div style="background:#ebebeb;"><ol style="margin-left:0em;"><li>Satu cinta yang indah </li><li>Walau ku tak pasti</li><li>Bilakah masanya</li></ol></div></div><div class="clear"></div>Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (<code>decimal</code>), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di <cite title="w3schools: List Style Type All"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_all">w3scholl.com</a></cite>.<h3>Image List</h3>Jika kode pemanggilan default style list menggunakan <code>ul {list-style-type:...;}</code> (unordered list) atau <code>ol {list-style-type:...;}</code> (ordered list), maka pemanggilan untuk daftar urut image menggunakan <code>ul {list-style-image:url(...);}</code> atau <code>ol {list-style-image:url(...);}</code>.<pre>ul { list-type-image:url(...); }</pre>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:<pre>ul { list-style:none; margin-left:0; } ul li { background:url(...) no-repeat; padding-left:1.5em; }</pre> <ul style="list-style:none;margin-left:0;"><li style="margin-left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhsRj1CwYs3ewiHukVk9cZ3pGi2P4nvMdiV7ldKK_YSeoHSIxpJ5IP1zBvIK8RsK5BQot5jQ_DGmbuy91B-SdXr6qTSkxAMyWaBJIqTH3VYxUkdGFlRuiPqptDOxMHSTe6wjNvdwd_1Bc/s800/OB%2520sprite.png) no-repeat -9px -280px;padding-left:1.5em;")">Kau dan aku</li><li style="margin-left:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhsRj1CwYs3ewiHukVk9cZ3pGi2P4nvMdiV7ldKK_YSeoHSIxpJ5IP1zBvIK8RsK5BQot5jQ_DGmbuy91B-SdXr6qTSkxAMyWaBJIqTH3VYxUkdGFlRuiPqptDOxMHSTe6wjNvdwd_1Bc/s800/OB%2520sprite.png) no-repeat -9px -280px;padding-left:1.5em;">Akan bertemu</li><li style="margin-left:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhsRj1CwYs3ewiHukVk9cZ3pGi2P4nvMdiV7ldKK_YSeoHSIxpJ5IP1zBvIK8RsK5BQot5jQ_DGmbuy91B-SdXr6qTSkxAMyWaBJIqTH3VYxUkdGFlRuiPqptDOxMHSTe6wjNvdwd_1Bc/s800/OB%2520sprite.png) no-repeat -9px -280px;padding-left:1.5em;">untuk kita kembalikan keindahan dulu</li></ul>Catatan: Image list di atas menggunakan properti sebagai berikut <code>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhsRj1CwYs3ewiHukVk9cZ3pGi2P4nvMdiV7ldKK_YSeoHSIxpJ5IP1zBvIK8RsK5BQot5jQ_DGmbuy91B-SdXr6qTSkxAMyWaBJIqTH3VYxUkdGFlRuiPqptDOxMHSTe6wjNvdwd_1Bc/s800/OB%2520sprite.png) no-repeat -9px -280px;</code>.Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali <cite title="w3schools: CSS List; Crossbrowser Solution"><a href="http://www.w3schools.com/css/css_list.asp">w3schools</a></cite>.<h3>Special Character List</h3>Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas <del>belum</del> di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element <code>:before</code>.<ul class="listwithchar"><li>pasti suatu masa, kan bersama lagi</li><li>Engkau dan aku pasti jua nikmati</li><li>Satu cinta yang indah</li> <li>Walau ku tak pasti bilakah masanya</li> <li>Kau dan aku akan bertemu</li><li>untuk kita kembalikan keindahan dulu</li></ul><h4>CSS (Cascading Style Sheets)</h4><pre>.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 }</pre>Perlu dijadikan catatan bahwa pengkodean untuk <code><ul></code> atau <code><ol></code> pada setiap template mungkin berbeda.<h4>HTML (HyperText Markup Language)</h4><pre><ul class="listwithchar"> <li></li> <li></li> …dst… <ul></pre>Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut <cite title="Weyl, Estelle. April 28, 2007. CSS, Javascript and XHTML Explained: Javascriot, CSS, and (X)HTML Entities in Numeric Order"><a href="http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/">Evotech.net</a></cite>.<style>.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;}</style>

10:29 AM

Study Kasus: Valid HTML5 di Template Klasik

GIBZET0407 - 6:22 PM

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.<a name="more"></a> <blockquote>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).</blockquote>Nah, sekarang mari kita melihat salah satu blog (Blogger™) yang melakukan usaha agar menjadi valid XHTML 1.1, seperti Blog milik <a href="http://mastotosugiarto.blogspot.com/">mas Toto</a>, terbukti valid. Terima kasih kepada <a href="http://deconstructioncode.blogspot.com/">Choen</a> 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 <a href="http://ob-template.blogspot.com/">http://ob-template.blogspot.com/</a>. Template tersebut menggunakan template klasik dan disusun (dicoba) menggunakan HTML5. Masih banyak kekurangan pada <a href="http://ob-template.blogspot.com/">draft OB template</a> tersebut, terutama pada metadata —antara <code><head></code>…<code></head></code>—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 <a href="#c1308394005276371376">Amdhas</a>. 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 <a href="http://hendro-prayitno.blogspot.com">Blogger Admin</a> (Blogger™) dan sekarang lagi asyik berkutat dengan “Drupal”-nya di <a href="http://discrimate.tk/">discrimate</a>.

6:22 PM

Redesign: Optimasi Blog dari Masa ke Masa

GIBZET0407 - 5:21 PM

Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog.<a name="more"></a> Apakah karena BloggerTM sudah merubah tampilannya (redesaign), maka Optimasi Blog ikut-ikutan berubah? Tidak, karena redesaign di blog ini telah lebih dulu dilakukan sebelum BloggerTM. Kalau tidak salah release tampilan baru site <a href="http://bloggerindraft.blogspot.com/2011/07/bloggers-updated-interface-now.html">BloggerTM in draft</a> dimulai pada hari ini (July 8, 2011).Template yang Optimasi Blog gunakan sekarang (mencoba) menggunakan “liquid layout”—untuk mengetahui sedikit pengertiannya, silakan buka kembali posting <a href="http://optimasi-blog.blogspot.com/2011/03/sentuhan-dalam-blog.html">sentuhan magic dalam blog</a>—dan masih terkesan minimalis. Font yang digunakan full dari keluarga ‘serif’, berukuran <code>1em</code> & <code>line-height:1.5em</code>, serta sedikit ditambah bumbu <code>word-spacing</code> & amp; <code>letter-spacing</code>.<blockquote>Ngga perlu dikupas lebih dalam, ntar malah m’bosenin. Cukup diliat tampilan sekarang aja, gan. :)</blockquote>‘Emang’ beda dengan yang dulu? Silakan baca sekelumit ulasan tentang ‘bunglonisasi’ template <a href="http://optimasi-blog.blogspot.com/">Optimasi Blog</a> dari masa ke masa berikut ini.<h2>Default Template (pixed layout)</h2>Pertama sekali Optimasi Blog menggunakan default template “Minima”, kemudian sedikit demi sedikit di modifikasi, sampai ke bentuk “blogger copy template”. Template tersebut lama digunakan dari 2009–Maret 2011.<div class="separator" style="clear: both; margin-bottom: 1.5em; text-align: center;"><img alt="blogger template minma" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fxcil9IzMHMd07ior9M6FUty_EvaiQj31DtuvGQcy-k37e7xDSzhCRl9tZnND83VF9ZIkVoaHG_gx-yUXZ_gz-bsIzlD4cPtqu3RYd4_cyh2yaI0oitzX-ojozlvpQU29wN0GLw3crM/s400/Template+default.gif" style="margin-right: 5em;" width="200" /><img alt="blogger template minma modification" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGLHdAt0IkBnnk5kIu4TADrR0m0w8m5TULMePchrMd4xn09sZOyyIOJvdNLo2ngXAbGdQVhV9O0MmIg5E7ZHO1z4m89JbdV6SbIG01st025eINEWd1p_0-Oo3wfZ6klRUd3muF6-PYZs4/s400/Template+default+modif.gif" width="200" /></div><div class="separator" style="clear: both; margin-bottom: 1.5em; text-align: center;"><img alt="blogger copy template" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SWEp2Oy-v5h4GJmEi7T3WorRUuEQu3ROFdoUvfbedDR5IpQhTru4M9kuT-3EuyWKikFaFxa81x2W6xdghNxgusZMWn2KMdblDV6ed6Z1IaINHTfJbvhWR4aKS7Vo3w0XQG-vrMOHctY/s400/Template+long+used.gif" width="300" /></div><h2>Minimalis Template (elastis layout)</h2>Hanya ingin mencoba yang minimalis & hasilnya tidak mengecewakan. Kalau tidak salah digunkan dalam waktu yang sebentar dari Maret 2011–Juli 2011.<div class="separator" style="clear: both; margin-bottom: 1.5em; text-align: center;"><img alt="elastis blogger template" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx84vh0A7tD43QS8PcHcEKQPJRNwiHdxQ6FcHSDL8wSFNHwarfFMwtFy2ctJCpKWuhQtKl0lBtVf7DaL5lndPNvYWgjwX3mph90TEuqXOxfifcMyak1Sjljz8CjiigfcKLW52eiJZtpCE/s400/Template+Minimalism.gif" width="300" /></div><h2>Template sekarang digunakan (liquid layout)</h2>Yah, sekedar trial & error dengan layout yang berbeda. Template ini mengadopsi banyak alternatif untuk menanamkan widget/gadget, mungkin di atas, di kanan, atau di bawah.<div class="separator" style="clear: both; margin-bottom: 1.5em; text-align: center;"><img alt="liquid blogger template" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk959hBQuP4Gj7RN5RHg9WhyHJurO_0UPPcEEQJRmPucx4NfbKl1Ed1myZZq_BxAv5piXj1LjxC4uvnZ7xuRlljh-m4q34K2gCHZ9yK2EHebGq2yhgPi-QHNXyBf-YRWjItAnmx-vxSlQ/s400/Template+Now+to+use.gif" width="300" /></div>Seperti kata saya di atas bahwa <q>mungkin perubahan itu diperlukan untuk suatu revolusi</q>. Kira-kira perubahan seperti apa yang dimaksudkan oleh kalimat tersebut? Dan sampai kapan template ini digunakan oleh Optimasi Blog?Pembaharuan (07 Januari 2013): Bertepatan dengan aktif blogging kembali pada bulan September 2012 — hiatus hampir 1 (satu) tahun dengan posting terakhir “<a href="http://optimasi-blog.blogspot.com/2011/10/membuat-amplop-perangko-dengan-css3.html">Membuat Amplop + Perangko Dengan CSS3</a>” oleh Rudy Azhar — maka dilakukan ‘pergantian kulit’, seperti yang tampak sekarang ini.

5:21 PM

Kostumisasi Penomoran pada Komentar Blogger™

GIBZET0407 - 2:31 AM

<h2>Credits</h2>Posting ini merupakan repost dari penulis <a href="http://eosmate.blogspot.com/2008/08/memberi-nomor-urut-pada-komentar-di.html">Blognya Firdaus | eosBlog 2.0</a>, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog <a href="http://vagabundia.blogspot.com/">Vagabundia</a> berasal dari Buenos Aires, Argentina.<h2>Menambah nomor urut komentar</h2>Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.Tambahkan CSS (Cascading Style Sheets) berikut di atas <code>]]></b:skin></code>. <pre><code>.numberingcomments { float:right; text-align:right; display:block; width:50px; margin:0 5px 0 0; font-size:1em; font-weight:normal; }</code></pre><ul><li>Untuk merubah letak nomor ke kanan (<code>right</code>) atau ke kiri (<code>left</code>) dapat Anda lihat pada atribut kode yang berwarna biru.</li> <li>Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.</li> <li>Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].</li> <li>Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.</li> </ul>Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar. <pre><code> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <script type='text/javascript'>var CommentsCounter=0;</script> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd></code></pre>Sisipkan kode yang berwarna merah di antara kode-kode di atas.HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar. <pre><code> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a></code></pre>Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini. <pre><code> <a expr:href='data:comment.url' title='comment permalink'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </a> </code></pre><h2>Kostumisasi nomor urut komentar</h2>Jika Anda telah melakukan <a href="http://optimasi-blog.blogspot.com/2011/06/kostumisasi-avatar-komentar.html">kostumisasi avatar komentar</a> dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti: <pre><code>.numberingcomments { float:left; text-align:right; display:block; margin-left:-50px; font-size:1em; font-weight:normal; } .numberingcomments:after {content:"."}</code></pre>Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.

2:31 AM

Optimasi Kotak Komentar Blogger™

GIBZET0407 - 3:21 AM

Anda tentu sudah baca posting tentang “<a href="http://optimasi-blog.blogspot.com/2011/06/kostumisasi-avatar-komentar.html">Kostumisasi Avatar Komentar</a>”, “<a href="http://optimasi-blog.blogspot.com/2011/06/tahukah-anda.html">Tahukah Anda?</a>”, & “<a href="http://optimasi-blog.blogspot.com/2010/06/trik-blogger-mengatur-tataletak-link-to.html">Trik Blogger | Mengatur Tataletak Link to This Post</a>”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.<a name="more"></a> <h2>Merubah lebar kotak komentar</h2>Tambahkan CSS (Cascading Style Sheets) berikut di atas <code>]]></b:skin></code>. <pre><code>.comment-form { width:425px; max-width:425px; overflow:auto; clear:both; }</code></pre>Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan <code>px</code>, <code>em</code>, <code>%</code>, atau <code>pt</code>. Atribut <code>width</code> berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan <code>max-width</code> digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.<h2>Aksesoris kotak komentar</h2><h3>1. Menambah teks sebelum kotak komentar</h3><figure><img alt="Optimasi formulir komentar" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlT3HXQArIg4tRS8zNKeQ2eN49kGBmavs2zKI865n2f48jUcuW3fF823odA8R-FUgwqA56U1L3oaiC2cxk-9Q2yKZHbHIP0C58nXUnFZLjnRr-1b4x07QunESvuHIy_J3I5et05oO92M/s320/comment-form.png" width="350"/><figcaption>Figure 1. Menambah teks sebelum kotak komentar (panah hitam)</figcaption></figure> <pre><code> <h2 id='comment-post-message'><data:postCommentMsg/></h2> Silakan berkomentar, tapi jangan memasukkan SPAM yah… <data:blogCommentMessage/> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></code></pre>Catatan: Kode yang berwarna merah merupakan kode yang dicari, sedangkan yang berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah <code><h4 id='comment-post-message'><data:postCommentMsg/></h4></code>.<h3>2. Menambah variasi teks atau gambar di samping kotak komentar</h3>Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut <code>width</code>—elemen komentar (<code>#comments</code>) & lebar kotak komentar (<code>.comment-form</code>) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya. Yang perlu di garis-bawahi, bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.Coba Anda lihat gambar di atas (Figure 1), perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan & bentuknya lebih kurang terlihat pada model di bawah ini.You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode <abbr title="Cascading Style Sheets">CSS</abbr> maupun <abbr title="HyperText Markup Language">HTML</abbr> dalam template blog Anda.<h4>Kode CSS</h4><pre><code>.intermezzo { float:right; width:32%; margin-top:8em; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .intermezzo .first-letter { float:left; line-height:0.5em; padding:0.175em 0.15em 0.0175em 0; font-size:5em; } .intermezzo .first-line { margin-left:-5.75em; } .intermezzo .enjoy { display:block; font-variant:small-caps; font-weight:bold; } .intermezzo .type-s { padding:0.175em 0 0; font-size:6.15em; vertical-align:-0.35em; } .intermezzo .end-letter .hidden-s { color:#fafafa; display:block; position:absolute; left:-1.75em; } .intermezzo .end-letter { text-transform:uppercase; font-size:2em; margin:-0.225em 0 0 2.225em; display:block; position:absolute; } .intermezzo .dot { font-size:1.5em; bottom:-1.5em; margin-left:6em; display:block; position:absolute; } .dot .dot-1 { bottom:-0.5em; display:block; position:absolute; } .dot .dot-2 { bottom:-1em; display:block; position:absolute; margin-left:-0.25em; } .dot .dot-3 { bottom:-1.5em; display:block; position:absolute; margin-left:-0.75em; } .dot .dot-4 { bottom:-2em; display:block; position:absolute; margin-left:-1.525em; } .dot .dot-5 { bottom:-2.5em; display:block; position:absolute; margin-left:-2.5em; } .dot .dot-6 { bottom:-3em; display:block; position:absolute; margin-left:-3.75em; }</code></pre><ul><li>Letakkan kode tersebut di atas <code>]]></b:skin></code>.</li> <li>Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template “Optimasi Blog” & belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.</li> <li>Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan template blog Anda. <code>width</code> menunjukkan lebar elemen & <code>margin-top</code> menunjukkan jarak margin suatu elemen dengan bidang di atasnya.</li> <li>Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.</li> </ul><h4>Kode HTML</h4><pre><code>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</code></pre><ul><li>Letakkan kode HTML tersebut di atas kode berikut. <pre><code> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if></code></pre></li> <li>Apabila Anda memulai pencarian dengan kode <code></code>, maka Anda akan menemui 2 (dua) kode. Pilihlah yang kedua!</li> <li>Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode <code><div style='clear:both;'></div></code> di atas kode HTML <code></code>. </li> <li>Update (June 29, 2011): Ketika Anda melakukan pengaturan bahwa komentar tidak di-izinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di-antara HTML <code>.intermezzo</code>. <pre><code><div style='clear:both;'></div> <b:if cond='data:post.allowNewComments'>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</b:if></code></pre></li> <li>Update (June 29, 2011): Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML <code>.intermezzo</code>. <pre><code><div style='clear:both;'></div> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowNewComments'>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</b:if></b:if></code></pre></li> <li>Kemudian rubah CSS <code>.comment-form</code> menjadi (lihat kode berwarna merah): <pre><code>.comment-form { width:…; max-width:…; overflow:auto; clear:left; }</code></pre>dot…dot…dot tergantung isian nilai yang telah Anda masukkan.</li> </ul>Seperti ucapan sebelumnya, Anda pun bisa berkreasi dengan variasi kode dan/atau bentuk lain sesuai dengan keinginan & mungkin dapat merebut simpati pengunjung di blog Anda.

3:21 AM

Kostumisasi Avatar Komentar

GIBZET0407 - 6:46 PM

Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?<div style="text-align:center; margin:0 auto 1.5em;"> <img alt="Avatar komentar" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFONIIEbYBY6y8QNjehfB26jTPptFcEnm_yhkHDYzcEpjZpjPrgUqzZLEhZRWKD4yVETiemtEfJWoYlSWf8pydHcHuvyNO3X31TMv2rHVC1Aq691zoXQU44G2_xw07cHr8_vkvLiHJIHQ/s320/avatar+komentar.png" style="clear:both; border-width:3px; border-style:dotted dashed solid double; border-color:#666666;" title="Kostumisasi avatar komentar" width="320"/></div>Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.<a name="more"></a>Apabila Anda ingin mengetahui kode <abbr title="Cascading Style Sheets">CSS</abbr> embeded tersebut, coba buka blog Anda & tekan tombol <kbd>Ctrl</kbd> + <kbd>U</kbd> pada papan ketik. Mungkin Anda akan melihat kode seperti ini:<pre><code><link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' /></code></pre>Dari bundle CSS di atas akan kita temui kode avatar komentar sebagai berikut.<pre><code>#comments-block .avatar-image-container img { -ms-interpolation-mode:bicubic; border:1px solid #ccc; float:right; } #comments-block .avatar-image-container.avatar-stock img { border-width:0; padding:1px; } #comments-block avatar-image-container { height:37px; left:-45px; position:absolute; width:37px; }</code></pre>Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.<h2 id="avatar1">Memperbesar gambar avatar</h2>Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah & letakkan di atas <code>]]></b:skin></code>.<pre><code>#comments-block avatar-image-container { height:37px; left:-45px; position:absolute; width:37px; }</code></pre> Catatan: Silakan dirubah nilai atribut <code>height</code> & <code>width</code>—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “<a href="#avatar3">mengganti gambar blank</a>” <h2 id="avatar2">Merubah letak avatar</h2> Lihat kembali kode untuk “<a href="#avatar1" title="lihat kode avatar di atas">memperbesar gambar avatar</a>”, kemudian ganti atribut <code>left</code>—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan. Anda dapat pula menambahkan atribut lainnya, contoh <code>margin:2em 0 -2px 0;</code>. Artinya avatar akan bergeser ke bawah sejauh 2 ems dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam <abbr title="HyperText Markup Languange">HTML</abbr> komentar seperti di bawah ini (hanya untuk diketahui saja).<pre><code><b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/> </b:if></code></pre> <h2 id="avatar3"> Mengganti gambar blank</h2> Tampilan blank pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar blank dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:<pre><code>#comments-block .avatar-image-container img { -ms-interpolation-mode:bicubic; border:1px solid #ccc; float:right; }</code></pre> Tambahkan atribut:<pre><code>background:url('alamat penyimpanan gambar avatar') no-repeat; height:37px; width:37px; </code></pre> Silakan ubah alamat & nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut <code>height</code> & <code>width</code> pada ulasan “<a href="#avatar1" title="lihat kode avatar di atas">memperbesar gambar avatar</a>”. Hasilnya akan terlihat seperti di bawah ini.<pre><code>#comments-block .avatar-image-container img { -ms-interpolation-mode:bicubic; border:1px solid #ccc; float:right; background:url('alamat penyimpanan gambar avatar') no-repeat; height:37px; width:37px; }</code></pre>Kemudian letakkan di atas kode <code>]]></b:skin></code>. <h2> Mempercantik avatar dengan CSS3</h2> Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain <a href="http://optimasi-blog.blogspot.com/2010/06/rounded-corner-membuat-sudut-menjadi.html">rounded corner</a> & box shadow. <pre><code>#comments-block .avatar-image-container img { -ms-interpolation-mode:bicubic; border:1px solid #ccc; float:right; background:url('alamat penyimpanan gambar avatar') no-repeat; height:37px; width:37px; border-radius:5px; box-shadow:2px 2px 5px #666666; }</code></pre> Catatan: Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar blank” di atas. Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.

6:46 PM

GIBZET0407