Cek Validasi HTML5 Blog Anda CONTOH BLOG YANG TELAH DIVALIDASI
Kebanyakan para master blogger yang melakukan validasi HTML5 pada blognya karena mengikuti perkembangan zaman. Selain itu, menurut mereka banyak keuntungan-keuntungan yang dapat meningkatkan kualitas SEO sebuah blog dengan menerapkan valid HTML5. Jadi sangat disarankan agar Anda melakukan validasi HTML5 pada blog Anda.
Apa itu HTML5? HTML5 adalah terobosan atau revisi ke-lima dari perkembangan HTML, yang bertujuan agar sebuah blog atau website mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan. Oke, mungkin prolognya kebanyakan, langsung aja berikut tutorialnya.
Cara Membuat Blog Menjadi Valid HTML5
Langkah 1 : Backup template Anda terlebih dahulu sebelum melakukan editing.Langkah 2 : Cari kode yang mirip dengan kode berikut ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>Kalo sudah ketemu, ganti semua kode di atas dengan kode berikut ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>Langkah 3 : Ganti kode </html> dengan </HTML> (kode ini terletak di paling bawah template)
Langkah 4 : Cari kode berikut ini.
<b:include data='blog' name='all-head-content'/>Kemudian, ganti kode tersebut dengan kode di bawah ini.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode di bawah ini.
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>Langkah 6 : Hapus semua kode ikon tang dan obeng, berikut kodenya.
<b:include name='quickedit'/>Jangan lupa untuk menghapus kode ini setiap menambah widget baru.
Langkah 7 : Hapus semua kode ini (jika ada)
<a expr:name='data:post.id'/>Langkah 8 : hapus kode seperti ini.
<b:include data='post' name='postQuickEdit'/>atau kode berikut ini.
<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>Langkah 9 : Hapus kode dibawah ini (jika ada, jika tidak ada ya lewatkan saja sob)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>Langkah 10 : Tambahkan amp; dibelakang semua kode & atau lebih gampangnya ganti kode & dengan &
Langkah 11 : Hapus kode ini (jika ada)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>Langkah 12 : Cari semua kode yang seperti di bawah ini (jika ada)
<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%'/>kemudian, hapus kode-kode ini pada kode tersebut.
- allowtransparency='true'
- frameborder='0'
- src=''
- scrolling='no'
- width='100%'
- style='display: none'
Langkah 13 : Cari kode seperti ini (jika ada ya sob)
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>ganti dengan kode berikut 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>Silahkan cek kembali validasi blog Anda, jika masih Ada error silahkan lakukan langkah-langkah berikut.
Perlu Diperhatikan
Mungkin setelah Anda melakukan langkah-langkah di atas, blog Anda belum sepenuhnya valid HTML5. Maka agar blog Anda benar-benar 100% valid HTML, silahkan perhatikan beberapa hal di bawah ini:1. Selalu tambahkan title tag dan alt pada gambar, contoh :
<img alt="Cara Menampilkan atau Embed Video Youtube Responsive di Blog" src="URL-GAMBAR" title="Cara Menampilkan atau Embed Video Youtube Responsive di Blog" width="640" />2. Selalu tambahkan title pada link, contoh :
<a href="http://www.wahyupratama.com" title="Blog Wahyu Pratama">3. Setiap Anda menambahkan gambar pada postingan, jangan lupa klik mode HTML, hapus kode imageanchor="1" dan ganti kode border="1" dengan style="border:none;"
3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode berikut ini.
style="border:none;overflow:hidden"4. Pada tag a jangan menggunakan tag name seperti berikut ini.
<a name='comment-form'>sebagai gantinya gunakan id seperti kode di bawah ini.
<a href='#comment-form'>5. Jangan menggunakan 2 (dua) id sekaligus pada tag a.
6. Sekali lagi, jangan lupa untuk menghapus kode <b:includename='quickedit'/> setiap menambah widget baru.
Sekian tutorial mengenai cara membuat blog menjadi valid HTML5. Semoga setelah menerapkan langkah-langkah di atas blog Anda langsung valid HTML5. Untuk kekurangannya, Insya Allah menyusul. Semoga bermanfaat.
Sumber script : http://www.wahyupratama.com/2016/01/cara-membuat-blogger-menjadi-valid-html5.html