Cara Membuat Template Blogger Valid HTML5

Cara Membuat Template Blogger Valid HTML5

HTML5 adalah versi terbaru dari HTML. Banyak para developer template yang berlomba-lomba membuat template versi HTML5. Saya tidak akan membahas apa kelebihan HTML5 tapi yang jelas keluaran terbaru ini lebih oke dibanding versi sebelumnya.

Bagaimana cara mengetahui sebuah template valid html5 atau tidak? 
Banyak penyedia website maupun tool yang memberikan informasi tentang ke validan dokumen ini. Salah satu yang paling terkenal dan populer untuk melakukan pengecekan valid HTML5 adalah website validator.w3.org. Tinggal masukkan alamat sebuah website, lalu tekan enter maka kita akan melihat hasilnya.

Template defaultnya pun sudah menggunakan HTML5. Namun sayang tidak valid HTML5. Agar template kita bisa valid HTML 5 maka kita bisa melakukan berbagai upaya seperti di bawah ini:

Cara membuat template blogger valid HTML5

1. BACKUP template blogger Anda untuk antisipasi jika ada kesalahan dalam memodifikasi.
2. Cari kode seperti di bawah ini :
<?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">
<head>
Kemudian ganti dengan kode di bawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

3. Ganti kode </html> dengan </HTML>
4. Ganti kode di bawah ini :
<b:include data='blog' name='all-head-content'/>
dengan :
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

5. Ganti <b:skin><![CDATA[ dengan kode dibawah :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>

6. Hapus semua kode ini :
<b:include data='post' name='postQuickEdit'/>

7. (Opsional) Hapus kode :
<a expr:name='data:post.id'/>
 atau yang seperti ini :
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a>
</span>
</b:if>
</b:includable>

8. Hapus juga kode di bawah ini (lewati jika tidak di temukan):
<div class='post-share-buttons goog-inline-block'> I S I  K O DE BLA BLA BLA ...</div>

9. Setiap menambahkan widget, hapus kode berikut :
<b:include name='quickedit'/>


BERSAMBUNG...
Previous
Next Post »

13 comments

Click here for comments
Guru Pantura
admin
Minggu, Maret 02, 2014 9:37:00 AM ×

Terima kasih informasinya pak, saya pusing bacanya,hehe
Tolong di checkin html blog saya dong pak.

Reply
avatar
Selasa, Maret 11, 2014 10:45:00 AM ×

Sama. saya juga pusing ngebacax hehe :D

Reply
avatar
Jumat, April 04, 2014 12:12:00 AM ×

Aduh mas, saya udah masang valid html 5 , pas udah selesai scripnya di pasang tombol pages atau next atau 1 , 2 , 3 nya kok malah hilang.?
tolong mas saranya :(

Reply
avatar
Senin, April 07, 2014 10:11:00 AM ×

Menurut saya, validitas template memang sangat penting bagi seorag webmaster Sob. Namun demikian walaupun validitas template cukup penting, satu hal yang lebih penting lagi adalah konten yang terdapat dalam setiap artikel yang diterbitkan.

Kenapa saya berpendapat demikian? Karena pengunjung yang membaca setiap artikel kita tidak akan pernah peduli dengan validitas template yang dipakai untuk menayangkan artikel itu.

Sehingga kalaupun akhirnya template tidak dapat dijadikan sebagai template yang valid, maka saya rasa tidak akan jadi masalah dan tak perlu dipermasalahkan. Artinya daripada membuang waktu dan tenaga untuk menjadikan sebuah template menjadi valid, akan lebih baik jika waktu dan tenaga itu dipanfaatkan untuk menyusun dan atau menerbitkan artikel baru.

Oh ya, tidak lupa saya sampaikan bahwa ulasannya sangat bermanfaat, serta saya sampaikan pula salam kenal dan salam berbagi. :)

Reply
avatar
Senin, April 07, 2014 3:18:00 PM ×

Coba di cek ulang, barangkali ada kesalahan dalam mengikuti "petunjuk"nya ;)

Reply
avatar
Senin, April 07, 2014 3:32:00 PM ×

Salam kenal juga mas semar. Terima kasih komentarnya. :)

Yup konten memang lebih penting dibanding validx template. Tetapi bagi sebagian (wlaupun kecil) validx sebuah dokumen (template) akan memberikan kepuasan tersendiri. Kita lihat saja desainer maupun promotor template sering memberikan embel valid html5 css3 dan sejenisnya.

Pengunjung "human" sebagian besar tidak akan peduli dengan ke-valid-an doc html, Namun bagaimna dengan pengunjung berupa "bot,robot,crawl atau spider"? sayapun tidak tahu :D Mungkin saat ini belum terlalu penting, tapi kita tidak tahu apa yang terjadi dengan algoritma "search engine"ke depan. So jika saat ini belum begitu penting. teman-teman bisa sekedar bermain untuk mengisi waktu senggang. :)

Salam berbagi

Reply
avatar
Jumat, Juni 06, 2014 8:50:00 AM ×

Terimakasih tutorialnya ya :)

Reply
avatar
Senin, Januari 12, 2015 1:06:00 AM ×

Secara signifikan memang tidak ada pengaruhnya jika blog valid html5 atau tidak, namun dengan memvalidasi blog serta artikel blog, maka kualitas SEO dan tatanan kode HTML pada blog akan lebih mudah ditangkap search engine, sebab susunan yang menggunakan Validasi HTML5 memberikan dampak positif untuk loading dan perkembangan blog di mata search engine.

Reply
avatar

Silahkan berkomentar dengan mengedepankan akhlaq mulia ConversionConversion EmoticonEmoticon

Thanks for your comment