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
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates