Cara Membuat Blog Valid HTML5 - Salam Labeltutorialcom, 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
1. Cari Kode kurang lebih seperti Berikut ini :
Pokoknya yang diatas head deh, ganti dengan :
2. Ganti kode
dengan kode
kode ini terletak di paling bawah
3. kemudian ganti kode :
dengan kode berikut :
4. Selanjutnya ganti kode :
dengan baris kode :
5. lalu hapus semua kode seperti ini :
6. dan hapus semua kode ini :
7. hapus kode ini jika ada :
8. Selanjutnya ganti kode :
dengan kode
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.
12. ganti kode ini jika ada:
sampai tahap ini seharusnya blog anda sudah valid HTML 5 silahkan cek dahulu , dan perhatikan kesalahan yang ada.
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
Dengan kode :
2. Ganti kode
Ganti dengan :
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 :
hanya merubah id menjadi class
4. Gunakan Tag ALT pada Gambar
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 :
atau
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
 |
| 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/AVvXsEhVFDt-Hewp1EdSwq2ZCuOZ2Q-AZL5puSb2u3ytC82ls8O9gV9Y1Lts_bCTTf0N1YxVX2qYRokYjcwsYd5ZYWkarx3ucKkkD0zilEuj6kObZBeapg1QUI2TpA2ezVJnd5tmmrp-tYSlUVmb/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
