Breaking News

Bisnis

Tips

Motivasi

Rabu, 26 Februari 2014

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...

12 komentar:

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

    BalasHapus
  2. 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 :(

    BalasHapus
    Balasan
    1. Coba di cek ulang, barangkali ada kesalahan dalam mengikuti "petunjuk"nya ;)

      Hapus
  3. 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. :)

    BalasHapus
    Balasan
    1. 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

      Hapus

Silahkan berkomentar dengan mengedepankan akhlaq mulia

Copyright © 2014 TanThowi.Com All Right Reserved. Designed by