Tutorial Membuat Halaman Posting Valid HTML5 –
Pada kesempatan kali ini saya akan sharing sebuah trik atau cara agar halaman posting menjadi valid html5, silahkan Anda baca tutorial cara membuat halaman posting valid html5 pada blog dibawah ini :
Silahkan Masuk Menu ” Template “–> Edit HTML
1. Gambar atau Image
Saya sarankan agar memberikan sebuah title tag dan alt tag pada setiap gambar, bagaimana cara memberikan tag title dan tag alt pada gambar ?
Contoh :
<img alt='..?...' src='URL_Gambar' title='Judul Gambar'/>
Untuk lebih lengkap dan jelasnya silahkan baca disini, titik-titik silakan isi dengan judul gambar
2. URL atau Link
Langkah ini Sama seperti gambar atau image, link juga harus diberikan sebuah tag title namun tidak perlu diberikan tag alt karena setiap link hanya membutuhkan tag title. Setiap Anda menambahkan link atau url pada postingan Anda usahakan memberikan sebuah link, lalu bagaimana cara memberikan tag title pada setiap url atau link ?
Contoh :
<a href='URL_Link' title='Judul Link'>Judul Link</a>
3. Breadcrumbs
Mungkin inilah salah satu yang menjadikan halaman posting Anda tidak valid html5, jadi Anda harus mengganti atau mengedit breadcrumbs tersebut menjadi valid html5.
4. Artikel Terkait atau Related Post
Disinilah kebanyakan yang mengalami error pada halaman posting sehingga menjadi tidak valid html5. Untuk menjadikan related post atau artikel terkait ini menjadi valid html5 silahkan Anda ganti related post pada blog Anda dengan related post atau artikel terkait yang sudah valid html5, saya sarankan Anda membaca artikel ini mengenai Artikel Terkait (Related Post) Valid HTML5. Jika Anda tidak suka dengan tampilan related post atau artikel terkait seperti itu ya silahkan mencari tampilan yang lain, namun saya sarankan menggunakan yang sudah saya siapkan tersebut.
5. Tombol Like dan Share Social Media
Mungkin pada setiap Blogger ada yang menggunakan tombol social media untuk membagikan sebuah artikel tersebut ke berbagai social media seperti Facebook, Twitter, dan Google+. Tombol social media pada blog ada yang sudah valid html5 dan ada juga yang masih belum valid html5 jadi saya membagikan tutorial untuk membuat tombol social media tersebut menjadi valid html5, untuk lebih lengkapnya silahkan baca disini mengenai Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5.
6. Komentar
Pada bagian ini memang hanya beberapa blog atau template blog yang sudah menggunakan komentar blognya menjadi valid html5, namun untuk membuat komentar blog tersebut menjadi valid html5 Anda harus benar-benar mengganti tampilan komentar Anda, dan Anda bisa membaca artikelnya disini mengenai Membuat Komentar Blog Valid HTML5.
Cari kode seperti ini :
<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%'/>
Lalu hapus kode-kode dibawah ini :
– allowtransparency=’true’
– frameborder=’0′
– src=”
– scrolling=’no’
– width=’100%’
– style=’display: none’
Lalu cari kode seperti ini :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
dan ganti menjadi seperti ini :
<b:if cond='data:blog.pageType == "static_page"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src'/> </b:if>
7. Widget
Ini sudah saya jelaskan pada artikel Membuat Blog Valid HTML5, setiap menambahkan widget Anda harus menghapus beberapa kode yang disebabkan oleh penambahan widget, namun saya akan menambahkan beberapa penjelasan lagi mengenai widget ini yang bisa menyebabkan error.
Hapus kode seperti dibawah ini :
<b:include name='quickedit'/>
dan
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if> </b:includable>
Selain itu ada beberapa kode lagi yang biasanya menyebabkan error ketika akan memvalidasi blog Anda, banyak sekali tutorial yang menyatukan kode CSS, HTML dan JavaScript untuk menyimpannya pada sebuah widget baru, dan hal inilah yang bisa menyebabkan error pada halaman posting Anda atau bahkan hompage blog Anda. Contohnya seperti pada kode Recent Post menggunakan gambar, Blog Pager menjadi judul dan lain sebagainya.
Contoh :
<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>
Terlihat diatas ada sebuah kode CSS dan JavaScript yang menyatu dalam sebuah widget dan kode <style type=”text/css”> yang menyebabkan error saat validasi html5. Untuk memperbaikinya silahkan tambahkan kode seperti ini scoped atau scoped=” atau scoped=’scoped’ dan hasilnya seperti ini :
<style type="text/css" scoped>
8. Menghapus Kode Trbidi, Imageacnhor, dan Border
Setelah Anda melakukan validasi halaman posting dari langkah 1-7 ternyata masih saja menyebabkan error, ada beberapa hal yang perlu Anda perhatikan ketika menulis artikel yaitu dengan mengedit dibagian HTML dan menulis artikel dibagian Compose. Lihat gambar dibawah ini :
Langkahnya seperti ini :
1. Tulis artikel hingga selesai
2. Jangan Pulikasikan dulu, tapi jika sudah di Publikasikan juga tidak masalah
3. Masuk ke bagian HTML
4. Cari kode seperti ini :
trbidi=”on” => Hapus
imageanchor=”1″ => Ganti menjadi title=”Judul Link”
border=”0″ => Hapus
5. Jika sudah klik Publikasikan
6. Jangan kembali ke bagian Compose, kalau kembali maka kode trbidi=”on” akan muncul lagi, jadi setiap mempublikasikan artikel harus ada dibagian HTML. Namun ketika akan menulis artikel baru silahkan masuk ke bagian Compose.