1
Hai good People Pengunjung, Selamat datang di Labeltutorial.com. Blog sudah 1 tahun vakum jadi banyak tutorial yang saya hapus dan blog ini akan kembali aktif membawa tutorial segar serta Blog Ini Sudah Selesai Redesign ,Ada yang ingin nanya bisa ke Ruang Ngopi.

Trending Tutorial :
Tutorial Terbaru Membahas Mengenai Tag Kondisional Lebih lanjut
#HappyBlogging Guys
CLOSE
/ / / Cara Membuat Blog Valid HTML5
HTML5 Panduan Blog

Cara Membuat Blog Valid HTML5

9
12/26/2013
http://label-tutorial.blogspot.com/2013/12/cara-membuat-blog-valid-html5.html
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/

Cara Membuat Blog Valid HML5 lengkap
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

Demo

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 + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' 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 == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + 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'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<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 &amp;

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:

<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>

sampai tahap ini seharusnya blog anda sudah valid HTML 5 silahkan cek dahulu , dan perhatikan kesalahan yang ada.

Tahap Kedua  :

Warning :

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/AVvXsEhNvAykCgIEVWw73l-X5GxC-j38qjGFC4rwgYIFvrzucYEiVQh75OIxwSTpC6Y1ZEgjUxspyEsG8F0xyImlZ4iU3snAEqf9Xl5ducyXdvHWMK2VtY5ri4edl1EPVjWP8jQXoVLA4C2DQLLv/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
,

9 komentar Add New komentar

avatar
Balas Hapus
Unknown 29 Desember 2013 pukul 07.36

blog ane banyak yg gak valid, wkwk, eh tapi.apa bener validasi HTML 5 ini bisa bikin SEO mas

avatar
Balas Hapus
Unknown 29 Desember 2013 pukul 07.37
Komentar ini telah dihapus oleh pengarang.
avatar
Balas Hapus
admin Admin 29 Desember 2013 pukul 07.51

HTML5 ini adalah salah satu faktor untuk SEO kang , HTML5 hanya memudahkan mesin pencari menelusuri konten blog seperti fungsi penggunaan Microdata , tapi menggunakan HTML5 tidak menjamin menjadi peringkat pertama pada mesin pencari jadi HTML5 ini sebagai penunjang SEO , munurut saya untuk SEO yang baik adalah yang terpenting konten dan blacklink kang selama blog memiliki konten (bukancopas) pasti baik untuk SEO ,(ini hanya menurut saya kang)

avatar
Balas Hapus
Anonim 1 Januari 2014 pukul 14.25

punya aku pas di check di html5.validator.nu hasilnya--> http://html5.validator.nu/?doc=http%3A%2F%2Fsudutpandangme.blogspot.com , tadinya merah2x nya cuma setengah dari itu di tahap 1 setelah tahap 2 dilakukan jadi 2 kali lipat, minta penjelasan dan solusi nya dong gan :-D

avatar
Balas Hapus
admin Admin 1 Januari 2014 pukul 20.52

ganti kode <style scoped='' type='text/css'> dengan kode <style> atau <style type='text/css'> jika didalam edit HTML , karna tahap kedua yang saya tulis hanya "jika masih terjadi error"

avatar
Balas Hapus
admin Admin 1 Januari 2014 pukul 20.55

pindahkan kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> diatas </head>

avatar
Balas Hapus
admin Admin 1 Januari 2014 pukul 21.18

pada error no 2 ganti kode & dengan &amp;

avatar
Balas Hapus
Muhammad Lutfi Hakim 3 Januari 2014 pukul 06.04

Numpang tanya, Mas. Backlink itu apa? *masih awam dunia blogger*

avatar
Balas Hapus
admin Admin 3 Januari 2014 pukul 06.25

pertanyaan sobat memang melenceng dari topik diatas tapi gpp kok :D , baclink adalah sebuah link yang di tanamkan di berbagai website lain dan mengarahkannya ke website Anda.
backlink ini bisa meningkatkan page rank web sobat dari google , intinya kalo sobat punya web dan alamat web tersebut ada di web orang ini otomatis secara gak langsung web sobat di promosikan oleh website tsb :ajar

Silahkan berkomentar sesuai artikel. Komentar yang menyertakan link aktif akan dimasukan ke folder SPAM.

Show Konversi
Hide Konversi
Show Emoticon
Hide Emoticon
Reset
Komentar sobat sangat berharga
Beranda item