- Apasih HTML5 itu ?
HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.
- Apa keuntugan menggunakan HTML 5 ?
- Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
- Render browser lebih baik dan lebih cepat
- DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
- Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
- Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
- Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.
- Bagaimana cara membuatnya ?
Langkah 2 : Login ke akun blogger anda lalu klik Template lalu edit HTML
Langkah 3 : Cari kode seperti ini :
Langkah 3 : Cari kode seperti 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">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Lalu ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Langkah 4 : Ganti kode </html> dengan </HTML> (paling bawah di template)
Langkah 5 : ganti kode ini :
<b:include data='blog' name='all-head-content'/>
Dengan kode di bawah ini :
<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 6 : 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'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
Langkah 7 : Hapus semua kode ini :
<b:include name='quickedit'/>
Langkah 8: Hapus semua kode ini (opsional)
<a expr:name='data:post.id'/>
Langkah 9 : Hapus kode seperti ini :
<b:include data='post' name='postQuickEdit'/>
Atau seperti 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 10 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)
<div class='post-share-buttons goog-inline-block'>...sampai...</div>
Langkah 11 : Ganti semua code
& dengan &Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini).
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :
1. Selalu gunakan tag
alt pada gambar, contoh :
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZeKijLkug2gb9WVqLgbhKMBXnVe38lKuVlvTPr92FNgseQ08_5pD8W1IwVrt42V-lZiIDnixD4g-iyYvPc0038g3aPtqyZKohiXjsveXwF2Mf9HnYh56wzma0TFkXBys0OutML2ruig/s1600/html5.png" />
2. Jangan gunakan
border="0" pada gambar, sebagai gantinya tambahkan kode :
style="border:none"
3. Pada iFrame, jangan
menggunakan
frameborder="0"atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :
style="border:none;overflow:hidden"
Atau CSS seperti ini :
iframe{border:none;overflow:hidden}
<a name='comment-form'>
<a href='#comment-form'>
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.
27 comments
Write commentswah keren nih tipsnya bakalan saya coba di blog saya kumpulan resep ala chef yudhaz dan tempat wisata
Replywah ini nih yang saya cari trick yg bermanfaat ....terima kasih...
Replywah mantep langsung ane terapkan di blog ane :)
Replythanks gan, langsung otak atik dan ternyata blog saya ada 2 warning, thanks bro
Replyoke daah sooob.
Replylangsung ke TKP daaah :D
Ops Jelas sob..
ReplyThanks 8-)
Silahkan sob..
ReplySemoga Bermanfaat
hhhhaa..
Replysemoga bisa sob :D
ane siap coba gan
Replynice trik seo
ReplyNice post gan.. Kunjungan balik gan.. :D
Replythanks gan tipsnya... udah ane terapin beberapa nih.. sisanya besok
Replyjangan lupa komen balik ya disini
Silahkan sob
ReplySEMOGA BERHASIL
makasih sob :D
Replyoke sob :)
Replysama-sama sob :-b
Replylangsung dicoba diterapkan mas,,
Replymakasih tipsnya,, sangat membantu sekali lhoo
hhehe.. Oke mas..
ReplyMakasih :-d
wah ane msih ada error 31 gara >
Replyhhha. susah sob..
Replykalo mau buat 1 warnings ;-(
sudah gan.. tapi ane gak ketemu kode yang nomer 5 ???
ReplyBerarti udah diganti sob.
Replycoba cari kode yang agak mirip aja sob. :d
makasih sob (h)
ReplyMaaf kang, saya mau tanya memangnya apa efeknya terhadap blog kita jika menggunakan HTML5? :/
ReplyPunya saya susah validnya bro :D
ReplyJika bagian language html di ganti Hasilnya error template,jadi saya biarkan saja. terus saya cek blog anda pada bagian language html tidak memasang kode seperti kode yang di posting, terlihat masih error atau tidak valid html.Solusinya bagaimana ya?
ReplyEmoticonEmoticon