Membuat Halaman Posting Valid HTML5

Pada artikel sebelumnya saya sudah menjelaskan bagaimana cara membuat blog valid HTML5. Dengan tutorial tersebut blog sobat sudah bisa 100% valid HTML5, namun masih terbatas pada halaman muka (homepage). Sejauh yang saya ketahui, beberapa pembuat template yang tersebar dengan embel-embel valid html5 pun kebanyakan hanya sebatas homepage saja.

Masih banyak hal yang harus dilakukan, agar blog valid di halaman posting. Dibawah ini, hal-hal yang perlu diperhatikan agar halaman posting valid HTML5.

Breadcrumb

Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markup rdfa, untuk membuatnya valid html5 sobat harus menggunakan markup microdata. Silahkan kunjungi : Breadcrumbs SEO Friendly dan valid HTML5

Gambar / Image

Apabila anda mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjBFjqZ6YRAy29sgKOX1uGoH0ucINTEfa06yVXhde8VKdAqD_Oi0PuP-7W6CBjGy4uLvkdb1KYygfNzJb2xJdzIA9NvlsCjnrXn0d3e_iAiOGj_juQ9S4ZZxwGQd0Dw8AGUst6Kbb1opH/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjBFjqZ6YRAy29sgKOX1uGoH0ucINTEfa06yVXhde8VKdAqD_Oi0PuP-7W6CBjGy4uLvkdb1KYygfNzJb2xJdzIA9NvlsCjnrXn0d3e_iAiOGj_juQ9S4ZZxwGQd0Dw8AGUst6Kbb1opH/s320/abstract2.jpg" width="320" /></a></div>

hapus imageanchor="1", dan ganti border="0" dengan alt="keterangan gambar".
Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan border="0". Hal yang wajib ditambahkan adalah alt="keterangan gambar" lebih bagus lagi menggunakan tag title. Sebagai contoh menampilkan gambar yang baik:

<img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/>

Tombol Like / Share

Gunakan tombol Like Facebook / Twitter / Google Plus yang valid HTML5. (baca tutorial : Membuat Tombol Twitter, Google +1, dan Like Facebook Valid HTML5)

Ada beberapa script pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti Tutorial Blogger, dengan kondisi seperti itu, membuat white space yang seharusnya Tutorial%20Blogger. Bagi sobat yang menggunakan script ini, saya sarankan untuk membuat label hanya dengan 1 kata saja. Apabila sudah banyak label dengan 2 kata atau lebih, silahkan gunakan Related Posts Valid HTML5.

Widget

Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus <b:include name='quickedit'/> setelah menambah widget baru.
Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSS, HTML dan JavaScript di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.
Sebagai gambaran seperti ini :

<style type="text/css">
.home-link{display:none} #blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){ var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt });
</script>

Kode <style type="text/css"> inilah yang menyababkan error, untuk solusinya tambahkan scoped atau scoped='' atau scoped='scoped'. Inilah yang dinamakan Boolean Attribute. Maka kode yang benar menjadi :

<style type="text/css" scoped>

Komentar

Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada 2 alternatif yang saya tawarkan :

Gunakan Komentar Google Plus; atau
Gunakan Threaded Comments Hack

Apabila sobat menggunakan Thread Comments Hack Valid HTML5, ada beberapa langkah yang harus sobat lakukan dalam validasi html5 ini.

1. Cari semua kode yang seperti di bawah ini (ada beberapa kode)

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' scrolling='no' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

hapus kode-kode berikut ini :
- allowtransparency='true'
- frameborder='0'
- src=''
- scrolling='no'
- width='100%'
- style='display: none'

2. Cari kode seperti ini :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

ganti dengan :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>

Semoga bermanfaat...