Cara Lengkap Buat Blog Valid HTML5

Kode Iklan Di Sini

Cara Lengkap Buat Blog Valid HTML5

Cara Lengkap Buat Blog Valid HTML5

Sobat bloggers, pada posting saya sebelumnya yaitu  Tips dan Cara Validasi HTML5 Pada Halaman Posting. Nah kali ini kelanjutan dari tips membuat blog valid html5, yaitu dengan membuat blog sepenuhnya valid html5. Sobat bloggers, silahkan ikuti panduan di bawah ini :

Tips dan Cara Lengkap Membuat Blog Jadi Valid HTML5:


  • Supaya gambar (image) bisa dibaca oleh search engine google maka harus dilakukan perubahan


    1. Pada bagian gambar (image) sebaiknya Anda gunakan format .png
        Bungkus kode image dan berikan atrribut Tag />
        dengan menambahkan tag title="Titel Gambar" dan img alt="Kode Gambar"

        contoh :
    
    <a href="URL Anda"><img alt="Titel Gambar" 
    src="http://anaktimor-17.blogspot.com/blog-valid-html5.png" alt="Kode 
    Gambar"/></a>

    2. Hilangkan/hapus kode imageanchor="1" pada tag img.
        Hilangkan/hapus kode border="0" pada tag img.

  • Menghapus kode yang tidak valid HTML5 dalam template

    1. Hapus kode ini
    
       <div class='post-share-buttons goog-inline-block'>
    
       kode lain...
    
       </div>

    2. Hapus Kode ini:

    
    <b:includable id='postQuickEdit' var='post'>
    
      <b:if cond='data:post.editUrl'>
    
        <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    
          <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    
          <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com /img/icon18_edit_allbkg.gif' width='18'/>
    
          </a>
    
         </span>
    
       </b:if>
    
    </b:includable>


3. Hapus Kode ini:

  <body><div></div>
 
4. Hapus Kode ini:


<b:include name='quickedit'/>

   <b:include data='blog' name='all-head-content'/>
  

5. Hapus kode ini:

<a expr:name='data:post.id'/>
  

  • Mengganti kode template lama

    Sebelum melakukan perubahan pada template, backup dulu template Anda beserta widgetnya.
    Hal ini dilakukan agar tidak terjadi kesalahan pada saat di check pada validator.
    1. Ganti kode :
    <?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>
     
    ganti dengan
    
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <HTML>
    <head>
    <meta charset='utf-8'/>
     
     
    2. Ganti kode :


    <b:include name='nextprev'/>


        ganti dengan



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








    3. Ganti kode :



    </html> dengan </HTML> 


    4. Ganti semua garis yang ada dalam kode css




    /*-----Header------*/  menjadi seperti  /* Header */




    5. Cari kode



    <center>



      ganti dengan



    <div style='text-align:center;'> 



       dan pada penutup  elemennya  </center> ganti dengan </div>



    6. Cari kode: onClick ganti dengan onclick (huruf C ditengah menjadi huruf kecil)

    7. cari kode
    <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>
    
    kemudian ganti dengan:
    
    <span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'></b:if>
    </span>
    </div>
    

    8. Jika dicek terjadi kesalahan duplikat ID,

       pada kode css : "#" ganti dengan "."   
        contoh :  #artigo ganti dengan .artigo 
    
     pada kode html : <div id='artigo'> ganti dengan <div class='artigo'>

    9. Mengganti kode pembuka dan penutup script dan style
     

    cari kode :
     
    <script>Kodescript </script> 


      ganti dengan

    <script type='text/javascript'>Kode script</script>   cari kode :

      
    <style>Kode CSS</style>>


    ganti dengan

    <style type='text/css'>Kode CSS</style>







    • Catatan :
      Check Validasi agar template valid HTML5 hanya untuk halaman utama (homepage) saja.
      Dan tidak bisa dilakukan pada template yang homepage berisi halaman penuh artikel.

    • Hindari penggunaan widget berikut ini

      1. Hindari Tag <center> jika pada Tahap Kedua poin (5) masih error.
      2. Hindari pemasangan widget :
         - Google+ Followers
         - Pengikut
         - Share Button
         - Statistic (Penghitung jumlah pengunjung)


    sekian artikelCara Lengkap Buat Blog Valid HTML5, semoga bermamfaat  :)


You Might Also Like:

Disqus Comments