Cara Membuat Halaman Posting Valid HTML5

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 == &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>

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='&quot;item-control &quot; + 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...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini