Mungkin setiap para Blogger ingin sekali memiliki blog yang valid html5, dan apakah Anda sudah memiliki blog valid html5 ? Ya, saya sudah memiliki blog yang valid html5. Apakah halaman posting blog Anda sudah valid html5 ? Nah, inilah yang belum mereka optimasi, kadang para pembuat Template Blog hanya menjadikan hompagenya saja valid html5 tetapi untuk halaman postingannya belum valid html5. Pada kesempatan kali ini saya akan memberikan sebuah tips atau cara agar halaman posting menjadi valid html5, silahkan Anda baca tutorial cara membuat halaman posting valid html5 pada blog dibawah ini :
1. Gambar atau Image
Jika Anda akan menulis atau membuat artikel baru pada blog Anda, saya sarankan agar memberikan sebuah title tag dan alt tag pada gambar tersebut, bagaimana cara memberikan tag title dan tag alt pada gambar ?Contoh :
<img alt='Judul Gambar' src='URL_Gambar' title='Judul Gambar'/>Untuk lebih lengkap dan jelasnya silahkan baca disini Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar.
2. URL atau Link
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>
Untuk lebih lengkap dan lebih jelasnya Anda bisa membaca artikel mengenai Cara Membuat Attribute Title Tag Pada Setiap Link.
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. Untuk menjadikan breadcrumbs blog Anda valid html5 silahkan baca disini mengenai Breadcrumbs SEO Friendly 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'Lalu cari kode seperti ini :
- frameborder='0'
- src=''
- scrolling='no'
- width='100%'
- style='display: none'
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
dan ganti menjadi seperti ini :
<b:if cond='data:blog.pageType == "static_page"'>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.
<a expr:href='"https://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='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src'/>
</b:if>
Hapus kode seperti dibawah ini :
<b:include name='quickedit'/>
dan
<b:includable id='postQuickEdit' var='post'>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 :
<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='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<style type="text/css">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 :
.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>
<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 :
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.
Mungkin hanya itu saja yang bisa saya sampaikan kepada Anda mengenai Cara Membuat Halaman Posting Valid HTML5. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
Tidak ada komentar:
Posting Komentar