Template Blog Agar Valid XHTML

Kalau sobat baru saja membuat blog, mengganti template blog, memasang meta tag dan sudah mengisi artikel di blog, maka ada baiknya sobat Membuat Template Blog Lebih Valid XHTML. Penting sekali untuk membuat blog lebih valid xhtml, karena mempermudah robot untuk menelusuri halaman blog kita dan tentunya sangat mempengaruhi SEO.
Pertama kali saya mengenal masalah Validasi XHTML dari Blogger Abstrak dan sobat yang lain yang tentunya dah lupa sih namanya.
Back to topic
Untuk mengecek jumlah error di blog, bisa menggunakan tools Validator HTML Service di http://validator.w3.org/

Langkah Awal Membuat Template Blog Lebih Valid XHTML
Sebelum melakukan validasi sebaiknya gunakan blog untuk percobaan dan juga template baru, hapus widget follower dan archive blog atau ubah saja archive blog menjadi flat list. Nah setelah itu baru menuju ke edit template, Login ke akun blogger > Rancangan > Edit HTML

Cara Membuat Template Blog Valid XHTML
1. Merubah 'deklarasi DOCTYPE Strict' menjadi 'Transisi XHTML delcaration DOCTYPE" dan menambahkan meta tag default blogger.
Cari kode dibawah.

<?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 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> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title>

hapus semua kode diatas dan ganti dengan kode berikut :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang='en' xml:lang='en' 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> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.url' rel='canonical'/> <link href='/atom.xml' rel='alternate' title='Judul Blog Kamu - Atom' type='application/atom+xml'/> <link href='/rss.xml' rel='alternate' title='Judul Blog Kamu - RSS' type='application/rss+xml'/>

2. Menghapus comment declaration yang ada pada CSS
Cari kode dash ( ----- ) dan hapus semuanya.
contoh:
/* -----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
hasilnya menjadi
/* Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team */

3. Menghapus Navigasi Bar bawaan blogger
cari kode

</head>

dan tambahkan kode berikut tepat dibawahnya

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

4. Menghapus Icon Quickedit atau gambar obeng cari kode

<b:include name='quickedit'/>

kalo sudah ketemu hapus semua tanpa terkecuali, jangan lupa kalo besoknya menambahkan widget baru hapus lagi kode tersebut.

5. Menghapus Post icon cari kode berikut :

<span class='post-icons'>  <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>  <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'>  <b:if cond='data:post.emailPostUrl'> </b:if> </span> </div>

6. Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:

<script src="http://bloggerpapuahackers.googlecode.com/files/menutabview.js"></script>
Ubahlah Menjadi:
<script type="text/javascript" src="http:// bloggerpapuahackers.googlecode.com/files/ menutabview.js"></script>

7. Menyembunyikan page navigation di halaman utama, cari kode :

<b:include name='nextprev'/>
hapus dan ganti seperti kode berikut
<b:if cond='data:blog.homepageUrl != data:blog.url'>  <b:include name='nextprev'/> </b:if>

8. Menambahkan atribut Alt pada semua gambar termasuk saat posting artikel contoh :

<img href="http://1.bp.blogspot.com/-n2OIL8Xv3ZI/TlvP2WEe4mI/AAAAAAAAAAU/gskf9ZSuiAc/s1600/dofollowlogo.jpg">
ganti menjadi seperti berikut
<img alt="dofollow logo" href="http://1.bp.blogspot.com/-n2OIL8Xv3ZI/TlvP2WEe4mI/AAAAAAAAAAU/gskf9ZSuiAc/s1600/dofollowlogo.jpg">

9. Memperbaiki atribut title dan alt pada link bergambar, sebagai contoh :

<a href="http://www.getfreebl.com" alt="free backlink generator powered by http://www.getfreebl.com" target="_blank"><img src="http://www.getfreebl.com/services/backlink/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C133214B6D89C17132344F7139C830162C23D81597BA7B4BBFE8" title="Free backlinks for your site powered by http://www.getfreebl.com" border="0" /></a>
rubah posisi atribut title dan alt
<a href="http://www.getfreebl.com" title="free backlink generator powered by http://www.getfreebl.com" target="_blank"><img src="http://www.getfreebl.com/services/backlink/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C133214B6D89C17132344F7139C830162C23D81597BA7B4BBFE8" alt="Free backlinks for your site powered by http://www.getfreebl.com" border="0" /></a>

Untuk kasus diatas jangan lupa untuk link atributnya title dan target, untuk gambar alt dan border jagan sampe terbalik-balik.

10. Menyembunyikan widget dihalaman utama kalo widget itu dianggap penting dan tidak bisa di validasi sebaiknya sembunyikan dari halaman utama dengan cara menambahkan kode berikut :

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

Demikian, saya pun masih belajar untuk masalah validasi xhtml ini, mungkin jika ada yang dapat menambahkan bisa tulis di kotak komentar.
Ok selamat mencoba Membuat Template Blog Lebih Valid XHTML,
Semoga bermanfaat

Ingin punya Website, Toko Online, Blog Profesional harga mulai dari Rp. 60.000?

      1. Jasa Pembuatan Website/Homepage
      2. Jasa Pembuatan Toko Online
      3. Jasa Pembuatan Blog Profesional

Informasi selengkapnya silahkan kunjungi Jasa Pembuatan Website.

5 komentar:

samaddadrana31 Oktober 2012 pukul 05.46
thx untuk infonya gan!
BalasHapus
Balasan
Anonim6 Maret 2013 pukul 11.16
sungguh lucu ini blog kasi tutor tentang Template Blog Agar Valid XHTML tapi apa hasilnya setelah saya cek anda punya eng..ing...eng....

alamat url : http://ponorogoweb.blogspot.com
hasil tes : 728 Errors, 296 warning(s)

sory gan jd curiga ne tutor asli pa palsu....????????
BalasHapus
Balasan

Tambahkan komentar

Blogger Ponorogo

Template Blog Agar Valid XHTML

5 komentar:

About

Terbaru

Popular

Comments'