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.
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[ :
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:
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:
Sampai disitu, mudah-mudahan blog anda sudah valid HTML5.
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.
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 == "item"'>
<title><data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "archive"'>
<title><data:blog.pageName/> :: Nama Blog Anda</title>
</b:if>
<b:if cond='data:blog.pageName == ""'>
<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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + 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:
<style type="text/css">Dan untuk kode yang berwarna Biru diganti dengan kode di bawah ini:
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
</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'/>Langkah 9: Hilangkan kode di bawah ini (jika ada)
Atau kode ini:
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + 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>
<div class='post-share-buttons goog-inline-block'>...sampai...</div>Langkah 10: Hapus kode ini:
<b:if cond='data:top.showDummy'>Langkah 11: Harap perhatikan validator yang digunakan, jika terdapat tanda & pada bagian error validator, maka tanda error yang diperlihatkan tersebut ganti dengan &. Biasanya tanda error seperti ini muncul pada saat membuat Recent Post dan tombol Terjemahan.
<script expr:src='data:top.dummyUrl'/>
</b:if>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg60OWNcM9gt94psUaPGJwn8KNgdvjTgOXJbKTHofDC0UASduHNl0qY8xkPS9ijUcXTk-SrUhOZsAl7ZIsuZWv2TQfF6uIS48LdcVW2gEfMum9IHoQ3F7pcB8cVdVFznGML85FxAn2g6B8/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.
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
Share this
5 komentar
https://www.blogger.com/profile/01237572208121779443
2013-12-20T08:59:00+07:00https://www.blogger.com/profile/01237572208121779443
https://www.blogger.com/profile/13162875744493565460
2013-12-20T08:59:00+07:00https://www.blogger.com/profile/13162875744493565460
https://www.blogger.com/profile/14459948258978538303
2013-12-20T08:59:00+07:00https://www.blogger.com/profile/14459948258978538303
I'm Akatsuki, i'm from VietNam, i really verry like bungfrangki, and i love Blogger platform, but i don't know design blogger so i hope you will tutorial me design blogger from A to Z, poster in bungfrangki.com or help me throught email of me: [email protected]
Thanks.
https://www.blogger.com/profile/16326872209973639854
2013-12-20T08:59:00+07:00https://www.blogger.com/profile/16326872209973639854
https://www.blogger.com/profile/13162875744493565460
2013-12-20T08:59:00+07:00https://www.blogger.com/profile/13162875744493565460
Image
.pre
,code
, atauquote
.Salin Kode!
lalu paste ke kolom komentar.image quote pre code