Cara Membuat Template Blog Valid XHTML

516 views
membuat templates blog valid html5

Cara Membuat Template Blog Valid XHTMLMengurangi 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/ Valid HTML5

1. Login ke akun blogger > masuk menu Templates > Edit HTML > beri centang Expand Template Widget
2. Ubah ‘deklarasi DOCTYPE, cari kode dibawah

<!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>

hapus semua kode diatas dan ganti dengan kode berikut

<!DOCTYPE html>
<HTML>
<head>
<meta charset=’utf-8’/>

setelah itu ubah kode </html> menjadi </HTML>

3. Menghapus comment declaration yang ada pada CSS, cari kode dash ( —– ) dan hapus semuanya. contoh:

/* ———————-
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug
————————-*/

hasilnya menjadi

/* Blogger Template Style
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug */

4. Hapus meta tag <b:include data=’blog’ name=’all-head-content’/>

5.  Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya

<!– <body><div></div> –>

nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.

6. Menghapus Icon Quickedit atau gambar obeng, cari kode <b:include name=’quickedit’/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.

7. Menghapus Post icon, cari kode berikut

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

hapus dan ganti dengan kode berikut

<span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
</b:if>
</span>
</div>

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:

<script src=”https://bloggergubug.googlecode.com/files/sumbercopas.js”></script>
<script src=”https://bloggergubug.googlecode.com/files/coba.css”></script>

ubahlah menjadi

<script type=”text/javascript” src=”https://bloggergubug.googlecode.com/files/sumbercopas.js”></script>
<script type=”text/css” src=”https://bloggergubug.googlecode.com/files/coba.css”></script>

9. Menyembunyikan page navigation di halaman utama, cari kode <b:include name=’nextprev’/> ganti dengan kode berikut

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<!– navigation –>
<b:include name=’nextprev’/>
</b:if>

10. Menambahkan atribut Alt pada semua gambar, contoh

<img height=’75’ src=’http://1.bp.blogspot.com/–IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg’ width=’75’/>

ganti menjadi seperti berikut

<img alt=’no image’ height=’75’ src=’http://1.bp.blogspot.com/–IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg’ width=’75’/>

11. Hapus semua Meta tag yang mengakibatkan Error pada template blog. Gunakanlah meta tag Valid HTML 5 berikut

<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’/>

12. Mengatasi error css bundle templates, hapus code  <b:skin><![CDATA[ ganti dengan kode berikut

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

13. Menyembunyikan widget dihalaman utama.

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
Widget Yang Mau DiSembunyikan
</b:if>

14.  Taruh Script dibawah dibawah tepat dibawah <head>

<!–[if IE]><script type=’text/javascript’ src=’http://html5shiv.googlecode.com/svn/trunk/html5.js’></script><![endif]–>

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

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

 ubah menjadi

<div class=”separator” style=”clear: both; text-align: center;”>
<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>

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.

<div style=”text-align: center;”>Isi Widget</div>

Kira nya itu dulu Membuat Template Blog Lebih Valid XHTML, saya juga pun masih belajar untuk masalah validasi xhtml. Mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar 🙂

Hosting Unlimited Indonesia