» » Cara Membuat Template Blog Valid XHTML
Selasa, 24 Juli 2012

Cara Membuat Template Blog Valid XHTML

blogger templates
Cara Membuat Template Blog Valid XHTML - Cara membuat theme blog valid XHTML atau cara agar template blog bisa valid XHTML atau cara agar template blog lebih SEO friendly - Template Blogger sangat bepengaruh untuk Optimasi SEO, disamping kita bisa memilih template blog yang SEO friendly (Baca: download template blogger SEO friendly) kita juga bisa membuat atau mengedit template kita agar lebih ramah SEO, misalnya kita membuat meta title SEO friendly maupun memasang meta tag otomatis pada setiap postingan, untuk lebih lengkapnya silahkan baca artikel berikut: cara mengubah template blogspot menjadi SEO friendly. Dan kali ini ada tips lagi untuk membuat agar template blog kamu lebih SEO friendly, yaitu dengan cara mengedit beberapa kode HTML pada yang lebih valid XHTML. Lalu bagaimana cara membuat template blogger lebih valid XTHML? Ikuti step demi step berikut!

Bagian I 
  1. Login ke akun blogger sobat.
  2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
  3. Setalah itu kita mulai step by step dan cari kode dibawah ini:
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. Kemudian, gantilah kode diatas dengan kode berikut:
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. Cari kode semacam ini:
    6. <b:skin><![CDATA[ /* ----------------------------------------------- Blogger Template Style Name: Minima Date: 26 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */
  6. 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 akan 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 akan menjadi seperti ini:
    7. <b:skin><![CDATA[/* Blogger Template Style Name: Minima Date: 26 Feb 2004 Updated by: Blogger Team */
  7. Cari kode dibawah ini:
    8. <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. 
    Bagian II 
  1. Cari kode dibawah ini:
    2. <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.
  2. Langkah selanjutnya silahkan kamu cari kode </head> dan letakkan kode di bawah ini tepat di bawah kode </head>
    3. <!-- <body> <div></div> -->
  3. Jika Sobat meng-upload sebuah gambar, berilah tambahan alt pada gambar tersebut. contoh kode alt seperti ini:
    4. <a href="http://validator.w3.org/"><img alt="Markup Validation Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hxG7jv2dWDYCR-iQhKc_vBJgo8PtffgVforifu46ZfqT57fRNVSSBOYUVTqgpV1MS4okpHRYYwrrJo1kG8vy2TlcFcFG1lQIzYEIp3FbixKfDyL8cilHzacldo02i-u6C7FVO33H4kU/s320/valid-html.gif" /></a>
  4. Jika sobat menemukan penulisan meta content dengan huruf besar, rubahlah menjadi huruf kecil,contoh:
    5. <META content='blogger' name='generator'/> ubah menjadi: <meta content='blogger' name='generator'/>
  5. Menghapus Post icon,adapun kode post icon atau pensil kodenya mirip kode seperti ini:
    6. <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>
  6. Ganti kode diatas dengan kode berikut:
    7. <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> </b:if> </span>
  7. Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada. Contoh:
    8. <script src="http://amronbadriza.googlecode.com/files/SakuraRain.js"></script> Tambahkan kode berwarna merah seperti dibawah ini: <script type="text/javascript" src="http://uyea.googlecode.com/files/SakuraRain.js"></script>
  8. Menyembunyikan page navigation di halaman utama
    cari kode:
    9. <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>
  9. Memperbaiki attribut title dan alt pada link gambar.sebagai contoh:
    10. <a href="http://www.amronbadriza.com/" alt="free backlink generator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNV6VnBJVKdEtzgKGYZDtIC5MvpYjZXhzwVDL-2WjsAfEBoMUlxFcCRL5AZLu6qAdMdCHoCCx8hyQURI5vDvxAgKrU4PvbrRgZ0UP1jb8CNPSEp4P7HedzG9ded1RsZ6-PMnw2BlakcZi/s1600/aang-vs-naruto+%281%29.jpg" title="Free backlinks generator" border="0" /></a> Rubah menjadi: <a href="http://www.amronbadriza.com/" title="free backlink generator" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNV6VnBJVKdEtzgKGYZDtIC5MvpYjZXhzwVDL-2WjsAfEBoMUlxFcCRL5AZLu6qAdMdCHoCCx8hyQURI5vDvxAgKrU4PvbrRgZ0UP1jb8CNPSEp4P7HedzG9ded1RsZ6-PMnw2BlakcZi/s1600/aang-vs-naruto+%281%29.jpg" alt="Free backlinks generator" border="0" /></a>
    Untuk kasus diatas jangan lupa untuk link atributnya title dan target, untuk gambar alt dan border jagan sampe terbalik-balik.
Nah mungkin cara diatas cukup untuk mengisi artikel dengan judul cara membuat template blog valid XHTML, sebenarnya masih banyak, dan masih bisa dikompres lagi, itu tergantung widget/kode script yang ada di blogger sobat. Untuk hasil silahkan cek sebelum dan sesudah kamu edit menjadi valid XHTML, silahkan cek disini http://validator.w3.org dan semoga bermanfaat.
Diposting oleh di

0 Response to "Cara Membuat Template Blog Valid XHTML"

Posting Komentar