728x90 AdSpace

HEADLINE NEWS

19 November 2010

Membuat Template Blogspot Valid XHTML 1.0. Template blogspot ada baiknya valid xhtml, alasannya karena dengan valid XHTML maka dapat berpengaruh pula terhadap SEO. Meskipun saya memberikan tutorial ini sedangkan template yang saya gunakan ini tidak valid XHTML.  Pada postingan sebelumnya saya pernah menulis postingan mengenai Cara Pasang Slider Ala Zinmag Primus Template yang banyak sobat blogger ingin menggunakannya. kembali ke pokok pembicaraan. Membuat Valid XHTML tidak lah mudah, (Bagi Newbie seperti Saya) karena banyak kode yang sering kita gunakan padahal itu merupakan kode yang tidak valid ; contoh: sepertinya kita lebih sering memberi kode <br/> dibanding <p>...</p> untuk memberi perintah garis baru. padahal sesungguhnya pemberian kode br/ itu merupakan kode yang tidak valid XHTML (begitulah menurut para ahlinya). Selain itu penggunaan widget pun ternyata tidak terlalu baik terhadap valid XHTML ; contoh : widget kotak followers ternyata tidak valid XHTML.
Bagaimana cara cek blog yang valid XHTML? Caranya mudah, kunjungi saja situs http://validator.w3.org/, kemudian masukkan alamat blog sobat, nanti dapat terlihat berapa banyaknya yang error dan warning, blog saya memiliki sekian eror, sobat dapat cek sendiri untuk membuktikannya he..

Cara ini saya temukan dari SALAH SATU blogger yang sudah paham mengenai valid xhtml yaitu sobat  Hendro Prayitno, kenapa saya membahas beliau, karena template blog yang beliau gunakan 100% valid xhtml, jika tidak percaya silakan untuk cek sendiri mengenai template sobat Hendro.

Untuk membuktikan trik ini berhasil, setelah sobat cek di  http://validator.w3.org/, jangan langsung ditutup, nantinya tiap tahap yang sobat edit, lakukan lah refresh pada hasil cek yang pertama tadi, error ataupun warningnya berkurang atau tidak.

Warning : Disarankan untuk membaca terlebih dahulu langkah-langkah di bawah ini, jika sobat setuju maka lakukan sesuai tutorial yang ada/petunjuk yang ada di blog ini dan untuk mengantisipasi eror pada template, disarankan untuk backup template sobat terlebih dahulu.

Bagaimana Cara Membuat Template Blogspot Valid XHTML 1.0? mari simak tutorialnya :

1. Menghapus widget, seperti yang tadi saya paparkan di atas, bahwa ada beberapa widget yang disediakan oleh flatform blogspot yang tidak valid xhtml, hapus kotak followers, dan rubah tampilan arsip menjadi flat list

2. Mulai edit html, cari kode dibawah ini (terletak paling awal dari kode template)
<?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 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>
Hapus kode diatas, dan ganti dengan kode di bawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' 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>
Kemudian kembali lagi ke situs http://validator.w3.org/ dengan result/hasil eror sebelum di edit, refresh dan lihat hasil erornya apakah berkurang atau tidak.

3. Menghapus comment declaration

Ini adalah koment yang ada di css sobat harus menghapusnya tanda yang seperti ini yang ada di css
-----------------------------------------------
Hapus seluruh tandanya tapi jangan di hapus sang pembuat template contoh:
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Hapus -----------------------------------------------  (garis putus-putus) Maka hasilnya seperti di bawah
/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/
Lalu kebawah lagi cari tanda yang sama dan hapus, setelah semua di hapus jangan lupa save template kemudian kembali lagi ke http://validator.w3.org/ refresh dan lihat apakah erornya berkurang.

4. Mulai memasuki Expand Widget Templates.

Sekarang silahkan di centang Expand Widget Templates Lalu masukan kode di bawah tepat di bawah </head> INI untuk menghilangkan navigasi bar
<!-- <body><div></div> -->
Jangan lupa di save template
Nanti sobat temukan perintah apakah kita mau menghapus widget atau mempertahankan, (ini merupakan penghilangan navbar dari blogger "ternyata penggunaan navbar itu tidak valid lho") lalu pergi lagi ke http://validator.w3.org/ refresh dan lihat apakah erornya berkurang?

5. Hapus Quickedit
Hapus kode yang ada di bawah di dalam html, hapus semua kode <b:include name='quickedit'/> yang ditemukan dalam template :
<b:include name='quickedit'/>
kembali lagi ke situs http://validator.w3.org/ refresh dan lihat hasil erornya apakah berkurang
(pengaruhnya tanda obeng pada tiap widget akan hilang, tapi tidak masalah karena masih bisa edit di page elements)

6.Menghapus post icon
Sekarang temukan kode di bawah:
<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>
Kalau sudah ketemu hapus seluruh kode di atas dan ganti dengan kode di bawah:
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
        </b:if>

      </span>
      </div>
(ini merupakan penghapusan icon gambar pensil yang secara default sudah ada dari blogger "ternyata tidak valid ")
Save template dan kembali lagi ke http://validator.w3.org/ jangan lupa di refresh maka hasilnya adalah
Sampai disini semua tahapan telah selesai, apakah template yang di edit berkurang result erornya? semoga saja :)

-----Semoga Bermanfaat-----
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

11 komentar:

  1. tips-nya keren, saya coba praktek, tapi klau gagal tolaong bantuin ya mas

    BalasHapus
  2. nah ini dia yang saya cari.. manteb gan :)

    BalasHapus
  3. wah, jadi pengen belajar XML

    BalasHapus
  4. Wah saya pake template html 5 setelah diubah dokumennya pake transitional tidak bisa disimpan, bos. Ada saran lain biar dokumen xhtml template baru blogspot tidak eror html nya?

    BalasHapus
  5. bro, kegunaan valid xhtml buat apa...??
    thanks...

    BalasHapus
  6. @ Abdul Qohar
    kegunaannya agar template kita lebih ringan, intinya membuang kode2 yang tidak perlu dalam template dan membuat valid kode yang sebelumnya tidak valid, kebanyakan yang menggunakan template Valid XHTML ini adalah dengan tujuan SEO

    BalasHapus
  7. Makasih banyak gan buat tipsnya.. sangat berguna buat validasi xhtml blog..

    BalasHapus
  8. Salam Kenal....
    ilmunya bermanfaat banget buat aku..
    semoga aku bisa mempercantik bloggku...
    Mohon sekira bisa berkunjung ke blogku ditunggu masukannya....

    BalasHapus
  9. makasih kang atas penjelasanya

    BalasHapus
  10. Kang...saya HTML yg tidak Valid ada 200 an

    BalasHapus

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Membuat Template Blogspot Valid XHTML 1.0 Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top