Trik Blogger

Membentuk Tipe Blok Paragraf

GIBZET0407 - 1:17 AM

<img alt="Buat Entri dengan HTML" class="aligncenter" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4yb5a6esxIew-shjSFe_T5ykCG5y9dz5wa69QG61Gs9BRB4yK2oieL4HTy0a2ugzf-LzKOUm9b1pAsVQZLQ_qADWafAljGTCULBaJpwXvQzNu1D9UC4m8WzPylWyIyBI2Lx7r515z6nY/s550/Buat%2520Entri%2520dengan%2520HTML.png" style="margin-bottom:1.6em;" width="550"/>Biasanya Anda membuat posting dengan cara yang bagaimana? <abbr title="Hypertext Markup Language">HTML</abbr> atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <code></code> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.<a name="more"></a><pre>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</pre>Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik <kbd>Enter</kbd>. Dimana contoh pengkodean blok paragraf pada <abbr title="Cascading Style Sheets">CSS</abbr> template adalah sebagai berikut:<pre><code>p { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; }</code></pre>Sebagai bahan uji coba — dengan catatan tag <code>p</code> telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.<div class="project"><pre class="css" data-lang="css"><code><style type="text/css"> p:firsr-letter { float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 4em; line-height: .75em; height: .75em; /* fix to chrome */ margin: .25em .125em 0 0; *line-height: 1em; /* IE7 Only */ } </style> </code></pre><div class="alert info">Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan <code>class</code> yang ditargetkan dalam paragraf tersebut.</div><pre class="html" data-lang="html">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</pre><pre class="css" data-lang="css"><code><style type="text/css"> .first-letter:first-letter { float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 4em; line-height: .75em; height: .75em; margin: .25em .125em 0 0; *line-height: 1em; } </style></code></pre><div class="alert warning">Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <code><style type="text/css"></code> dan <code></style></code>.</div>Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik <kbd>Tab</kbd>.<pre class="css" data-lang="css"><code>p:first-line { text-indent: 2.25em; }</code></pre></div>Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat <a href="http://optimasi-blog.blogspot.com/2012/11/optimalisasi-fungsi-peramban-dalam.html">fungsi “Inspect Elements”</a>, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)

1:17 AM

jQuery Sliding (Efek Geser) pada Komentar

GIBZET0407 - 10:07 PM

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode <code>jQuery slideToggle()</code>, seperti yang telah diuraikan pada situs w3schools tentang <a href="http://www.w3schools.com/jquery/jquery_slide.asp">jQuery effects — sliding</a>.<pre><code>$(selector).slideToggle(speed,callback);</code></pre><a name="more"></a><div class="alert info">Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.</div><div class="project"><pre class="javascript" data-lang="javascript"><code>$("#flip").click(function(){ $("#panel").slideToggle(); });</code></pre></div><div class="alert info"><code>#flip</code> dan <code>#panel</code> merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.</div>Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas <code></head></code>.<pre><code><script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/></code></pre><div class="alert warning">Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.</div>Tambahkan pula <code>jQuery slideToggle()</code> dan letakkan di atas <code></body></code>.<div class="project"><pre class="javascript" data-lang="javascript"><code><script type='text/javascript'> //<![CDATA[ $("#flip").click(function(){ $("#comments").slideToggle("slow"); }); //]]> </script></code></pre></div>Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode <abbr title="Hypertext Markup Language">HTML</abbr> diantara markah berikut.<div class="project"><pre class="html" data-lang="html"> <div class='blog-posts hfeed'> … <div class='post-outer'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div id='flip'>Komentar</div>  <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='flip'>Komentar</div> <b:include data='post' name='comment_picker'/> </b:if> </div> … </div></pre>Dan terakhir adalah kustomisasi <abbr title="Cascading Style Sheets">CSS</abbr> dengan contoh penerapan sebagai berikut. Letakkan di atas <code>]]></b:skin></code>.<pre class="css" data-lang="css"><code>#flip { background: #fc6; cursor: pointer; padding: 1.5em 0; } #flip:hover, #flip:focus { background: #6cf; } #comments { display: none; }</code></pre></div>Jangan lupa disimpan. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar dapat diamati pada posting “<a href="http://optimasi-blog.blogspot.com/2013/01/bentuk-halaman-unik-di-blog.html">Bentuk Halaman Unik di Blog</a>”.

10:07 PM

Bentuk Halaman Unik di Blog

GIBZET0407 - 4:58 PM

<div class="unique-wrap bgblue"><img alt="Aktor Unik" class="aligncenter" height="381" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHzkKUxfGpVEO66ZbPiAhIO2G4TBNePnu3-9vzGlN7BkrF8t4wkePKkRY8lQaGjfZwaO_FxlqQqQ6RBquy1uos803W_VHcGEyUQgzdAbQQHj4IB2dGjZzrrvT5oUggDDcbdy0RBAmCPc/s600/unique%252Bactor.png" width="600"/></div><div class="unique4 preunique1 praunique1"><blockquote>Tidak jarang waktu dapat merubah pengalaman pengguna dalam melakukan eksplorasi terhadap eksistensi berbagai aktivitasnya, terutama berhubungan dengan blogging. Sadar atau tidak sadar pemahaman kita akan terus bertambah, oleh karena sebuah sangkar emas tidak akan mampu memenjarakan lautan rasa yang merindukan arti kebebasan. Ekspresi, semantik, emosi, dan aksesibilitas adalah berlian pengalaman yang tanpa sengaja tertuang dalam bentuk sebuah karya. Unique blogging.</blockquote><a name="more"></a></div><div class="clear"></div><div class="separator-margin"></div><div class="unique3">Betul sekali. Pengkodean posting ini menggunakan grid dengan kustomisasi manual & masih dengan menggunakan template yang sama. Dua cara yang mudah untuk konfigurasi pengkodean unik ini. Pertama, dengan memasukkan markup <abbr title="Cascading Style Sheets">CSS</abbr> <code><style type="text/css"> … </style></code> pada akhir postingan. Kedua, meletakkan CSS kondisional pada struktur pengkodean template dengan kriteria:<pre><code><b:if cond='data:blog.url == " …URL… "'> <style> … /* kumpulan kode CSS */ </style> </b:if></code></pre><div class="alert info">Sederhananya letakkan saja sesudah <code>]]></b:skin></code>.</div></div><div class="unique3">Sedangkan pada posting ini, saya lebih suka menggunakan cara yang kedua, namun terlebih dulu mengkustomisasinya memanfaatkan cara yang pertama sampai posting diterbitkan, sehingga diperoleh alamat permalink.<div class="alert warning">Metode editor posting harus dengan menggunakan <abbr title="Hypertext Markup Language">HTML</abbr> & bukan “Compose” [WYSIWYG (What You See Is What You Get)].</div>Hasilnya, dokumen akan terlihat lebih semantik, karena penggunaan tanda-tanda yang sesuai dengan markup yang disematkan, seperti blok paragraf, daftar urut, heading, blockquote, kode dan blok kode, serta yang pasti kita akan jarang menemui <a href="http://optimasi-blog.blogspot.com/2011/03/serbuan-break-tag.html">tag break (<code> </code>)</a>. Tidak kalah penting <a href="http://optimasi-blog.blogspot.com/2011/03/sentuhan-dalam-blog.html">irama vertikal (vertical rhythm)</a> akan tetap terjaga dengan baik hingga dokumen ini selesai dibuat.</div><div class="clear"></div><div class="separator-margin"></div><div class="unique2"><div class="small-wrap bgblue">Ekspresi</div></div><div class="unique4">Kode bukanlah sesuatu yang sulit untuk diterapkan, namun ia meliputi segala struktur yang mampu menciptakan harmoni dalam suatu konten. Dan tidaklah berlebihan ketika tanpa sengaja indera penglihat menyimak sebuah kalimat, <q>kode adalah puisi</q> (code is poetry).</div><div class="clear"></div><div class="unique2"><div class="small-wrap bgyellow">Semantik</div></div><div class="unique4">Tanda mampu memberikan makna tersendiri, sehingga pengguna dapat memahami apa yang terkandung di dalam sebuah dokumen tanpa harus menafsirkannya dengan berbagai sudut pandang yang berbeda. Ini adalah paragraf, ini adalah tanda baca, dan sebagainya — <a href="http://optimasi-blog.blogspot.com/2012/11/optimalisasi-konten-dalam-blog.html">optimalisasi konten</a>.</div><div class="clear"></div><div class="unique2"><div class="small-wrap bgred">Emosi</div></div><div class="unique4">Nafsu tidak hanya terbatas pada amarah, tidak jarang juga behubungan dengan pengendalian. Membuat posting tanpa makna berarti kita mengecilkan arti eksistensi dari sebuah informasi, dimana ia patut dinikmati, dihargai, menyegarkan, dan mempunyai kualitas hak cipta.</div><div class="clear"></div><div class="unique2"><div class="small-wrap bgblack">Aksesibilitas</div></div><div class="unique4">Indahnya sebuah informasi adalah ketika dia menciptakan kondisi yang <a href="http://optimasi-blog.blogspot.com/2012/11/desain-blog-dan-aksesibilitas.html">mudah bagi navigasi pengguna (pengunjung)</a>, baik diakses melalui berbagai alat, jenis peramban, keterbacaan, dan sebagainya. Suasana seperti itu tidak akan ada, terkecuali Anda (pengelola blog) mengkondisikan agar informasi tersebut memang memberi kemudahan bagi pengguna.</div><div class="clear"></div><div class="separator-margin"></div>

4:58 PM

Menata Pembuatan Tabel dalam Blog

GIBZET0407 - 3:29 PM

Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. Yah, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi <abbr title="Cascading Style Sheets">CSS</abbr>. Sedangkan <abbr title="Hypertext Markup Language">HTML</abbr> akan tampak seperti biasa saja, sehingga akan berbeda seperti posting tentang <a href="http://optimasi-blog.blogspot.com/2009/05/cara-membuat-tabel-dalam-blog.html">cara membuat tabel dalam blog</a> yang pernah kami terbitkan sebelumnya.<a name="more"></a><table><caption>Bentuk tabel sederhana</caption><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr></table><div class="project"><pre class="html" data-lang="html"><table> <caption>Judul Tabel</caption>  <tr>  <th>Uraian</th>  <th>Angka</th>  <th>Huruf</th>  </tr>  <tr>  <td>Satuan</td> <td>1</td> <td>Satu</td> </tr>  <tr> <td>Puluhan</td> <td>10</td> <td>Sepuluh</td> </tr>  <tr> <td>Ratusan</td> <td>100</td> <td>Seratus</td> </tr> </table></pre><div class="alert warning">Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.</div><pre class="css" data-lang="css"><code>table { border-bottom: 1px solid #ddd; border-spacing: 2px; margin: 1.6em 0; width: 100%; } caption { margin-bottom: 0; } tr, th, td { vertical-align: inherit; } th, td { border-top: 1px solid #ddd; padding: .8em .5em; } th { background: #f9f9f9; font-weight: 600; text-transform: uppercase; }</code></pre><div class="alert info">CSS di atas telah disesuaikan dengan vertical rhythm struktur kode awal blog ini yakni <code>line-height:1.6em;</code>.</div></div>Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa <code>caption</code> ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah & menambah sedikit properti serta nilainya.<pre><code>table, th, td { border: 1px solid #ddd; } th, td { text-align: center; }</code></pre><table class="style1"><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr></table>Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (<code>:hover</code>).<pre><code>tr:nth-child(2n+1) { background: #f9f9f9; } tr:hover { background: #bde5f8; color: #000; }</code></pre><div class="alert info">Ketentuan pemberian latar (<code>background</code>) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).</div><table class="style2"><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr><tr><td>Ribuan</td><td>1000</td><td>Seribu</td></tr></table>Bentuk terakhir adalah menggunakan properti tabel secara lengkap (<code>thead</code>, <code>tbody</code>, <code>tfoot</code>), namun mungkin tidak sering digunakan.<div class="project"><pre class="html" data-lang="html"><code><table> <caption>Judul Tabel</caption>  <thead> <tr> <th rowspan="2">Uraian</th>  <th colspan="2">Keterangan</th>  </tr>  <tr> <th>Angka</th> <th>Huruf</th> </tr> </thead>  <tfoot> <tr> <td>Jumlah</td> <td>1111</td> <td>Seribu Seratus Sebelas</td> </tr> </tfoot>  <tbody> <tr> <td>Satuan</td> <td>1</td> <td>Satu</td> </tr> <tr> <td>Puluhan</td> <td>10</td> <td>Sepuluh</td> </tr> <tr> <td>Ratusan</td> <td>100</td> <td>Seratus</td> </tr> </tbody> </table></code></pre><pre class="css" data-lang="css"><code>table { border-spacing: 2px; margin: 1.6em 0; width: 100%; } table, th, td { border: 1px solid #ddd; } caption { text-align: left; margin-bottom: .8em; } thead, tbody, tfoot { vertical-align: middle; } tfoot { border-top: 3px double #ddd; } tr, th, td { vertical-align: inherit; } th, td { text-align: center; padding: .8em .5em; } th { background: #f9f9f9; font-weight: 600; text-transform: uppercase; } tr:nth-child(even) /* sama dengan (2n) atau (2n+0) */ { background: #f9f9f9; } tr:hover { background: #bde5f8; color: #000; }</code></pre></div><div class="alert warning">Pastikan bahwa <code>tr:hover</code> berada pada susunan CSS dibawah pseudo-classes posisi (<code>:nth-child(n)</code> dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi hover akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (link), dimana <code>a:visited</code> berada di bawah <code>a</code> dan/atau <code>a:link</code>.</div><table class="style3"><caption>Judul Tabel</caption><thead><tr><th rowspan="2">Uraian</th><th colspan="2">Keterangan</th></tr><tr><th>Angka</th><th>Huruf</th></tr></thead><tfoot><tr><td>Jumlah</td><td>1111</td><td>Seribu Seratus Sebelas</td></tr></tfoot><tbody><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr><tr><td>Ribuan</td><td>1000</td><td>Seribu</td></tr></tbody></table>Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain & tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.<style type="text/css">table{margin:1.6em 0;}caption{margin-bottom:0;}tr{font-family:Consolas, "Lucida Console", Monaco, monospace;}table .style1,.style1 th,.style1 td,table .style2,.style2 th,.style2 td,table .style3,.style3 th,.style3 td{border: 1px solid #ddd;}.style1 th,.style1 td,.style2 th,.style2 td,.style3 th,.style3 td{text-align:center;}.style2 tr:nth-child(2n+1),.style3 tr:nth-child(even){background:#f9f9f9;}.style2 tr:hover,.style3 tr:hover{background:#bde5f8;color:#000;}.style3 caption{margin-bottom:.8em;text-align:left;}.style3 thead,.style3 tbody,.style3 tfoot{vertical-align:middle;}.style3 tfoot{border-top:3px double #ddd;}</style>

3:29 PM

Microdata dan RDFa License dalam Blog

GIBZET0407 - 2:41 AM

Dalam sebuah situs web atau blog, kita dapat menerapkan deskripsi mengenai apa yang terkandung dalam suatu halaman web. Boleh jadi ketika pengguna berkunjung ke blog kita & mengerti ketika mereka membaca halaman web itu. Namun dari sisi mesin penelusur, mungkin mempunyai pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Oleh karena itu tidaklah berlebihan apabila kita berusaha agar dokumen <abbr title="Hypertext Markup Language">HTML</abbr> atau <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> dapat pula dipahami oleh mesin penelusuran, dengan catatan dilakukan (markup) secara baik & benar.<a name="more"></a>Secara menyeluruh perlakuan markah microdata telah dijelaskan pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/microdata-pada-bloggercom.html">microdata pada Blogger™</a> — terutama berkaitan dengan Blogger™ — dimana target tipe utama adalah <code>http://schema.org/Blog</code>. Pada kasus penerapan microdata dan <abbr title="Resource Description Framework – in – attributes">RDFa</abbr> license ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (<code>itemtype</code>) yang berbeda pula. Untuk memberikan pengkodean markah microdata pada blog, kita akan menggunakan <code>itemtype='http://n.whatwg.org/work'</code> (<a href="http://www.whatwg.org/specs/web-apps/current-work/#licensing-works" rel="nofollow">www.whatwg.org</a>) dengan <code>itemprop='copyrightHolder'</code> (<a href="http://schema.org/Blog" rel="nofollow">schema.org</a>). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber <a href="http://creativecommons.org/choose/" rel="nofollow">lisensi Creative Commons</a> (License mark: HTML + RDFa) dengan sedikit kustomisasi agar lebih standar.<pre><code><div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'> … dan seterusnya … <footer> <div id='content-info' itemprop='copyrightHolder' itemscope='itemscope' itemtype='http://n.whatwg.org/work'> <meta expr:content='data:blog.homepageUrl' itemprop='work'/> <meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/> &amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <cite itemprop='title'><a expr:href='data:blog.homepageUrl' property='dc:title' rel='dc:source' title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' property='cc:attributionName' rel='cc:attributionURL'>Blogger.com</a>. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <a href='http://creativecommons.org/licenses/by/3.0/' rel='license' title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>. </div> </footer> </div></code></pre>Catatan: kode yang berwarna merah akan muncul pada rich snippets sebagai format microdata & kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.Kemudian lakukan <a href="http://www.google.com/webmasters/tools/richsnippets" rel="nofollow">pegujian data rich snippets</a> & lakukan pengujian pula melalui <a href="http://validator.w3.org/" rel="nofollow">markup validation service</a>. Apabila markup tersebut tepat, maka microdata dan RDFa license pada elemen <code><footer></code> dalam struktur blog akan lolos dari validitasi data.

2:41 AM

Gaya Penulisan Tag Kode dan Blok Kode

GIBZET0407 - 2:39 PM

Sebagai tindak menambah kebergunakan sebuah posting blog, penerapan semantik markup merupakan salah satu langkah logis agar struktur dokumen menjadi lebih baik. Bukan hanya penyandang disabilitas — saya kira — siapapun pun yang menggunakan pembaca layar pasti lebih mudah membedakan antara paragraf, daftar urut (<a href="http://optimasi-blog.blogspot.com/2011/07/styling-unordered-ordered-lists.html">styling unordered & ordered lists</a>), kutipan & preformatted text, kode, heading dan sebagainya.<a name="more"></a>Apabila kita menulis beberapa posting mengenai trik, turitoal, dan/atau pengkodean dalam suatu blog, maka kemunkinan besar akan terkait dengan tag <code>code</code> serta <code>pre</code>. Secara sederhana, Tag <code>code</code> biasanya berguna untuk menandai bahwa teks itu merupakan kode & tag <code>pre</code> untuk menandai bahwa teks berupa format bebas yang ditampilkan persis seperti pada ketikan asli dalam sebuah dokumen <abbr title="Hypertext Markup Language">HTML</abbr>. Pada posting ini, kita akan membuat gaya pengkodean untuk <code>code</code> dan kumpulan (block) <code>code</code> yang kemudian dimasukkan dalam tag <code>pre</code>.Berikut merupakan <abbr title="Cascading Style Sheets">CSS</abbr> dari penggunaan tag kode pada paragraf di atas.<pre><code>pre, code, kbd, samp, tt { font-family: Monaco, Consolas, "Lucida Console", monospace; } p code, ol code, ul code { background: #eee; margin: -.1em; padding: .1em; }</code></pre>Sedangkan penulisan dokumen <abbr title="Hypertext Markup Language">HTML</abbr> untuk blok kode akan ditunjukkan seperti di bawah ini.<pre><pre><code>pre, code, kbd, samp, tt { font-family: Monaco, Consolas, "Lucida Console", monospace; }</code></pre></pre>Nah, sekarang kita akan memberikan gaya penulisan blok kode (code block) yang sedikit berbeda, tetapi mungkin para blogger pernah melihatnya pada situs web atau blog lain.<div class="project"><pre class="css" data-lang="css"><code>pre { background: #606060; background-image: -webkit-linear-gradient(#606060 50%,#555 50%); background-image: -moz-linear-gradient(#606060 50%,#555 50%); background-image: -ms-linear-gradient(#606060 50%,#555 50%); background-image: -o-linear-gradient(#606060 50%,#555 50%); background-image: linear-gradient(#606060 50%,#555 50%); background-position: 0 0; background-repeat: repeat; background-size: 4em 4em; /* 2× line-height */ color: #fff; line-height: 2em; margin-bottom: 2em; overflow: auto; padding: 2em; /* = line-height (top & bottom) */ white-space: pre; } pre[data-lang="html"]:before, pre[data-lang="css"]:before { display: block; color: #fc3; /* vertical rythim (size 1.067em & line-height 1.5em) */ font: 1.0667em/1.5em sans-serif; font-weight: bold; margin-bottom: 1.5em; /* = line-height elemen */ text-transform: uppercase; } pre[data-lang="html"]:before { content: "html"; } pre[data-lang="css"]:before { content: "css"; }</code></pre><pre class="html" data-lang="html"><pre class="html" data-lang="html"><code>…masukkan blok kode HTML dalam markup ini…</code></pre> <pre class="css" data-lang="css"><code>…masukkan blok kode CSS dalam markup ini…</code></pre></pre></div>Apabila kita ingin agar blok kode tidak melebihi bidang elemen <code>pre</code> — menghilangkan fungsi scrolling — ganti <code>white-space: pre;</code> dengan <code>white-space: pre-wrap;</code>. Selain itu, kita dapat pula menambah, mengurangi, dan memodifikasi gaya penulisan blok kode di atas sesuai dengan keinginan masing-masing. Kesulitan mungkin terjadi pada konfigurasi pseudo-element <code>:before</code>, terutama pada ukuran font (teks) yang berbeda. Intinya kita perlu menyesuaikan ritme vertikal (vertical rythim) agar blok kode (<code>pre</code>) tetap pada jalurnya.

2:39 PM

Membagi Dua Kolom Elemen Posting

GIBZET0407 - 4:25 AM

<img alt="Bagan Elemen" class="alignleft" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnX3w9Z5FkxnbiJgoUi0YLZ0nj206pKfNKtfwleWoRGJg6vTLF8N8XttzCxLdGn25bvVn0p8Mab4Rz6-lEN5SeVj4YZT40wHpwCmB67z4vTOVyG8UahfrdaBx2VIicWDyPBXRlm9AFvY/s200/Elemen.jpg" width="200"/>Umumnya elemen posting memiliki satu kolom. Sekarang tindakan apa yang dapat kita lakukan agar kolom posting itu menjadi dua? Sebelum memulai trik tersebut, alangkah baiknya jika kita memahami mengapa sebuah kolom menjadi dua. Pengkoloman terjadi apabila tersedia ruang kosong — biasanya — disebelah kiri pada sebuah elemen dasar, sehingga elemen di bahwahnya akan mengisi ruang kosong tersebut. Sedangkan elemen dasar tersebut harus memperlihatkan struktur inline & penempatan bernilai relatif agar — nantinya — mudah untuk dikustomisasi. Salah satu contoh penerapan adalah pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/membuat-template-blog-hasil-karya.html">Membuat Template Blog Hasil Karya Sendiri</a> di bagian akhir tentang cara membuat tiga kolom sejajar dalam elemen <code>footer</code> yang ditandai dengan selector <code>.supplementary</code>.<a name="more"></a>Langkah awal untuk memulai tutorial ini ini adalah kita harus mengetahui struktur elemen pembentuk posting tersebut, contoh untuk elemen posting template bawaan Blogger™:<pre><code><div class="widget Blog" id="Blog1"> <div class="blog-posts hfeed"> <div class="date-outer"> <div class="date-posts"> <div class="post-outer"> <div class="post hentry"> … dan seterusnya …</code></pre>Seperti kata sebuah ungkapan, <q>Sebaik-baik jalan adalah ditengah-tengah</q>, maka kita akan mengambil elemen <code><div class="post-outer"></code> sebagai pembagi. Syaratnya format tanggal header di non-aktifkan.<img alt="konfigurasi tanggal header" class="aligncenter" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpTvnEdDtFOE7HM99cKR0hc9sisKyd_ckJHPyS5CRg68lAWEh0-84MpVJgvW1NclQWwb5ZTye2k_Barl_g71d4GQqCc_PVq0h1zZZX3qcAY4oV6gKqaydEHIEwyy-U1EdkUp3en626Gg/s400/Mengonfigurasi%252BPosting%252BBlog.jpg" style="margin-bottom:1.6em;" width="400"/>Perhatikan lebar (<code>width</code>) elemen pembentuk widget posting, seperti <code>main-content</code>, <code>main-content .widget</code>, <code>#main</code>, <code>#main .widget</code>, dan sebagainya. Hal ini akan memudahkan kita untuk menentukan lebar elemen posting, apabila menggunakan jenis fixed layout. Contoh:<pre><code>#main .widget { margin-right: 15px; overflow: hidden; width: 600px; word-wrap: break-word; }</code></pre>Catatan: kode di atas menunjukkan bahwa lebar elemen yang ditempati oleh sejumlah posting adalah sebesar 600px. Sebagai tambahan kita juga semestinya mengetahui <code>margin-left</code> elemen sidebar agar memperoleh hasil yang seimbang. Kira ambil contoh <code>margin-left</code> elemen sidebar sebesar 15px dan berada di sebelah kanan <code>#main-content</code>.<img alt="Tata Letak Posting Satu Kolom" class="alignfull" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UKt3XPHpKIId6lXh2SS8tDHyLq376OjHBX7CJPdJOCLJ_G-FttIJOp7csTbIWRk8r0qn9lSbbbin64OKXDazg2EpILy3VdJY6Ifk4qNCXgoB-BGSlEehxp-d8iwGFAWi7V1If1AJ_Lw/s608/Layout%252BPosting.jpg" style="margin-bottom:1.6em;" width="608"/>Dengan kondisi awal kode <abbr title="Cascading Style Sheets">CSS</abbr> pada <code>.post-outer</code> adalah sebagai berikut:<pre><code>.post-outer { margin: 15px; width: 570px;  }</code></pre>Catatan: kode CSS di atas merupakan contoh & bila tidak ada pada pengkodean template Anda, kemungkinan terdapat pada <code>.post</code> atau selector lain. Properti <code>width</code> juga bisa tidak disertakan.Untuk merubah elemen posting blog menjadi dua, kita perlu mengkonfigurasi ulang <code>.post-outer</code>. Dengan rincian seperti yang ditunjukkan pada kode berikut ini.<pre><code>.post-outer { display: inline; float: left; position: relative; margin: 15px; width: 270px;  }</code></pre>Catatan: <code>.post-outer</code> harus diperlakukan tanpa border, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan border & pernak-pernik lain ditambahkan pada <code>.post</code> dan hal inilah yang saya sebut memudahkan kustomisasi pada catatan sebelumnya.<img alt="Tata Letak Posting dua Kolom" class="alignfull" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3IVuFMqQ23WMrjsDJAtPUajm79nWnTkilmfjk0EQYrRGitXTL4BRfPhHc9qWzdDKRyQ58QnIRrCfGlVc7y8Ogr4J_spaOBEw-KFkit1qXGMiS3HUBhitnzfCC1TOOorYpkabv_Y8hG8/s608/Layout-split.jpg" style="margin-bottom:1.6em;" width="608"/>Terakhir tambahkan <code><div class='clear'></div></code> tepat di bawah penutup <code><div class="post-outer"></code> untuk menjaga & mengikat pengkoloman yang telah kita buat.<pre><code><div class="widget Blog" id="Blog1"> <div class="blog-posts hfeed"> <div class="date-outer"> <div class="date-posts"> <div class="post-outer"> <div class="post hentry"> … dan seterusnya … <div> <div> <div class='clear'></div> <div> <div> <div> <div></code></pre>Catatan: untuk pengaturan CSS (Cascading Style Sheets) <code><div class='clear'></div></code> dapat kita temui pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/membuat-template-blog-hasil-karya.html">Membuat Template Blog Hasil Karya Sendiri</a> dengan kode ditandai warna biru.Trik atau toturial yang telah dijelaskan di atas tidak mutlak harus demikian serta tergantung pada struktur pengkodean pada masing-masing template. Dan jika ditelaah, maka kita akan menemukan kode/kata kunci untuk membuat suatu elemen mempunyai letak yang sejajar (dalam baris tertentu), yakni <code>display: inline;</code>, <code>float: left;</code>, <code>position: relative;</code>, dan mungkin <code>width</code>.

4:25 AM

Microdata pada Blogger.com

GIBZET0407 - 8:22 AM

Sebuah hal yang menarik, ketika Blogger™ memasukkan format microdata dalam desain default template, namun belum tentu berlaku jika kita serta merta menggantinya dengan template bukan default BLogger™. Microdata — seperti juga microformat & <abbr title="Resource Description Framework – in – attributes">RDFa</abbr> — bermanfaat untuk menerjemahkan informasi yang disertakan dalam tag <abbr title="Hypertext Markup Language">HTML</abbr> dengan cara yang dapat dipahami oleh mesin penelusur. Kemungkinan besar hal ini juga bermanfaat sebagai salah satu variabel dalam <a href="http://optimasi-blog.blogspot.com/2012/11/memperbaiki-struktur-blog.html">memperbaiki struktur blog</a> yang telah diterbitkan pada posting sebelumnya.<a name="more"></a>Sebagian kecil contoh telah kami berikan dalam penerapan <a href="http://optimasi-blog.blogspot.com/2012/11/membuat-navigasi-breadcrumbs-dengan.html">navigasi breadcrumbs dengan microdata</a>. Sedangkan secara keseluruhan, saya akan mencoba untuk menguraikan pada posting ini. Perlu menjadi catatan bahwa microdata yang dimaksud merujuk kepada schema.org, seperti <code>Blog</code>, <code>BlogPosting</code>, dan <code>Comment</code>. Kemudian hal-hal yang terkait dengan ‘basa-basi publik’ — rating blog yang dibuat oleh pengelola sendiri — tidak disertakan.<h3>Markah (markup) meta deskripsi blog</h3>Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <code><b:include data='blog' name='all-head-content'/></code> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <code><body></code> atau di bawah pengkodean navbar.<pre><code><body expr:class='"loading" + data:blog.mobileClass'> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'> <b:if cond='data:blog.pageName == &quot;&quot;'>  <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> <b:else/>  <b:if cond='data:blog.searchLabel'> &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; <b:else/> &lt;meta content=&quot;Arsip <data:blog.title/> berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; </b:if> </b:if> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>  &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; </div> <b:else/> <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>  <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> </div> </b:if> </b:if> … </body></code></pre>Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.<h3>Markah <code>schema.org/Blog</code></h3>Apabila kita mengambil referensi berdasarkan template standar Blogger™, maka skema microdata <code>Blog</code> akan terlihat seperti di bawah ini.<pre><code><b:if cond='data:blog.pageType == "index"'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'> <meta expr:content='data:blog.title' itemprop='name'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> </div> </b:if></code></pre>Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (markup) meta deskripsi blog”) & sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.<pre><code><div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'> <header id='header-content'> <div class='head-wrap'> <div id='header-group'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/> </b:section> </div> <div id='search'> </div> <nav id='main-menu'> </nav> </div> </header> … <footer id='footer-content'> &amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com </footer> </div></code></pre><h4>Kustomisasi properti skema <code>name</code>, <code>url</code>, dan <code>about</code></h4>Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti <code></code> atau meta. Sedangkan properti skema <code>Blog</code> antara lain berisi <code>name</code>, <code>url</code>, dan <code>about</code> dapat dikonfigurasi melalui elemen header blog.<pre><code> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'> … <b:includable id='title'> <meta expr:content='data:blog.title' itemprop='name'/> <meta expr:content='data:blog.homepageUrl' itemprop='url'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> itemprop='about'><data:description/> </div> </b:includable> … </b:widget> </b:section></code></pre><h3>Markah <code>schema.org/BlogPosting</code></h3>Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.<pre><code><b:includable id='post' var='post'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/> <a expr:name='data:post.id'/> … </b:includable></code></pre>Ketika kita melakukan uji coba terhadap struktur data, terdapat peringatan bahwa properti <code>image_url</code>, <code>blogId</code>, dan <code>postId</code> tidak termasuk dalam skema. Mengapa hal ini terjadi? Setelah kembali melihat beberapa properti yang dapat dimasukkan dalam skema <code>BlogPosting</code> pada schema.org, ternyata tidak satupun properti di atas digolongkan sebagai bagian skema <code>BlogPosting</code>. Oleh karena itu kita dapat menghilangkan atau melakukan konfigurasi ulang terhadap ketiga properti itu. Berikut merupakan konfigurasi untuk properti <code>image_url</code>.<pre><code><b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/> </b:if></code></pre>Catatan: selain properti <code>thumbnailUrl</code>, kita dapat pula menandainya dengan properti <code>image</code>.Sedangkan properti <code>blogId</code> dan <code>postId</code> — setahu saya — dulu berada pada elemen <post-footer>, tepatnya dalam kode <code>post-author</code>. Mungkin alasan pemindahan tersebut nantinya akan terkait dengan skema struktur data <code>Product</code> (<ins>red: hanya opini saya</ins>). Kembali ke pokok utama, untuk sementara properti <code>blogId</code> dan <code>postId</code> dihilangkan dari hirarki skema, namun akan dimasukkan kembali dalam kode <code>post-author</code> dengan konfigurasi sebagai berikut:<pre><code> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <data:post.author/> </a> <b:else/> itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <data:post.author/> </b:if> </b:if> </code></pre>Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada <a href="http://schema.org/Person" rel="nofollow">http://schema.org/Person</a>.<h4>Properti <code>name</code> dan <code>url</code></h4><pre><code><a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if></code></pre>Penambahan markah skema <code>BlogPosting</code> pada tag <code>entry-title</code> bisa terdiri dari beberapa versi. Seorang blogger mungkin tetap pada properti tersebut, sedangkan yang lain menambahnya menjadi <code>itemprop='name headline'</code> atau merubahnya menjadi <code>itemprop='headline'</code>. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat rich snippets. Kemudian kita dapat pula menambahkan properti <code>url</code> yang ditunjukkan oleh markah di bawah ini.<pre><code> <b:if cond='data:post.link'> <meta expr:content='data:post.link' itemprop='url'/> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <meta expr:content='data:post.url' itemprop='url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> … </b:if></code></pre>Catatan: <code>itemprop='url'</code> tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. Nah, masalah ini akan dibahas pada penggunaan elemen <code>post-timestamp</code>.<h4>Properti <code>articleBody</code></h4>Skema <code>BlogPosting</code> dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.<pre><code><b:if cond='data:blog.metaDescription == &quot;&quot;'>  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:else/> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> </b:if></code></pre>Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <code><b:if cond='data:blog.metaDescription == &quot;&quot;'></code> dan diiringi dengan <code>itemprop='description <del>articleBody</del>'</code> merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada editor posting atau tidak mengaktifkan meta deskripsi dalam <a href="http://optimasi-blog.blogspot.com/2012/09/kustomisasi-setelan-pada-preferensi.html">setelan pengaturan pada preferensi penelusuran</a>. Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.<h4>Properti <code>articleSection</code></h4>Para blogger yang biasanya menambah beberapa elemen di bawah posting — elemen posting terkait — dapat memanfaatkan markah <code>articleSection</code>. Tetapi ia bukan <code>articleBody</code>, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.<pre><code><b:if cond='data:blog.metaDescription == &quot;&quot;'>  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:if cond='data:blog.pageType == &quot;item&quot;'> <aside class='related-posts' itemprop='articleSection'> … </aside> <div class='clear;'></div> </b:if> <b:else/> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:if cond='data:blog.pageType == &quot;item&quot;'> <aside class='related-posts' itemprop='articleSection'> … </aside> <div class='clear;'></div> </b:if> </b:if></code></pre><h4>Properti <code>url</code> dan <code>datePublished</code> pada <code>post-timestamp</code></h4>Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (link). Oleh karena itu skema microdata dengan properti <code>url</code> dialihkan ke elemen <code>post-timestamp</code>. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada <code>entry-title</code> (<code>post-title</code>).<pre><code> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.url' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if> </b:if> </code></pre>Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog ini.<h4>Properti <code>discussionUrl</code></h4>Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan <code>itemprop='discussionUrl'</code> akan sama pula.<pre><code> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'> <data:post.commentLabelFull/> </a> </b:if> </b:if> </b:if> </code></pre><h4>Properti <code>keywords</code></h4>Pengkodean dengan markah microdata <code>BlogPosting</code> dengan properti <code>keywords</code> secara sederhana dapat kita letakkan pada elemen <code>post-labels</code>.<pre><code> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </code></pre><h3>Markah <code>schema.org/Comment</code></h3>Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah <code>name</code> dan <code>interactionCount</code> khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).<pre><code><b:includable id='comments' var='post'> <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'> <b:if cond='data:post.numComments != 0'> &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt; </b:if> <a name='comments'/> <h4 itemprop='name'><data:post.commentLabelFull/></h4> … </div> </b:includable></code></pre><pre><code><b:includable id='threaded_comments' var='post'> <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'> <b:if cond='data:post.numComments != 0'> &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt; </b:if> <a name='comments'/> <h4 itemprop='name'><data:post.commentLabelFull/></h4> … </div> </b:includable></code></pre>Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah <code>itemprop='UserComments'</code> dengan tipe <code>schema.org/UserComments</code>. Sedangkan propertinya antara lain: <code>commentText</code>, <code>commentTime</code>, <code>creator</code>, dan <code>replyToUrl</code> serta dapat pula ditambahkan <code>schema.org/Person</code> sebagai bagian di dalam struktur <code>schema.org/comment</code>. Sedangkan penggunaan kode dengan latar berwarna kuning menjelaskan keterkaitan antara markah yang terkandung di dalam masing-masing tipe (<code>itemtype</code>), dimana mereka merupakan satu-kesatuan yang utuh.Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Hal ini terkait pula dengan posting yang saya beri judul “Microdata pada Blogger.com”, sangat dimungkinkan terdapat kekeliruan atau kesalah-tafsiran, sehingga kritik dan saran sangat dibutuhkan untuk memperbaikinya. Seperti biasa Optimasi Blog selalu membuka formulir komentar lebar-lebar & seandainya telah ditutup pun kita masih bisa berbagi melalui <a href="http://optimasi-blog.blogspot.com/p/contact.html">halaman kontak</a>. :)<h3>Alat & Bahan bacaan</h3>Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema microdata.<ul><li><cite><a href="http://www.google.com/webmasters/tools/richsnippets" title="Google Webmaster Tools: Structured Data Testing Tool">Structured Data Testing Tool</a></cite> — Alat Webmaster Google.</li><li><cite><a href="http://schema.org/docs/gs.html" title="schema.org: Getting started with schema.org">Getting started with schema.org</a></cite> — schema.org.</li><li><cite><a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170" title="Webmaster Tools Answer: Rich snippets, 2012">Rich snippets (microdata, microformats, RDFa, and Data Highlighter)</a></cite> — Perkakas Webmaster: Tentang cuplikan kaya & data terstruktur.</li></ul>

8:22 AM

GIBZET0407