Styling Unordered & Ordered lists

<p>Secara default <em>style</em> daftar urut menggunakan bullent (<em>unordered list</em>) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan <em>ordered List</em> ditampilkan dalam bentuk angka (<code>decimal</code>).</p><a name='more'></a> <h3>Default List</h3> <p>Kita anggap saja warna latar (<em>background</em>) merupakan area suatu elemen.</p><div class="satu"><p style="color:#888;text-transform:uppercase;">Unordered List:</p><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><br /> <li></li><br /> <li></li><br /> …dst…<br /></ul></pre></div><br /><div class="dua"><p style="color:#888;text-transform:uppercase;">Ordered List:</p><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><br /> <li></li><br /> <li></li><br /> …dst…<br /></ol></pre></div><div class="clear"></div><p>Atau kita bisa memberikan <em>style</em> pada CSS (<em>Cascading Style Sheets</em>) seperti ini <code>ul, ol {list-style-position:outside;}</code>.</p><div class="satu"><p style="color:#888;text-transform:uppercase;">Unordered List:</p><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"><p style="color:#888;text-transform:uppercase;">Ordered List:</p><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><p>Bentuk tanda daftar urut tidak terbatas hanya pada bullent <span class="amp">&</span> 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>.</p><h3>Image List</h3><p>Jika kode pemanggilan default <em>style list</em> menggunakan <code>ul {list-style-<span style="color:red;">type</span>:<span style="color:green;">...</span>;}</code> (<em>unordered list</em>) atau <code>ol {list-style-<span style="color:red;">type</span>:<span style="color:green;">...</span>;}</code> (<em>ordered list</em>), maka pemanggilan untuk daftar urut image menggunakan <code>ul {list-style-<span style="color:red;">image</span>:<span style="color:green;">url(...)</span>;}</code> atau <code>ol {list-style-<span style="color:red;">image</span>:<span style="color:green;">url(...)</span>;}</code>.</p><pre>ul {<br />list-type-image:url(...);<br />}</pre><p>Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan <em>style image</em>—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:</p><pre>ul {<br />list-style:none;<br />margin-left:0;<br />}<br /><br />ul li {<br />background:url(...) no-repeat;<br />padding-left:1.5em;<br />}</pre><br /><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><p style="font-size:small;">Catatan:<br/><em>Image list</em> 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>.</p><p>Tentang penggunaan image sebagai daftar urut antar berbagai peramban (<em>Crossbrowser Solution</em>), kita kunjungi kembali <cite title="w3schools: CSS List; Crossbrowser Solution"><a href="http://www.w3schools.com/css/css_list.asp">w3schools</a></cite>.</p><h3>Special Character List</h3><p><em>Styling list</em> dengan menggunakan karakter khusus memiliki keunikan tersendiri <span class="amp">&</span> yang jelas <del>belum</del> di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element <code>:before</code>.</p><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 (<em>Cascading Style Sheets</em>)</h4><pre>.listwithchar {<br />list-style:none;<br />margin-left:0;<br />}<br /><br />.listwithchar li {<br />margin-left:1.5em;<br />position:relative<br />}<br /><br />.listwithchar li:before {<br />content:"\25CA";<br />margin-left:-1.5em;<br />position:absolute<br />}<br /><br />.listwithchar li:hover:before {<br />content:"\221A";<br />position:absolute<br />}</pre><p>Perlu dijadikan catatan bahwa pengkodean untuk <code><ul></code> atau <code><ol></code> pada setiap <em>template</em> mungkin berbeda.</p><h4>HTML (<em>HyperText Markup Language</em>)</h4><pre><ul class="listwithchar"><br /> <li></li><br /> <li></li><br /> …dst…<br /><ul></pre><p>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>.</p><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>

Posted by Hii Sekai

Study Kasus: Valid HTML5 di Template Klasik

<p>Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (<i>Extensible HyperText Markup Language</i>) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.</p><a name='more'></a> <blockquote><p>Saya bukan penganut “harus valid X-HTML (<i>I love validator</i>)”. Bukankah tidak menjadi keliru, jika mencoba sesuatu yang mungkin dapat memberikan sebuah wacana bagi blogosphere (narablog).</p></blockquote><p>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. :)</p><p>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.</p><p>Update (July 22, 2011):<br /><br />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>.</p>

Posted by Hii Sekai

Redesign: Optimasi Blog dari Masa ke Masa

<p><span class="first-letter">B</span>erubah 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 Blogger^TM sudah merubah tampilannya (<i>redesaign</i>), maka Optimasi Blog ikut-ikutan berubah? Tidak, karena <i>redesaign</i> di blog ini telah lebih dulu dilakukan sebelum Blogger^TM. Kalau tidak salah release tampilan baru site <a href="http://bloggerindraft.blogspot.com/2011/07/bloggers-updated-interface-now.html">Blogger^TM in draft</a> dimulai pada hari ini (July 8, 2011).</p><p>Template yang Optimasi Blog gunakan sekarang (mencoba) menggunakan “<i>liquid layout</i>”—untuk mengetahui sedikit pengertiannya, silakan buka kembali posting <a href="http://optimasi-blog.blogspot.com/2011/03/sentuhan-dalam-blog.html">sentuhan <i>magic</i> dalam blog</a>—dan masih terkesan minimalis. <i>Font</i> yang digunakan <i>full</i> dari keluarga ‘serif’, berukuran <code>1em</code> <span class="amp">&</span> <code>line-height:1.5em</code>, serta sedikit ditambah bumbu <code>word-spacing</code> <span class="amp">& amp;</span> <code>letter-spacing</code>.<p><blockquote><p>Ngga perlu dikupas lebih dalam, ntar malah m’bosenin. Cukup diliat tampilan sekarang aja, gan. :)</p></blockquote><p>‘Emang’ beda dengan yang dulu? Silakan baca sekelumit ulasan tentang ‘bunglonisasi’ <i>template</i> <a href="http://optimasi-blog.blogspot.com/">Optimasi Blog</a> dari masa ke masa berikut ini.</p><h2>Default Template (<i>pixed layout</i>)</h2><p style="text-indent: 2.5em;">Pertama sekali <b>Optimasi Blog</b> menggunakan <i>default template</i> “Minima”, kemudian sedikit demi sedikit di modifikasi, sampai ke bentuk “blogger copy template”. Template tersebut lama digunakan dari 2009–Maret 2011.</p><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 (<i>elastis layout</i>)</h2><p style="text-indent: 2.5em;">Hanya ingin mencoba yang minimalis <span class="amp">&</span> hasilnya tidak mengecewakan. Kalau tidak salah digunkan dalam waktu yang sebentar dari Maret 2011–Juli 2011.</p><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 (<i>liquid layout</i>)</h2><p style="text-indent: 2.5em;"><i>Yah</i>, sekedar <i>trial <span class="amp">&</span> error</i> dengan <i>layout</i> yang berbeda. Template ini mengadopsi banyak alternatif untuk menanamkan <i>widget/gadget</i>, mungkin di atas, di kanan, atau di bawah.</p><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><p>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?</p><p><mark>Pembaharuan (07 Januari 2013)</mark>: 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 <strong>Rudy Azhar</strong> — maka dilakukan ‘pergantian kulit’, seperti yang tampak sekarang ini.</p>

Posted by Hii Sekai