HTML5
sebenarnya adalah pengembangan dari versi sebelumnya yang bertujuan untuk memperbaiki teknologi HTML untuk
mendukung teknologi multimedia dan juga
mudah dimengerti oleh mesin.
Perlukah
web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan
mevalidasi blog adalah :
√ Mmbantu 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.
Cara Membuat Blog 100% Valid HTML5
Hapus
kode <b:include name='quickedit'/>
setiap Anda menambah widget baru.
√1 Backup template sebelum melakukan editing.
√2 Cari kode ini
HTML
<?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>
√3 Silahkan Anda ganti dengan yang
dibawah ini :
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE
html>
<HTML>
<head>
<meta
charset='utf-8'/>
√4 Ganti kode </html>
dengan </HTML> ( pada bagian bawah template
Anda )
√5 Cari kode seperti yang di bawah ini :
<b:include data='blog' name='all-head-content'/>
√6 Gatikan seperti yang 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>
√7 Cari kode seperti ini : <b:skin><![CDATA[
√8 Gantikan dengan yang di bawah ini :
√8 Gantikan dengan yang di bawah ini :
<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>
√9 Hapus semua kode ini : <b:include name='quickedit'/>
Catatan : Setiap kali Anda menambahkan widget baru, hapus kode di atas.
√10 Hapus semua kode ini : <a expr:name='data:post.id'/> ( Jika Anda temukan = optional ).
√11 Hapus semua kode ini :
<b:include
data='post' name='postQuickEdit'/>
Atau seperti dibawah 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>
√12
Hapus kode dibawah ini jika
ketemu ( jika tidak lewati saja )
<div class='post-share-buttons goog-inline-block'>...sampai... </div>
√13 Gantikan semua kode ini & dengan &
Jika cara diatas sudah Anda lakukan bisa dipastikan template sudah Valid HTML5 untuk Homepage. Kecuali pada postingan tentunya masih belum FIX atau masih banyak error .
Jadi langkah yang harus di tempuh berikutnya agar blog menjadi 100% valid HTML5, maka hal hal yang perlu diperhatikan adalah seperti di bawah ini :
۞ Selalu gunakan tag alt pada
gambar, contoh :
<img alt=" isikan judul gambar atau judul posting " src="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/bloggingpasuruanblogspotcom.pict1.jpg" />
۞ Hindari penggunaan border="0" pada gambar, sebagai gantinya tambahkan kode :
style="border:none"
atau CSS terpisah seperti
img{border:none}
۞ Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", cari dan temukan lalu ganti dengan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti di bawah ini :
iframe{border:none;overflow:hidden}
۞ Pada tag a jangan menggunakan tag name seperti di bawah ini :
<a name='comment-form'>
Silahkan Anda ganti menggunakan id seperti :
<a href='#comment-form'>
۞ Jangan ada dua id pada template.
Demikian tutorial Cara Membuat Blog 100% Valid HTML5, semoga bermanfaat....
Wuuiiiih ini lagi..! yang saya cari.... makasih infonya :)
ReplyDeletesama sama... ada problem ? tinggalkan komentar , insyaAllah saya coba bantu :)
ReplyDeleteTerimakasih untuk infonya sangat bermanfaat, akan saya coba langsung di blog saya perawatanwajah.co.id
ReplyDeleteUdah saya coba tp ga berhasil bro, gmn ya? bisa bantuin bro?
ReplyDeleteMasalahnya dimana Bro ?
Deletekok blog punya masnya juga masih banyak yang error..
ReplyDeletemenuju 100% VALID memang susah,,, Google aja jg ada yang tidak Valid HTML. Intinya Sobat harus bisa meminimalkan ERROR itu saja ! se minim mungkin..
Deletehmmm eror, udah cape ganti sana sini tapi hasilnya tetap sama
ReplyDeletetapi thanks postingannya nanti saya usahain lagi sampe bisa
Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
ReplyDeleteJika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.
Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)