Tuesday, August 10, 2010

Membuat valid XHTML 1.0 template blogspot

Membuat valid XHTML 1.0 template blogspot. Template blogspot ada baiknya valid xhtml, alasannya karena dengan valid XHTML maka dapat berpengaruh pula terhadap SEO. Dari kemarin zoel posting tentang optimasi SEO, maklum lagi jatuh cinta pada SEO (mdh2n cintaq dtrima..he). Ya walaupun memang zoel memberikan tutorial ini sedangkan zoel sendiri punya template tidak valid XHTML. Tapi sepertinya untuk membuat Valid XHTML tidak lah mudah, 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.



Sebenarnya gimana sih cara ngecek 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, klo blog zoel ini sih errornya masih terlalu banyak 172 Errors, 102 warning(s) , padahal zoel sudah coba beberapa trik ini di blog zoel. Tapi bisa saja ngaruh dari templatenya (he..)

Cara ini zoel temukan dari orang yang sudah ahli tentang masalah valid xhtml tentunya (blognya : hendro prayitno), terbukti deh kalo blognya mas hendro memang seratus 100% valid. keren kan??(soalnya zoel sudah ngeceknya,, he..)

sebelumnya makasih pada mas hendro..

Oia untuk membuktikan trik ini berhasil, setelah sobat cek di  http://validator.w3.org/, jangan langsung ditutup, nantinya tiap tahap trik sobat refresh, error ataupun warningnya berkurang atau tidak.

!!perhatian, lebih baik baca dulu langkah-langkah di bawah ini, jika sobat setuju maka lakukan sesuai perintah di bawah!! (atau untuk antisipasi backup saja terlebih dahulu)

1. Menghapus widget, seperti yang tadi zoel katakan di atas bahwa widget di blogspot ada beberapa tidak valid, hapus kotak followers, dan rubah tampilan arsip menjadi flat list

2. Mulai pengkodean
<?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>
ubah menjadi

<?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/ refresh dan lihat hasil erornya apakah berkurang.

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 ----------------------------------------------- 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 pokonya kalau ketemu kode ini hapus!!
<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 ga masalah toh 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 lho")
Save template dan kembali lagi ke http://validator.w3.org/ jangan lupa di refresh maka hasilnya adalah

Nah beres semuanya, template sobat sudah sedikit berkurang errornya kan?? selamat..
tutorial sederhana

No comments:

Post a Comment