 |
| Cara Membuat Blog Valid HML5 |
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 Versi Label Tutorial
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/AVvXsEhZrumodT-VaPHwztlvTbEVp2Y_hxDJMfnZdBuEcAAycQVhXSbNeod_8FuEPASr9wuG9Ylwa66pQ0Orm0HdqNWjzzuQADt-r__kK8GAFLew8xceqorWl7jzzA9SS-4N6zE1Yyg4MfUaeOBN/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
sekian dari saya , semoga bermanfaat sobat blogger ..salam labeltutoriailcom