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 artikel yang juga tidak kalah pentingnya yaitu Cara membuat like box valid XHTML
Nah pada kesempatan kali ini InsyaAllah dalam hal memvalidkan template blog akan berhasil seperti yang sudah saya terapkan langsung pada Blogger Content 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 kesempatan kali ini InsyaAllah dalam hal memvalidkan template blog akan berhasil seperti yang sudah saya terapkan langsung pada Blogger Content 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/.
Klik gambar untuk memperbesar
Okey langsung aja ke cara membuat template valid Html5
- Untuk penulisan DOCTYPE pada template default Blogger biasanya seperti dibawah ini :
- Hapus semua kode diatas dan ganti dengan kode di bawah ini :
- Cari lagi code </html> hapus dan ganti dengan kode dibawah ini
- Cari lagi kode di bawah ini kemudian hapus semua
- Cari lagi kode di bawah ini kemudian hapus juga
- Letakkan code di bawah ini tepat di atas code <body>
<!-- <body><div></div> -->
- Hilangkan tanda "----------" misalnya:
/*--------- header ---------*/ hapus tanda "--------" sehingga hasilnya menjadi /*header*/
- Cari lagi code berikut <b:include name='nextprev'/> hapus dan kemudian ganti dengan code di bawah ini
- Untuk javascript tambahkan code type='text/javascript' pada tag <script> dan untuk CSS tambahkan type='text/css' pada tag <style> sehingga penerapannya menjadi seperti di bawah ini
- Didalam postingan apabila menyisipkan gambar, maka tambahkan tag "alt" dan kodenya seperti ini
- Apabila masih error, coba hapus tanda "/" sehingga menjadi seperti ini
- 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)
- Pada kode javascript "onClick" (jika ada), silahkan ganti dengan "onclick"
- Jika sudah selesai Simpan template anda
<!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'>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
</HTML>
<b:include name='quickedit'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
<script type='text/javascript'> dan <style type='text/css'>
<a href="http://url anda" title="titel gambar"><img alt="kode gambar" src="http://gambar.jpg" /></a>
<a href="http://url anda" title="titel gambar"><img alt="kode gambar" src="http://gambar.jpg"></a>
- 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.
thanks atas tutorialnya
BalasHapusini hasilnya gan :
Result:76 Errors, 66 warning(s)
ada saran gak..?