Untuk membuat valid template blog atau memvalidasi blog supaya
struktur template blog valid HTML5 memang agak susah, karena tidak semua
struktur template sama, pasti berbeda-beda, namun saya akan memberikan
tips mungkin bisa membantu mengenai cara membuat template blogspot /
blogger valid HTML5. Saya juga pernah share cara memperbaiki validasi xhtml template blospot, namun hasilnya masih kurang optimal.
Nah pada kali ini InsyaAllah dalam hal memvalidkan template blog akan berhasil seperti yang sudah saya terapkan langsung pada Blog Rudy Hartono yang semula Error dan Warning berjumlah ratusan dan Alhamdulillah setelah di oprek-oprek hasilnya cukup lumayan walaupun masih ada 2 Error, 1 Warning. Silahkan cek di http://validator.w3.org. Untuk kebenarannya pada kode yang akan saya share dibawah ini, ntah itu benar atau tidak mengenai membuat valid HTML5 pada template Blogger, yang jelas saya hanya mendapat tutorialnya dari w3schools.com/html5/
Nah pada kali ini InsyaAllah dalam hal memvalidkan template blog akan berhasil seperti yang sudah saya terapkan langsung pada Blog Rudy Hartono yang semula Error dan Warning berjumlah ratusan dan Alhamdulillah setelah di oprek-oprek hasilnya cukup lumayan walaupun masih ada 2 Error, 1 Warning. Silahkan cek di http://validator.w3.org. Untuk kebenarannya pada kode yang akan saya share dibawah ini, ntah itu benar atau tidak mengenai membuat valid HTML5 pada template Blogger, yang jelas saya hanya mendapat tutorialnya dari w3schools.com/html5/
Cara Merubah Template Blogspot Valid HTML5
1. Untuk penulisan DOCTYPE pada template default Blogger biasanya seperti dibawah ini :
<!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'>
2. Hapus semua kode diatas dan ganti dengan kode di bawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head><meta charset='utf-8'/>
3. Dan untuk penutupnya pada template paling bawah sendiri juga ubah Tag </html> menjadi </HTML>
4. Hapus kode kode <b:include name='quickedit'/>
5. Hapus kode kode <b:include data='blog' name='all-head-content'/>
6. Hilangkan Navbar dengan meletakkan kode <!-- <body><div></div> --> diatas kode <body>
7. Hilangkan tanda "----------" misalnya :
/*--------- header ---------*/ hapus tanda "--------" sehingga menjadi /*header*/
8. Hapus kode navigasi <b:include name='nextprev'/> ganti menjadi :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
9. Untuk javascript tambahkan type='text/javascript' pada tag <script> dan untuk CSS tambahkan type='text/css' pada tag <style> sehingga penerapannya menjadi :
<script type='text/javascript'> dan <style type='text/css'>
10. Didalam postingan apabila menyisipkan gambar, maka tambahkan tag "alt" dan kodenya seperti ini
<a href="http://url anda" title="titel gambar"><img alt="kode gambar" src="http://gambar.jpg" /></a>
Apabila masih error, coba hapus tanda "/" sehingga menjadi seperti ini :
<a href="http://url anda" title="titel gambar"><img alt="kode gambar" src="http://gambar.jpg"></a>
11. Cek juga pada widget-widget yang anda pasang di sidebar, apakah sudah valid apa belum, seperti Follower, Recent Post dan widget lainnya (jika tidak perlu hapus aja).
12. Pada kode javascript "onClick" (jika ada), silahkan ganti dengan "onclick"
13. Simpan template anda
14. Coba anda menuju ke http://validator.w3.org/ dan sekarang lihat hasilnya
Nah dengan menerapkan tutorial tersebut diatas, Insyaallah template blog menjadi valid HTML5, semoga bermanfaat, selamat memvalidkan template blog anda.
Valid HTML 5 i2 mksdx ap gan?
BalasHapusap mnfaatnya?