Tutorial Lengkap Agar Blog Valid HTML5
Cara Seperti ini Sebenarnya sudah banyak dan sering dibahas oleh para blogger master yang templatenya sudah Valid HTML 5 . Tetapi Banyak Blogger Master Membuatnya dalam Tidak dalam satu post . Mereka Membuat Tutorial Agar Blog Valid HTML 5 dengan Berbagai Part namun saya ingin Membuat Artikel yang langsung Menjelaskan Cara Agar bisa Mengurangi Eror atau Warning di validator.w3.org agar Template Bisa Valid HTML 5 . Artikel ini juga untuk para teman Blogger yang Masih Kesulitan dalam Membuat Template Blog Valid HTML 5 .


UPDATED 1 Maret 2013
Pengertian HTML 5

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :
  1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
  2. Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
  3. Penanagan kesalahan yang lebih baik
  4. Lebih markup untuk menggantikan scripting
  5. HTML5 merupakan perangkat mandiri
  6. Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :
  1. Unsur kanvas untuk menggambar
  2. Video dan elemen audio untuk media pemutaran
  3. Dukungan yang lebih baik untuk penyimpanan secara offline
  4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
  5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.



    Menurut Saya dengan Template kita Valid HTML5 kita akan Mendapat Backlink dari validator.w3.org secara dofollow . cuman itu keuntungan pasti dari template valid HTML 5 Menurut saya ini . Kalo KeUntungan lainnya Blog kita akan dipandang bagus bagi robot maupun human karna kecepatan blog kita yang cepat. Dengan Pengalaman saya Membuat Template Blog ini Valid HTML 5 semoga Membantu anda Dalam Menyelesaikan Masalah Warning dan Eror Dalam Membuat Valid HTML 5. Membuat Template HTML5 juga Termasuk Salah Satu Teknik Optimasi Blog Secara Teknis Tinggal Kita Membuat Artikel Semenarik Mungkin dan Berkualitas dan Tentunya salah satu nya adalah Kita Juga Backlink Berkualitas Untuk Menaikkan Posisi Artikel Blog Kita Ke SERP Google dengan Posisi Teratas.

    Kita Langsung Ke Pokok Permasalahan :D
    Berikut Cara Agar Template Blog Valid HTML 5

    1. Login Ke Akun Blogger

    2. Kita Langsung Ke Menu Template > Edit HTML > Centang Expand Template Widget

    3. Kita Mulai dari Edit HTML
    • Cari Kode Berikut biasanya kode berikut berada di paling atas .
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html 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'>

    • Kemudian Ganti dengan Kode Berikut 
    <!DOCTYPE html>
    <HTML>
    <head>
    <meta charset='utf-8'/>
    setelah itu ubah kode </html> menjadi </HTML>

    • Cari Kode <body> lalu taruh Kode dibawah tepat diatasnya
    <!-- <body><div></div> -->

    • Cari Kode yang Berawalan <script atau <style , tambahkan type='text/javascript' untuk <script
      tambahkan type='text/css' untuk <style
      Nanti akan Menjadi Seperti ini
    <script type='text/javascript'>
     <style type='text/css'>

    • Cari Kode <b:include name='quickedit'/> Lalu Hapus Semua Kode Tersebut Jika anda Menggunakan Widget Follower Lebih Baik Hapus Terlebih Dahulu dari Blog ganti dengan Widget Follower Modifikasi bukan dari blogger karna Widget dari Blogger rata-rata tidak valid HTML 5 .
    • Hilangkan Tanda Berlebihan ------
      sebagai contoh 
    /*--------CSS--------*/

    Menjadi Seperti ini
    /*CSS*/

    •  Cari <b:include data='blog' name='all-head-content'/> Lalu Hapus Semua Kodenya
    • Cari Kode <b:include name='nextprev'/> Lalu Setelah Ketemu Copy Kode dibawah <b:include name='nextprev'/> ganti dengan kode dibawah

     <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <!-- navigation -->
    <b:include name='nextprev'/>
    </b:if> 

    •  Hapus smua Kode <center> ataupun </center> yang berada di Edit HTML maupun di Widget jika Anda Ingin Menrata Tengahkan Widget ataupun sesuatu Pakai Kode berikut 
    <div style="text-align: center;">Isi Widget ataupun Kode Widget</div>   

    •  Hapus semua Meta Content yang Menurut anda tidak Berguna dan Mengakibatkan Eror pada Template Blog yang ingin kita Rubah Menjadi HTML 5 . Jika Anda Ingin Menggunakan Meta Tag Yang sudah Valid HTML 5 Saya Sarankan Menggunakan Meta Tag Berikut
    <link expr:href=’data:blog.url’ rel=’canonical’/>
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    <b:if cond=’data:blog.url == data:blog.homepageUrl’>
    <meta content=’Keyword blog anda’ name=’keywords’/></b:if>
    <link href=’http://bloganda.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
    <link href=’http://bloganda.blogspot.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
    <link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
    <link href=’http://bloganda.blogspot.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
    <meta content=’kode verifikasi dari google webmaster’ name=’google-site-verification’/>
    <meta content=’kode verifikasi alexa’ name=’alexaVerifyID’/>
    <meta content=’kode verifikasi dari bing’ name=’msvalidate.01′/>
    <meta content=’Nama Anda’ name=’Author’/>

    4. Hapus Semua Atribut Image Anchor='1' Dan Border='0' pada Setiap Gambar yang ada diblog . dan setiap anda Ingin Membuat Posting Baru Hapus Atribut Image Anchor='1' dan Border='0' pada Gambar Postingan Terbaru anda

    5. Jika Anda Ingin Menggunakan Tombol G+1 blog ataupun Widget Dari Blogger saya sarankan jangan menggunakan dari Widget Bawaan Blogger karna bisa mengakibatkan Eror yang semakin banyak . Jika Anda ingin Menggunakan G+1 saya sarankan anda kesini https://developers.google.com/+/plugins untuk mendapatkan script kode G+1 dan lainnya Valid HTML 5.

    6. Cari Kode <body> lalu ganti dengan kode dibawah
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


    7. Berikan lah Setiap alt dan title tag pada Gambar Postingan Blog maupun widget maupun Gambar yang lainnya yang ada didalam Blog . Contohnya Seperti ini
    <a href='url tujuan'><img alt='Keterangan Gambar' src='Url Gambar' title='Judul Gambar'/></a>

    8. Pada Setiap Kode Javascript ataupun Pada Template blog cari kode "OnClick" , kemudian ganti dengan "onclick"
    jika kode tersebut tidak ada didalam template blog tidak masalah.

    9. Hapus Navbar blog

    10. Hapus Widget Atribution blog

    11. Hapus Widget yang Mengakibatkan Eror dan Warning pada Blog.
    Seperti :
     - Recent Comments
    - Recent Artikel
    - Widget Flash ataupun IFRAME
    DLL

    12. Hapus Atribut width='px' dan height='px' Pada setiap gambar di blog jika ada .Jika tidak diperlukan Hapus karna bisa mengakibatkan eror atau ganti 'px' dengan selera anda.

    13. hapus atribut rel='publisher' karna bisa mengakibatkan Eror , atribut tersebut belum diakui sebagai Atribut Valid HTML 5.

    14. Jangan Taruh Script apapun diantara </head> dan <body> karna bisa mengakibatkan eror .

    15. Setiap Kode <style type='text/css'> Kode Script</sytle> Taruh diatas </head> jangan diatas </body> maupun dibawah <body> karna bisa mengakibatkan Eror .

    16. Taruh Script dibawah dibawah tepat dibawah <head>
    <!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
    Update 1 Maret 2013 
    17 Jika Cara - Cara diatas Sudah dilakukan dan Masih ada Eror Seperti Gambar Berikut 
    Cara Menghapus/Menghilangkan CSS <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> Pada Template Blog Berikut Caranya

    Invalid Bundle CSS
    Sebelum Melakukan Hal ini Kalian Harus Membackup Template Anda Agar Tidak Terjadi Kesalahan
    • Ke Menu Template > Edit HTML > Centang Expand Template Widget 
    • Buka Notepad , Lalu Cari Kode <b:skin><![CDATA[
    • Setelah itu Ganti Kode <b:skin><![CDATA[  dengan Kode dibawah 
    <link href="//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css" rel="stylesheet" type="text/css"></link>
    &lt;style type="text/css"&gt;
    &lt;!-- /*<b:skin>&lt;![CDATA[*/]]
    <style>


    • Setelah itu Save/Simpan Template anda dan Cek di validator.w3.org 
    Cara yang diatas saya Merupakan Cara dari Pembuat Template Blog ini Silahkan ke sini ~>

    ini adalah Bukti bahwa tutorial ini tidak mengada-ngada...
    Tutorial Lengkap Agar Blog Valid HTML5



    Mungkin Hanya Sampai disini Tutorial Lengkap Agar Blog Valid HTML5, Jika Anda Mengikuti Tutorial diatas secara mendalam mungkin akan mengurangi jumlah eror dan warning pada validator.w3.org . Jika kalian masih juga kurang Mengerti silahkan lihat Source blog ini .
    jika kalian ada pertanyaan silahkan Bertanya di kotak Komentar dibawah .
    Related Article

    Judul : Tutorial Lengkap Agar Blog Valid HTML5
    Di Tulis Oleh:MRizal Wrc
    URL : http://bocahporis.blogspot.com/2013/01/tutorial-lengkap-agar-blog-valid-html5.html
    Date Published : 07:30
    Desription :Cara Seperti ini Sebenarnya sudah banyak dan sering dibahas oleh para blogger master yang templatenya sudah Valid HTML 5 . Tetapi Banyak Bl...
    Rating Blog: 5 dari 5