March 2011

Membuat Menu Navigasi Image

GIBZET0407 - 12:26 PM

Navigasi merupakan penentuan posisi & arah tujuan, baik di medan sebenarnya atau di peta (<a href="http://id.wikipedia.org/wiki/Navigasi"><cite title="Navigasi. (Maret 29, 2011)">Wikipedia</cite></a>). Dalam blog, kita bersama mengenal istilah sitemap yang mungkin dapat kita hubungkan dengan peta. Navigasi dalam blog bertujuan untuk<a name='more'></a> memberikan kemudahan bagi pengunjung menemukan tujuan konten yang ingin ia cari (baca:red).Berbagai jenis menu navigasi dapat Anda sematkan dalam blog, seperti: <a href="http://optimasi-blog.blogspot.com/2005/07/dasar-pembuatan-menu-horizontal.html">navigasi horizontal</a>, vertikal, dan sebagainya. Termasuk menu navigasi dengan image (gambar) yang akan kita review sekarang ini. Bagaimana bentuk dari navigasi yang saya maksud, silakan klik link ini <a href="http://demo-optimasi-blog.blogspot.com/" rel="nofollow">blog versi demo</a>. Coba perhatikan kumpulan gambar di sebelah kanan blog demo tersebut! Navigasi image akan terus bergeser mengikuti arah scroll mouse ke atas dan ke bawah (fixed).1. Letakkan kode <abbr title="Cascading Style Sheet">CSS</abbr> berikut di atas <code>]]></b:skin></code>.<pre>/*-- NAV IMAGE --*/ #nav-image { right:<red>4%</red>; position:fixed; top:<red>33%</red>; padding:0 6px; overflow:hidden; } .linkopacity img { filter:alpha(opacity=25); -moz-opacity:<green>0.3</green>; opacity:<green>0.3</green>; border:0; } .linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity:<green>1.0</green>; opacity:<green>1.0</green>; border:0; } .to-home, .table-of-content, .back-to-top, .to-subscribe, .to-comment, .back-to-down {border:0; margin:<red>1em</red> 0;}</pre>Catatan:<ul><li>Kode yang berwarna merah dapat Anda rubah, sesuai dengan karakter blog Anda.</li> <li>Jika Anda ingin meletakkannya di sebelah kiri, ganti <code>right:<red>4%</red>;</code> menjadi <code>left:<red>4%</red>;</code>.</li> <li>Semakin kecil nilai <code>opacity</code> atau <code>-moz-opacity</code> (warna hijau) — nilainya berkisar antara 0 – 1 —  maka image semakin blur (baca:kabur).</li> </ul>2. Letakkan — atau tidak — jQuery berikut di atas <code></head></code>.<pre><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$("<red>a[href*=#content], a[href*=#comments-block], a[href*=#footer-content]</red>").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})}); //]]> </script></pre>JQuery di atas hanya akan menampilkan scrolling yang lembut, ketika link dalam image kita klik. Kemudian untuk kode jQuery yang berwarna merah merupakan link - link tujuan dari navigasi image. Attention! Mungkin template yang satu berbeda dengan lainnya, dimungkinkan pula untuk merubah kode yang berwarna merah (<code><red>#content</red></code>, <code><red>#comments-block</red></code>, <code><red>#footer-content</red></code>).3. Letakkan kode <abbr title="HyperText Markup Language">HTML</abbr> berikut di atas <code></body></code>. <pre style="white-space:pre-wrap;"><figure id='nav-image'> <div class='to-home'> <a class='linkopacity' href='isi dengan alamat blog Anda…' title='Halaman Utama'><img alt='Home' height='30' src='<green>https://lh6.googleusercontent.com/_sl-hvfgWCfI/TXaFG5_UosI/AAAAAAAAABU/tEReYbtwo4w/home.png</green>' width='30'/></a> </div> <div class='table-of-content'> <a class='linkopacity' href='isi dengan alamat blog Anda…/search?max-results=200' rel='nofollow' title='Daftar Isi'><img alt='Content' height='30' src='<green>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWo9e59RQ0pqn-KR2NaCyyTigRNWSPJJggPal7jbyDHMHtMbwWwD5wQb7PjDNRCowpDwjkQtnXgIdeI7qdQ1qL4bsPlggmu2w8I31HlHa4uTYkQhfJM8acnS2p6TxVx3lpssG4uVUDMjg/s800/arsip.png</green>' width='30'/></a> </div> <div class='back-to-top'> <a class='linkopacity' href='<red>#content</red>' title='Ke Atas'><img alt='Up' height='30' src='<green>https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHPH5nuI/AAAAAAAAABY/UtBQNUtekmA/arrow-up.png</green>' width='30'/></a> </div> <blue><b:if cond='data:blog.pageType == "item"'></blue> <div class='to-comment'> <a class='linkopacity' href='<red>#comments-block</red>' title='Komentar'><img alt='Comment' height='30' src='<green>https://lh3.googleusercontent.com/_sl-hvfgWCfI/TXaFHgfaC9I/AAAAAAAAABg/0FmVG-_r7p4/comment.png</green>' width='30'/></a> </div><blue></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'></blue> <div class='to-subscribe'> <a class='linkopacity' href='isi dengan alamat RSS blog Anda…' title='Langgan RSS'><img alt='Langgan RSS' height='30' src='<green>https://lh5.googleusercontent.com/_sl-hvfgWCfI/TXaX0fGJIPI/AAAAAAAAABw/aZqTbkdIeQI/RSS.png</green>' width='30'/></a> </div><blue></b:if></blue> <div class='back-to-down'> <a class='linkopacity' href='<red>#footer-content</red>' title='Ke Bawah'><img alt='Down' height='30' src='<green>https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHSoQCxI/AAAAAAAAABc/evR8CjwFCFQ/arrow-down.png</green>' width='30'/></a> </div> </figure></pre>Catatan :<ul><li>Perhatikan kode yang berwarna merah (HTML = JQuery )!</li> <li>Silakan rubah — atau tidak  — alamat image (warna hijau) sesuai dengan alamat penyimpanan image Anda.</li> <li>Sesuaikan <code>height</code> & <code>width</code> dengan besar - kecilnya gambar yang Anda inginkan.</li> <li>Kode yang berwarna biru silakan buka kembali posting tentang “<a href="http://optimasi-blog.blogspot.com/2009/06/optimasi-widget-yang-ditampilkan-dalam.html">optimasi tampilan widget</a>”.</li> <li>Jangan dilupakan! Bagi blog yang menggunakan image sebagai media bacanya, sebaiknya selalu menambahkan atribut <code>alt='…'</code> dan <code>title='…'</code>.</li> </ul><selector><a href="http://demo-optimasi-blog.blogspot.com" rel="nofollow">Demo Navigasi Image</a></selector>Semoga bermanfaat trik membuat menu navigasi image ini.

12:26 PM

Informasi Update Posting Terdahulu (1)

GIBZET0407 - 4:17 AM

Tidak sedikit posting di blog ini yang seharusnya di update. Apalagi kalau posting tersebut berkaitan dengan ‘widget’ atau ‘gadget’. Selanjutnya, secara berkala Optimasi Blog akan berusaha rutin melakukan update<a name='more'></a> terhadap “posting-posting terdahulu”, yang ditengarai mendapat banyak keluhan dari Narablog. Selain itu, kami juga mengupayakan blog demo versi dari setiap posting yang berkaitan dengan trik blogger.Berikut ini merupakan beberapa update posting terdahulu yang mungkin — sedikit banyak — menimbulkan rasa kecewa di hati teman - teman sekalian, karena gagal diaplikasikan pada blognya masing - masing.1. <a href="http://optimasi-blog.blogspot.com/2009/03/icon-emosi-emoticon-dalam-komentar.html">Memasang Emoticon dalam Komentar</a>“Emoticon” tidak muncul dalam komentar, walaupun telah dipasang sesuai dengan step by step dalam posting Optimasi Blog. Atau bisa pula, emoticon hanya muncul jika yang berkomentar adalah pemilik blog (blog-owner : <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-beda-tampilan-komentar.html">beda tampilan komentar pemilik blog</a>).2. <a href="http://optimasi-blog.blogspot.com/2009/03/trik-membuat-cloud-label-label-awan.html">Trik Membuat Cloud Label</a>Hal tersebut dikarenakan pemindahan file - file javascript & animasi flash oleh pembuatnya. Sekarang, widget ‘Blogumus’ tersebut sudah dapat dimanfaatkan. Detailnya, silakan klik link point 2 (link sumber sudah termasuk didalamnya).3. <a href="http://optimasi-blog.blogspot.com/2010/06/trik-blogger-mengatur-tataletak-link-to.html">Mengatur Tata Letak “Link to This Post”</a>Setelah diaplikasikan, ternyata menimbulkan permasalahan baru dalam penyampaian komentar. Permasalahan tersebut adalah ketinggian form komentar tidak memenuhi syarat bagi blog-blog yang memanfaatkan fasilitas “verifikasi”.Kemudian ada beberapa posting yang tidak direkomendasikan untuk di-ikuti, antara lain:<ul><li><a href="http://optimasi-blog.blogspot.com/2010/06/link-penulis-komentar-comments-author.html">Link Penulis Komentar terbuka di Tab Baru</a></li> <li><a href="http://optimasi-blog.blogspot.com/2009/06/menghilangkan-garis-bintik-bintik-jejak.html">Menghilangkan Garis Bintik - Bintik Jejak Link</a></li> </ul>Demikian beberapa informasi tentang update pertama dari kami. Kritik & saran sangat kami harapkan, agar terjalin hubungan timbal – balik yang positif, baik itu konten dengan Anda; Anda dengan kami; dan kami dengan konten.

4:17 AM

Sentuhan Magis dalam Blog

GIBZET0407 - 8:53 AM

<img alt="J" class="alignleft" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgHurW0MXvXkrYRvRnWmCon96I6kD7WDsUs96w6tt_Wnjw392W_8LYEoNyY2OepC7vABF2P2MM4_-qKpqBheq6YM4IHD6xsWxQhQe7KPTC3CZEXSGu3fBA9L-ShdWxh3wkFAj-61wP8k/s144/j%20drop_caps.jpg" style="margin-right:.5em;" width="78" />Jangan biarkan tulisan hanya di - intimidasi oleh atribut emosi & ambisi yang berkesan mewah serta modern. Tapi beri ia pijakan yang kuat agar mampu bertahan! Dan biarlah pijakan tersebut bekerja dengan magicnya.<a name='more'></a><div style="border:1px solid #ddd;margin-bottom:1.6em;padding:15px;">BELAJARSaya masih belajar dan tulisan inipun saya dapat dari belajar. Kita semua sama-sama belajar_dalam hal apapun_agar tahu tentang sesuatu. So, tidak perlu ada sebutan "lebih pintar"."Kita tidak akan tahu 'garam itu asin', jika kita tidak mencobanya."Saya dan Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar 'puzzle' kata-kata_sudah 30'15" memikirkannya_yang tidak berarti apa-apa...</div><div style="border:1px solid #ddd;margin-bottom:1.6em;padding:15px;">BelajarSaya masih belajar & tulisan inipun saya dapat dari belajar. Kita semua sama - sama belajar — dalam hal apapun — agar tahu tentang sesuatu. So, tidak perlu ada sebutan “lebih pintar”.<blockquote>Kita tidak akan tahu ‘garam itu asin’, jika kita tidak mencobanya.</blockquote>Saya & Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar ‘puzzle’ kata - kata — sudah 30′15″ memikirkannya — yang tidak berarti apa - apa…</div>Dari kedua kasus bacaan di atas, “mana yang Anda sukai?” Mungkin rata - rata Narablog menyukai bacaan yang kedua, karena lebih legibility & readability (keterbacaan). Selanjutnya, pokok bahasan tulisan ini dibatasi hanya untuk membicarakan dua kasus tersebut.<h2>Analisa Kasus</h2>Dua kasus tulisan di atas sama - sama menggunakan keluarga font ‘Serif’ (<code>font-family:Georgia,Serif;</code>) & ukuran font sebesar 16 pixels (<code>font-size:16px;</code>). Panjang baris yang digunakan berkisar antara 52 – 78 karakter termasuk spasi, atau 2 – 3 alfabet yang disusun secara mendatar (1 alfabet=26 huruf). Selanjutnya, untuk mengerucutkan masalah dalam analisa, mungkin kita lebih menyoroti salah satu kasus. Yah, anggap saja kasus pertama merupakan problematika yang patut kita bicarakan.Titik sensitif problematika yang terdapat pada kasus pertama, antara lain :<ul><li>Pemilihan warna font yang kurang ‘matching’ dengan warna latar, sehingga tulisan pun kurang terbaca dengan jelas.</li> <li>Gaya penulisan rata kanan & rata kiri (<code>text-align:justify;</code>), menyebabkan kurangnya “konsistensi kontrol” per kata. Hal tersebut dapat kita temui pada lebarnya ‘white space’ (ruang kosong), antara kata yang satu dengan kata berikutnya dalam setiap baris tulisan.</li> <li>Jarak vertikal antar baris terlalu rapat, sehingga kita harus memicingkan mata untuk membaca tulisan tersebut.</li> <li>Penggunaan tanda baca yang kurang tepat.</li> <li>Judul kasus “Belajar” ditulis secara manual dengan huruf kapital.</li> </ul><h2>Alternatif Pemecahan</h2>Mudah - mudahan Narablog setuju bahwa salah satu alternatif pemecahan kasus pertama adalah pada kasus kedua. :)Menurut Harry Roberts, “panjang baris yang ideal untuk legibility berkisar antara 2 – 3 alfabet, atau 52 – 78 karakter termasuk spasi ”. Sedangkan Oliver Reichenstein berpendapat, “panjang baris yang optimal adalah 10 – 15 kata, & untuk liquid layout dengan ukuran font 100%, maka dibutuhkan lebar kolom sebesar 50% (layar windows)”.<blockquote cite="http://webdesign.about.com/od/layout/g/bldefliquidlyot.htm" title="Kyrnin, Jennifer. Web Design/HTML: liquid layout. (Maret 3, 2011)">“Liquid layout merupakan tata letak yang berdasarkan persentase dari ukuran jendela browser.”(<a href="http://webdesign.about.com/od/layout/g/bldefliquidlyot.htm">Definition: Liquid Layout</a>)</blockquote>Pemilihan warna font (<code>font-color</code>) seharusnya kontras dengan warna latar (<code>background</code>). <code>Background</code> gelap; <code>font-color</code> cerah, begitu pula sebaliknya. Kemudian, gaya perataan tulisan sebaiknya menggunakan “rata kiri” (<code>text-align:left;</code>) untuk menjaga konsistensi per kata & jarak “ruang kosong” yang ideal dalam setiap baris.Pengaturan jarak vertikal antar baris (ritme vertical) seharusnya menjadi salah satu titik penting untuk meningkatkan kenyamanan dalam membaca suatu tulisan. Hal ini dapat dilakukan dengan menambahkan atribut <code>line-height</code>, yang besarnya disesuaikan dengan ukuran font. Umumnya, pengaturan ini disertai pula dengan pengaturan jarak antar paragraf — paragraf 1, 2, 3,… — yang ber - atribut <code>margin-bottom</code>.<blockquote cite="http://csswizardry.com/type-tips/#tip-07" title="Roberts, Harry. Typography quick tips: Use a baseline grid. (Maret 3, 2011)">“If you have a 24px baseline, all your <code>line-height</code>s and <code>margin-bottom</code>s must be in multiples of 24. So a font-size of 16px would need a <code>line-height</code> of 1.5em and a <code>margin-bottom</code> of 24px.”Harry Roberts1</blockquote>Secara matematis, mungkin rekomendasi dari Harry Roberts dapat ditulis demikian: <code>font-size:16px;</code> = <code>line-height:1.5em;</code> + <code>margin-bottom:24px;</code>. Artinya font yang berukuran 16 pixels membutuhkan tinggi sebesar 1.5 ems & batas bawah antar paragraf sebesar 24 pixels. Perhatikan juga jarak antar huruf — jika masih kelihatan rapat — kita dapat menambahkan atribut <code>letter-spacing</code> secukupnya. Selain itu, Anda pun bisa menentukan sendiri, besaran (<code>font-size</code>, <code>line-height</code>, & <code>margin</code>) yang sesuai dengan karakter blog Anda.Alangkah lebih baik, kalau kita selalu memperhatikan tanda baca dalam tulisan kita, sehingga “setiap orang” mampu memaknai tulisan — intonasi, jeda, & sebagainya — sesuai dengan pengamatannya sewaktu pembacaan. Mengenai tanda baca lebih lanjut, Anda dapat mengunjungi sebuah artikel menarik, yang diberi title “<a href="http://ardianzzz.com/2010/07/17/tanda-baca.html">Tanda Baca</a>” oleh Ardianzzz.Akhirnya kita sampai di penghujung alternatif, yakni huruf kapital yang ditulis secara manual. Jika kita ingin menulis kata atau beberapa kata dengan huruf kapital, sebaiknya menggunakan <abbr title="Cascading Style Sheet">CSS</abbr> untuk mengubahnya, contoh: <code>{text-transform:uppercase;}</code>. Hal ini tidak berlaku untuk kata - kata yang pada dasarnya memang ditulis dengan huruf kapital, seperti: RI, DPR, PBB, & lain - lain.Itulah sedikit dari sekian banyak sentuhan magic — CSS & <abbr title="HyperText Markup Language">HTML</abbr> — yang mungkin dapat lebih menata tulisan kita untuk menciptakan kesan tertentu, sehingga pembaca mendapatkan kenyamanan membaca semaksimal mungkin. Mungkinkah ini sebagian kecil dari “Tipografi”?<h2>Sumber Tulisan</h2>Berikut beberapa sumber bacaan yang mungkin dapat menambah wawasan & pengetahuan serta bahan koreksi, atas kesalah – tafsiran penulis dalam menerbitkan posting ini.<ol><li><a href="http://csswizardry.com/type-tips">Typography quick tips</a> (Harry Roberts of CSS Wizardry)</li> <li><a href="http://csswizardry.com/quick-tips">Quick Tips-A series of quick development tips</a> (Harry Roberts of CSS Wizardry)</li> <li><a href="http://id.wikipedia.org/wiki/Tipografi">Tipografi</a> (Wikipedia)</li> <li><a href="http://www.informationarchitects.jp/en/100e2r">The 100% Easy – 2 – Read Standard</a> (Information Architects)</li> <li><a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography">Five simple steps to better typography</a> (Mark Boulton)</li> <li><a href="http://ardianzzz.com/2010/06/11/tipografi.html">Tipografi</a> (Ardianzzz)</li> </ol>

8:53 AM

Serbuan ‘Line Break’ Tag

GIBZET0407 - 6:01 AM

Line break merupakan sebuah tag <abbr title="HyperText Markup Language">HTML</abbr> yang memaksa baris karakter atau kata diletakkan pada baris baru—biasanya ditulis dengan <code> </code>. Dalam blogger, tidak jarang ditemukan posting blog yang menggunakan tag <code> </code>—termasuk <a href="http://optimasi-blog.blogspot.com">optimasi blog</a>. Sekarang,<a name='more'></a> coba perhatikan dua contoh posting di bawah ini :<pre>Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas. Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (<a href="http://rudyazhar.com/">Blog Rudi Azhar</a>) yang merupakan salah satu admin <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a>. Cara I : </pre><pre>Beberapa bulan yang lalu, Blogger telah mengumumkan <a href="http://bloggerindraft.blogspot.com/2010/11/more-fonts-means-more-choice.html">beberapa font baru</a> untuk desainer template. Ya, beberapa bulan yang lalu itu hanya dapat diakses dari Draft Blogger. Kemarin, Blogger tidak hanya diluncurkan Font Web untuk SEMUA pengguna Blogger, tetapi juga mengumumkan bahwa mereka telah menambahkan 35 font tambahan untuk campuran, untuk total 77 grand font! Siap untuk mendapatkan pengalaman dengan pilihan font baru? Cukup masuk ke tab Advanced Designer Template Blogger untuk blog Anda, pilih jenis teks yang ingin perubahan (Post Title, Judul Blog, dll) dan klik pada salah satu Font Web baru untuk pratinjau. Jangan khawatir, tidak akan ada perubahan di blog Anda sampai Anda memilih "Terapkan ke Blog", dan ini berarti Anda dapat bermain-main dengan semua font dan hanya beralih bila Anda siap.</pre>Kedua contoh di atas diambil dari blog ini—yah, hanya dengan membuka salah satu posting, kemudian tekan <kbd>Ctrl</kbd> + <kbd>u</kbd> secara bersamaan. Nah, berdasarkan kedua contoh tersebut menurut Anda “mana yang lebih baik?”Saya tidak membahas tentang semantik & aksesibilitas atau apalah namanya, karena bukan ahli di bidang ilmu itu. Ruang lingkup hanya dibatasi pada kebiasaan dalam melakukan posting di blogger.<h2>Timbulnya Line Break</h2>Pertama, tag <code> </code> akan muncul otomatis saat menekan tombol <kbd>Enter (↵)</kbd>. Ketika kita ingin membuat baris baru, maka secara naluriah akan menekan 1× enter. Hal ini sebanding dengan saat kita ingin membuat paragrap baru, maka akan menekan 2× enter. That's right?<pre>Ketiklah sebuah postingan, kemudian tekan tombol enter. Apa yang akan terjadi setelah itu? -- Enter -- Ternyata tercipta baris baru..</pre>Hasil dari penulisan di atas, mungkin akan terlihat seperti di bawah ini :<pre>Ketiklah sebuah postingan, kemudian tekan tombol enter. Apa yang akan terjadi setelah itu? Ternyata tercipta baris baru..</pre>Kedua,—sudah tentu dimasukkan secara sengaja oleh penulis posting sendiri. :)<h2>Minimalisasi Line Break</h2>Biasanya, kita membuat posting dalam metode Compose. Cara ini merupakan cara yang mudah dan aman untuk membuat bentuk postingan sesuai dengan keinginan, tapi tidak dengan tag HTML-nya. So, membiasakan penggunaan metode Edit HTML dalam membuat suatu posting, mungkin lebih baik.<blockquote>Terkadang kita menyandingkan, bahwa membiasakan dengan memaksa merupakan kata yang sama.</blockquote>Manfaatnya—selain membuat tulisan di blog, kita juga sedikit belajar tentang penggunaan markup HTML—walaupun hanya sekedar menulis <code></code>, <code> </code>, & <code></code>.<blockquote>Waspada terhadap gerakan refleks untuk menekan tombol <kbd>Enter (↵)</kbd>, “oops, tidak sengaja”. Bukankah lebih baik membiasakan sesuatu dengan hal-hal yang baik pula?</blockquote>Tag HTML <code></code> merupakan awal penulisan yang tidak jelek dalam postingan. Biarkan <code></code> menguasai aliran kata demi kata sampai membentuk sebuah paragrap yang sempurna—jangan lupa mengakhirinya dengan <code></code>. Kemudian letakkan kembali <code></code> & susun kata-kata yang berhubungan dengan paragrap tersebut—akhiri lagi dengan tag <code></code>. It's beautiful!. Coba rasakan bedanya apabila kita menulis postingan—ketika sebuah paragrap selesai diketik, ditindaklanjuti dengan menekan enter sebanyak 2×. Disisi lain, atribut <code>p</code> dalam <abbr title="Cascading Style Sheet">CSS</abbr> template bukan sekedar pajangan, namun mungkin memiliki arti yang mendalam bagi si pembuatnya & bermanfaat bagi pemakainya.Dengan demikian, sedikit–banyaknya kita telah berusaha meminimalisasi serbuan Line Break tag (<code> </code>) dalam postingan di blog. Selain itu, setiap posting yang bagaimanapun atau seperti apapun mempunyai arti tertentu, selama pembacanya memperoleh manfaat dari posting tersebut. Posting yang memiliki arti mungkin akan lebih berarti, jika kita sedikit meluangkan waktu untuk memperhatikan markah yang terkandung di dalamnya. Kaidah-kaidah markup HTML yang sangat sedikit di atas, mungkin hanya ‘snack’ atau bahkan menohok ke ulu hati kita. It's your choice!.<h2>Inspirasi Tulisan</h2>Berikut ini beberapa artikel menarik yang mendorong penulis menerbitkan posting Serbuan ‘Line Break’ Tag.<ul><li><a href="http://hendro-prayitno.blogspot.com/2011/02/untuk-pemberi-tutorial-di-blogspot.html">Untuk pemberi tutorial di blogspot katanya bisa HTML tapi memposting semantic saja tidak pernah diterapkan</a> (Hendro Prayitno dalam Blogger admin)</li> <li><a href="http://ardianzzz.com/2010/07/17/tanda-baca.html">Tanda baca</a> (ArdianZzZ dalam ardianzzz.com)</li> </ul>

6:01 AM

GIBZET0407

Membuat Menu Navigasi Image

Informasi Update Posting Terdahulu (1)

Sentuhan Magis dalam Blog

Serbuan ‘Line Break’ Tag

Popular

Blog Labels

Blog Archive