Cara Membuat Blog Valid HTML5
- Setelah blog ini saya design ulang tentunya
saya juga akan aktif menulis seperti dulu ya karna ini saat ini sedang
tidak punya kesibukan saya akan memanfaatkan waktu saya untuk blog ini ,
blog saya ini sebelum redesign belum SEO 100 Persen di CHKME dan belum valid HTML5 tapi saya coba terus berusaha menjadikan blog ini dengan tutorial yang
menarik dan bermanfaat tentunya dengan konten yang menarik berikut ini
ya yaitu cara membuat blog valid HTML 5 di http://validator.w3.org/
Sebenarnya ada banyak tempat untuk mengecek validasi HTML5 berikut daftarnya :
Daftar situs untuk Cek Validasi HTML5
http://html5.validator.nu/
http://www.w3schools.com/website/web_validate.asp
http://validator.whatwg.org/
Demo Blog yang sudah valid HTML5
Tutorial Cara Membuat Blog Valid HTML5
Tahap 1 :
Warning : Backup Dahulu Template sebelum Edit Template
1. Cari Kode kurang lebih seperti Berikut 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>
Pokoknya yang diatas head deh, ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
2. Ganti kode
</html>
dengan kode
</HTML>
kode ini terletak di paling bawah
3. kemudian ganti kode :
<b:include data='blog' name='all-head-content'/>
dengan kode berikut :
<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>
4. Selanjutnya ganti kode :
<b:skin><![CDATA[
dengan baris kode :
<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>
5. lalu hapus semua kode seperti ini :
<b:include name='quickedit'/>
6. dan hapus semua kode ini :
<b:include data='post' name='postQuickEdit'/>
7. hapus kode ini jika ada :
<div class='post-share-buttons goog-inline-block'>.....sampai penutup</div>
8. Selanjutnya ganti kode :
<b:include name='nextprev'/>
dengan kode
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
9. ganti semua kode & dengan kode &
10. ganti kode CSS dengan contoh seperti ini :
/*-----Comments------*/ menjadi seperti /*Comments*/
11. ganti kode <center> menjadi <div style='text-align:center;'>
karna nanti akan terjadi error kira kira seperti ini : The center element is obsolete. Use CSS instead.
<span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/></a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> <div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div> </div>
menjadi :
<span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'></b:if> </span> </div>
Tahap Kedua :
Warning :
Cek Dulu Blog Sobat di Validornya dan perhatikan pesan Errornya , lalu cocokan Dengan beberapa Pesan Yang error Dibawah
Cek Dulu Blog Sobat di Validornya dan perhatikan pesan Errornya , lalu cocokan Dengan beberapa Pesan Yang error Dibawah
Setelah sobat cek apakah blog sobat sudah valid HTML 5 atau belum ? jika belum coba perhatikan pesan kesalahanya dan perhatikan kode kode berikut :
1. Ganti kode
<script>Kodescript</script>
Dengan kode :
<script type='text/javascript'>Kode script</script>
2. Ganti kode
<style>Kode CSS</style>
Ganti dengan :
<style type='text/css'>Kode CSS</style>
3. Jika dicek terjadi kesalahan duplikat ID
Pada kode CSS ganti :
"#" (tanda pagar) ganti dengan "." (tanda titik)
Sebagai contoh kode CSS #top-menuwrapper menjadi .top-menuwrapper
Kemudian pada kode HTMLnya ganti seperti contoh :
<div id='top-menuwrapper'> ganti dengan <div class='top-menuwrapper'>
hanya merubah id menjadi class
4. Gunakan Tag ALT pada Gambar
<img alt="labeltutorialcom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyPB7CGtOZMjFSY2TNq8X7fY6VrQz3pfNnMN4Gqqwt2tkIIc54tlygqFUBTt8PhfVys9g3w69vd6_KA6Fduvz3lX_HPi3CwH7AlQ0lp_46eCRvJt3yYN7nRThsQJyf8KC4RJNOHadGqu2/s150/logo-labeltutorial+baru.png" />
5. Ganti border="0" dengan style="border:none"
6. Pokoknya Hapus kode <b:include name='quickedit'/> jika setelah menambah widget baru
7. Pada Tag link yang seperti ini
<a name='comment-form'> ganti dengan <a href='#comment-form'>
8. Jika terjadi kesalahan pada CSS seperti ini
<style type='text/css'> ganti dengan :
<style type='text/css' scoped=''>
atau
<style type='text/css' scoped='scoped'>
9. nah untuk tombol share atau tombol like atau widget lainnya pasti masih banyak errornya nanti akan saya tulis diartikel selanjutnya untuk tombol like , tweet dan google + yang valid HTML5
Admin tidak bertanggung jawab atas semua isi komentar ,Mohon dipahami semua isi komentar dengan bijak