Cara Membuat Blog Jadi Valid HTML5

bungfrangki Tutorial Blog 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.

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">
<!-- /*<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='"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>

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 &. 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="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

5 komentar

Heri 8 Januari 2014 pukul 22.33
…
Hapus Komentar

Profil:https://www.blogger.com/profile/01237572208121779443

wah lengakp sekali penjelasannya mas. saya bookmark dulu, nanti kalo ada waktu saya praktekkan. Terimakasih mas sharingnya :D
- Bungfrangki 9 Januari 2014 pukul 14.45
  …
  Hapus Komentar
  
  Profil:https://www.blogger.com/profile/13162875744493565460
  
  sama-sama bung Heriyanto Saputra Mandala :D
Unknown 2 Maret 2014 pukul 20.39
…
Hapus Komentar

Profil:https://www.blogger.com/profile/14459948258978538303

Hi @Bung Frangki.
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.
Pangeran Wortel 15 Mei 2014 pukul 04.17
…
Hapus Komentar

Profil:https://www.blogger.com/profile/16326872209973639854

Thank's banget gan, ngebantu desain blog gue tulisanwortel.com
- Bungfrangki 20 Mei 2014 pukul 07.14
  …
  Hapus Komentar
  
  Profil:https://www.blogger.com/profile/13162875744493565460
  
  sama-sama banget pula ni gan :D

Tulis Komentar Format Kode

Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .