Cara Membuat Template Blog Valid XHTML/HTML5

Cara Membuat Template Blog Valid XHTML/HTML5 - Mengurangi Jumlah Error Templates Blogspot. Mungkin banyak yang sudah membahas mengenai cara membuat template blog valid xhtml atau valid html5 dengan mengurangi jumlah error pada template dan widget. Dimana semakin berkurang jumlah error pada template, maka akan mempermudah robot menelusuri blog kita dan tentunya mempengaruhi kualitas SEO suatu blog.

Untuk mengecek validasi template suatu blog bisa menggunakan tools Markup Validation Service dari W3C dengan mengunjungi http://validator.w3.org/ Disitu kita tinggal memasukkan url blog dan dapat mengetahui jumlah error blog kita. Sebelum melakukan validasi, ada baiknya menggunakan blog lain untuk percobaan, jika tidak hapus widget yang dirasa mengakibatkan error atau copy semua isi widget tersebut ke notepad.

Cara Membuat Template Blog Valid XHTML/ HTML5
1. Login ke akun blogger > masuk menu Templates > Edit HTML > beri centang Expand Template Widget
2. Ubah 'deklarasi DOCTYPE, cari kode dibawah :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html 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>[/code] hapus semua kode diatas dan ganti dengan kode berikut :
[code]<!DOCTYPE html> <HTML> <head> <meta charset='utf-8'/>[/code] Ubah  </html> menjadi  </HTML>
3. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:
[code]/* ---------------------- Name: Simple Faster Blogger Templates Date: 1 Maret 2013 Edited by: Blogger Gubug -------------------------*/[/code] Hingga menjadi seperti berikut ini :
[code]/* Blogger Template Style Name: Simple Faster Blogger Templates Date: 1 Maret 2013 Edited by: Blogger Gubug */[/code] 4. Hapus Meta Tag
[code]<b:include data=’blog’ name=’all-head-content’/>[/code] 5.  Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya
[code]<!-- <body><div></div> -->[/code] nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.
6. Menghapus Icon Quickedit atau gambar obeng, cari kode
[code]<b:include name='quickedit'/>[/code] kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.
7. Menghapus Post icon, cari kode berikut :
[code]<span class='post-icons'>     <!-- email post links -->     <b:if cond='data:post.emailPostUrl'>     <span class='item-action'>     <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>     <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>     </a> </span>     </b:if>     <!-- quickedit pencil -->     <b:include data='post' name='postQuickEdit'/>     </span> <div class='post-share-buttons'>     <b:include data='post' name='shareButtons'/>     </div></div>
[/code] Harus di ganti dengan kode berikut :
[code]<span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> </b:if> </span> </div>[/code] 8. Menambahkan jenis type="text/javascript" pada semua kode JavaScript dan type type="text/css" untuk semua css yang ada, baik di templates, posting maupun di widget. Contoh: [code type="JavaScript"]<script src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script> <script src="https://bloggergubug.googlecode.com/files/coba.css"></script>[/code] 9. Menyembunyikan page navigation di halaman utama, cari kode <b:include name='nextprev'/> ganti dengan kode berikut : [code]<b:if cond='data:blog.homepageUrl != data:blog.url'> <!-- navigation --> <b:include name='nextprev'/> </b:if>[/code] 10. Menambahkan atribut Alt pada semua gambar, contoh [code]<img height='75' src='http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg' width='75'/>[/code] Ganti menjadi seperti berikut : [code]<img alt='no image' height='75' src='http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg' width='75'/>[/code] 11. Hapus semua Meta tag yang mengakibatkan Error pada template blog. Gunakanlah meta tag Valid HTML 5 berikut. [code]<b:if cond=’data:blog.pageType == &quot;item&quot;’> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> <b:if cond=’data:blog.url == data:blog.homepageUrl’> <meta content='Kumpulan Informasi Internet' name='description'/> <meta content=’Keyword blog anda’ name=’keywords’/></b:if> <link href=’http://bloganda.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/> <link href=’http://bloganda.blogspot.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/> <link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/> <link href=’http://bloganda.blogspot.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/> <meta content=’kode verifikasi dari google webmaster’ name=’google-site-verification’/> <meta content=’kode verifikasi alexa’ name=’alexaVerifyID’/> <meta content=’kode verifikasi dari bing’ name=’msvalidate.01′/> <meta content=’Nama Anda’ name=’Author’/>[/code] 12. Mengatasi error css bundle templates, hapus code  <b:skin><![CDATA[ ganti dengan kode berikut [code]<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>[/code] 13. Menyembunyikan widget dihalaman utama. [code]<b:if cond='data:blog.homepageUrl != data:blog.url'>     Widget Yang Mau DiSembunyikan     </b:if>[/code] 14. Letakan Script dibawah dibawah tepat dibawah <head> [code]<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->[/code] 15. Pada saat posting gambar hapus atribut Anchor='1' dan Border='0' ganti tambahkan atribut alt dan title. contoh berikut adalah format gambar standart blogspot [code]<div class="separator" style="clear: both; text-align: center;">     <a href="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" /></a></div>[/code]  ubah menjadi :   <div class="separator" style="clear: both; text-align: center;"> [code]    <a href="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Gubug" title="Blogger Gubug" src="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" /></a></div>[/code] 16. Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html. [code type="css"]<div style="text-align: center;">Isi Widget</div>[/code] Kira nya itu dulu Cara Membuat Template Blog Valid XHTML/HTML5, saya juga pun masih belajar untuk masalah validasi xhtml. Mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar

Cara Membuat Template Blog Valid XHTML/HTML5

Label:
Reaksi:

Posting Komentar

Makasih. Punya aku sudah valid.

iya sama2 ...
maksih susah berkunjung ...
:54

Bagus artikelnya.. padat dan berisi, semoga selau sehat, rejekinya tambah banyak dan sehat selalu.. salam sukses buat teman-teman semua..amiin
sewa kantor full furnished jakarta

[blogger][facebook][disqus]

Bandi Shippuden

{facebook#https://facebook.com/mr.bandishippuden} {twitter#https://twitter.com/@bandishippuden} {google-plus#https://plus.google.com/u/0/+BandiShippuden} {pinterest#https://id.pinterest.com/bandishippuden/} {youtube#https://www.youtube.com/channel/UCz2pE2KCvbhk8oT4fImFR1A} {instagram#https://www.instagram.com/bandi_shippuden/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget