Rabu, 25 Desember 2013

Cara Membuat Blog Valid HTML5

10.19 by DeffNo comments
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/AVvXsEhn__gZ6kBzFYbjsPO6ZAXWP8oUBGPmLIhFC8zmoW6Ml-St6pHyO3CB7F9U0XfQV10r2pUKm4DymvSqDCjsslbmoA3BciEmAYbUhEe8Kn2y3I7xPFOnEdy253XmHvQfxs5Fn6ZJiT95icoD/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

Tagged: ,