Cara Membuat Blog Jadi Valid HTML5

Membuat Blog Jadi Valid HTML5 – Sebenarnya artikel seperti ini sudah banyak dibicarakan oleh blogger lain. Hal ini dapat dibuktikan ketika kita mengetikkan keyword “Blog Valid HTML5” (misalnya) pada kolom search google maka akan muncul puluhan bahkan ratusan blog yang membicarakannya.

Mengapa demikian? Untuk pertanyaan yang satu ini saya pending dulu untuk menjawabnya, sebab belum ada jawaban yang sangat pasti akan pertanyaan tersebut. Namun, sedikit saya mengutip dari para blogger yang sempat saya baca artikelnya tentang validasi HTML5, rata-rata mereka mengatakan ini dilakukan “karena mengikuti perkembangan zaman’.


Sebelum kita melangkah lebih lanjut, alangkah baiknya saya jelaskan dengan singkan apa itu HTML5. HTML5 adalah terobosan baru sebagai pengembangan dari versi HTML sebelumnya, yang bertujuan agar blog atau website terbaca sempurna oleh browser dan telekomusikasi multimedia (contohnya Android, HP dll) serta memudahkan mesin pencari merayapi sebuah blog.

Cek validasi template blog anda DISINI atau DISINI

Cara Membuat Blog Valid HTML5
Langkah 1: Terlebih Dahulu backup template.
Langkah 2: Cari kode <b:skin><![CDATA[ lalu hapus semua kode di atas dari kode tadi.
Langkah 3: Pastekan kode di bawah ini tepat di atas kode <b:skin><![CDATA[ :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.searchLabel'>
<title>Artikel pada Label :: <data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.searchQuery'>
<title><data:blog.searchQuery/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<title><data:blog.pageTitle/></title>
</b:if>

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

Langkah 4: Ganti kode </html> dengan </HTML> (letaknya paling bawah template)
Langkah 5: Pada langkah ini kita akan menyembunyikan CSS Reset Stylsheet Blogger. Caranya:
<b:skin><![CDATA[
......
KODE CSS DI SINI...
......
]]></b:skin>

Perhatikan kode yang diberi warna Merah dan Biru, kode tersebut yang akan dibanti.
Untuk kode yang berwarna Merah diganti dengan kode di bawah ini:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Dan untuk kode yang berwarna Biru diganti dengan kode di bawah ini:
</style>
Langkah 6: Hapus seluruh kode di bawah ini, hal ini berlaku pula setiap anda menambahkan widget baru:
<b:include name='quickedit'/>
Langkah 7: Hapus semua kode opsional di bawah ini:
<a expr:name='data:post.id'/>
Langkah 8: Hapus kode seperti ini:
<b:include data='post' name='postQuickEdit'/>
Atau kode 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>
Langkah 9: Hilangkan kode di bawah ini (jika ada)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>
Langkah 10: Hapus kode ini:
<b:if cond='data:top.showDummy'>
    <script expr:src='data:top.dummyUrl'/>
  </b:if>
Langkah 11: Harap perhatikan validator yang digunakan, jika terdapat tanda & pada bagian error validator, maka tanda error yang diperlihatkan tersebut ganti dengan &amp;. Biasanya tanda error seperti ini muncul pada saat membuat Recent Post dan tombol Terjemahan.
Save template anda. Sampai disini anda telah benar-benar mengikuti dan mempraktekkan langkah-langkah di atas, namun blog anda masih ada beberapa yang error? Perhatikan lagi beberapa hal berikut.

Perlu Diperhatikan
Agar blog anda benar-benar valid 100% HTML5, baiknya perhatikan beberapa hal penting di bawah ini:
1.    Selalu menggunakan alt pada gambar, contoh:
<img alt="HTML5" src="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/s1600/html5.png" />
2.    Selalu menggunakan title pada link, contoh:
<a href='http://www.bungfrangki.com’ title=’Blog Bung Frangki’>
3.    Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no" sebagai gantinya gunakan kode di bawah ini:
style="border:none;overflow:hidden"
atau CSS terpisah seperti di bawah ini:
iframe{border:none;overflow:hidden}
4.    Hindari penggunaan kode seperti ini :
<a name='comment-form'>
Sebagai gantinya gunakan id seperti kode di bawah ini:
<a href='#comment-form'>
5.    Jangan menggunakan 2 id pada template.

Sampai disitu, mudah-mudahan blog anda sudah valid HTML5. Klik disini untuk melihat contoh blog yang sudah divalidasi. Semoga artikel ini bermanfaat.
Artikel selanjutnya Membuat Blog Jadi Valid CSS3.

Source:
http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html
http://www.kompiajaib.com/2013/04/trik-menyembunyikan-css-reset-stylesheet-blogger.html

Advertisement