Cara Membuat Halaman Posting Valid HTML5 - Pada malam hari ini blog
Ficri Pebriyana akan membagikan lagi sebuah artikel mengenai html5 yaitu
Cara Membuat Halaman Posting Valid HTML5. Sebelumnya saya pernah menulis artikel mengenai
Cara Membuat Blog Valid HTML5, mungkin menjadikan blog
valid html5 hanya bagian hompagenya saja saya rasa tidak cukup kita perlu juga untuk menjadikan
semua halaman menjadi valid html5 atau
valid html5 all pages. Dengan membuat halaman posting menjadi valid html5 tentu saja akan memberikan dampak positif seperti yang sudah saya jelaskan pada artikel-artikel sebelumnya mengenai html5 ini, bahwa dengan memiliki blog valid html5 maka akan disukai oleh
Search Engine dan memudahkan robots untuk mengcrawl setiap artikel yang ada pada blog Anda.
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'
-
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.
Mungkin hanya itu saja yang bisa saya sampaikan kepada Anda mengenai
Cara Membuat Halaman Posting Valid HTML5. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
