Bagaimana cara membuat template blogger lebih valid XTHML? ikuti step demi step berikut!
- Login ke akun blogger sobat
- Masuk Rancangan/Layout
- Pilih Edit HTML
- Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
- Beri tanda centang "Expand Template Widget"
- Setalah itu kita mulai step by step dan cari kode dibawah ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Kemudian, gantilah kode diatas dengan kode berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Cari kode semacam ini:
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */ - Hapuslah semua kode/tanda strip (--) hanya stipnya saja yang dihapus.
Dan cek juga pada kode css yang lainya, biasanya terdapat banyak tanda seperti pada contoh diatas.
Hasilnya kan menjadi seperti ini:
Hapuslah semua kode/tanda strip (--) hanya stipnya saja yang dihapus.
Dan cek juga pada kode css yang lainya, biasanya terdapat banyak tanda seperti pada contoh diatas.
Hasilnya kan menjadi seperti ini:<b:skin><![CDATA[/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/ - Cari kode dibawah ini:
<b:include name='quickedit'/>
Hapus saja semua kode diatas yang ada dalam template kamu,dan ingat! kode diatas akan muncul jika kamu menambah gadget pada blog kamu,jadi selalulah menghapusnya ketika sesudah kamu menambah gadget. - Cari kode dibawah ini:
<b:include data='blog' name='all-head-content'/>
Dan hapus saja juga! tapi buat kamu yang memberi foto profile pada komentar blog maka berisiko foto-foto profile komentar tidak muncul,tapi terserah ke kamu,kalau ingin valid maka sikat aja. - Langkah selanjutnya silahkan kamu cari kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head>
<!-- <body>
<div></div> --> - Jika Sobat meng-upload sebuah gambar, berilah tambahan alt pada gambar tersebut. contoh kode alt seperti ini:
<a href="http://validator.w3.org/"><img alt="Markup Validation Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyHu9gzdapCtujRrZ9tqa-rGN49TqXEkcIR7uL-pkHQBO49n5LDDM8cmR2ZfTVMCcKucJ9QoVXi-SpAhBlI9jM8tvcU2FjMh4QLRunOfxjZNjuFPnPJ7b4tJTjvQnOzdmF_p75v3XXcrg/s320/valid-html.gif" /></a>
- Jika sobat menemukan penulisan meta content dengan huruf besar, rubahlah menjadi huruf kecil,contoh:
<META content='blogger' name='generator'/>
ubah menjadi:<meta content='blogger' name='generator'/> - Menghapus Post icon,adapun kode post icon atau pensil kodenya mirip kode seperti ini:
<span class='post-icons'>
Ganti kode diatas dengan kode berikut:
<!-- 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://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span><span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span> - Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:
<script src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script>
Tambahkan kode berwarna merah seperti dbawah ini:
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script> - Menyembunyikan page navigation di halaman utama
cari kode:<b:include name='nextprev'/>
ganti kode diatas dengan kode dibawah ini!
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if> - Memperbaiki attribut title dan alt pada link gambar.sebagai contoh:
<a href="http://infonetmu.blogspot.com" alt="free backlink generator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uBD9smm7ja7Xo06kpBHX7eZQww5roRLzvM0EhnCYp3dnjF-tJh095tCdUKPz_ywbxSiieZhbnx0WYyjFmvCiAHfW5sJSWYothhY0A9_sAgHsKJAUaelf70Xu81BK5vfA5WY0_M25l46v/s1600/aang-vs-naruto+%281%29.jpg" title="Free backlinks generator" border="0" /></a>
Rubah menjadi:
<a href="http://infonetmu.blogspot.com" title="free backlink generator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1uBD9smm7ja7Xo06kpBHX7eZQww5roRLzvM0EhnCYp3dnjF-tJh095tCdUKPz_ywbxSiieZhbnx0WYyjFmvCiAHfW5sJSWYothhY0A9_sAgHsKJAUaelf70Xu81BK5vfA5WY0_M25l46v/s1600/aang-vs-naruto+%281%29.jpg" alt="Free backlinks generator" border="0" /></a>
Untuk kasus diatas jangan lupa untuk link atributnya title dan target, untuk gambar alt dan border jagan sampe terbalik-balik.
Nah mungkin cara diatas cukup untuk membuat template blog lebih valid XHTML, sebenarnya masih banyak, dan masih bisa dikompres lagi, itu tergantung widget/kode script yang ada di blogger sobat. Untuk hasil silahkan cek sebelum dan sesudah kamu edit menjadi valid XHTML, silahkan cek disini http://validator.w3.org