Minggu, 31 Maret 2013

Membuat Template Blog Lebih Valid XHTML



  • Login ke akun blogger sobat
  • Masuk Rancangan/Layout
  • Pilih Edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Beri tanda centang "Expand Template Widget"
  • Setalah itu kita mulai step by step dan cari kode dibawah ini:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Kemudian, gantilah kode diatas dengan kode berikut:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Cari kode semacam ini:
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template benyo Style
    Name:   benyo template
    Date:     26 Feb 2012
    Updated by: Blogger Team
    ----------------------------------------------- */
  • Hapuslah semua kode/tanda strip (-----) hanya stipnya saja yang dihapus.
    Dan cek juga pada kode css yang lainya, biasanya terdapat banyak tanda seperti pada contoh diatas.
    Hasilnya kan menjadi seperti ini:
    Hapuslah semua kode/tanda strip (-----) hanya stipnya saja yang dihapus.
    Dan cek juga pada kode css yang lainya, biasanya terdapat banyak tanda seperti pada contoh diatas. Hasilnya kan menjadi seperti ini:
    <b:skin><![CDATA[/*
    Blogger Template benyo Style
    Name:   benyo template
    Date:     26 Feb 2012

    Updated by: Blogger Team
    */
  • Cari kode dibawah ini:
    <b:include name='quickedit'/>
    Hapus saja semua kode diatas yang ada dalam template kamu,dan ingat! kode diatas akan muncul jika kamu menambah gadget pada blog kamu,jadi selalulah menghapusnya ketika sesudah kamu menambah gadget.
  • Cari kode dibawah ini:
    <b:include data='blog' name='all-head-content'/>
    Dan hapus saja juga! tapi buat kamu yang memberi foto profile pada komentar blog maka berisiko foto-foto profile komentar tidak muncul,tapi terserah ke kamu,kalau ingin valid maka sikat aja.
  • Langkah selanjutnya silahkan kamu cari kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head>
    <!-- <body>
    <div></div> -->
  • Jika Sobat meng-upload sebuah gambar, berilah tambahan alt pada gambar tersebut. contoh kode alt seperti ini:
    <a href="http://validator.w3.org/"><img alt="Markup Validation Service"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjty34aGHLMO1f70zsShdc8M809sddZPPWVSjzAT2DCLrAKMhSmAGNK8vrV8TGdwmo7CYiQY7YiMOzOeVZAJ5joLrBw-JT7E_Qgtl2UN1wC2WTqAMAbJN9XrmjpRoiZS0KAEvVNe8_gd_I/s320/valid-html.gif" /></a>
  • Jika sobat menemukan penulisan meta content dengan huruf besar, rubahlah menjadi huruf kecil,contoh:
    <META content='blogger' name='generator'/>

    ubah menjadi:

    <meta content='blogger' name='generator'/>
  • Menghapus Post icon,adapun kode post icon atau pensil kodenya mirip kode seperti ini:
    <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://www.blogger.com/img/icon18_email.gif' width='18'/>
    </a>
    </span>
    </b:if>

    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    </span>
    Ganti kode diatas dengan kode berikut:
    <span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'>
    </b:if>
    </span>
  • Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:
    <script src="http://benyocyberprotokol.googlecode.com/files/cirebon.js"></script>

    Tambahkan kode berwarna merah seperti dbawah ini:

    <script type="text/javascript" src="http://benyocyberprotokol.googlecode.com/files/cirebon.js"></script>
  • Menyembunyikan page navigation di halaman utama
    cari kode:
    <b:include name='nextprev'/>

    ganti kode diatas dengan kode dibawah ini!

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

    Tidak ada komentar:

    Posting Komentar