Friday, March 09, 2012

Cara Mengurangi EROR HTML dan CSS Pada Tamplate Blog (VALIDASI DENGAN W3C)

Mungkin sebagian dari kita ada yang bertanya, apa pentingnya kevalidan HTML dan CSS ??
Dari REFERENSI yang saya baca, katanya kevalidan HTML dan CSS ini penting untuk mempercepat Loading blog kita saat dibuka. Selain itu Search Engine juga lebih menyukai halaman blog yang memiliki eror seminimal mungkin, sehingga posisi blog itu akan lebih baik secara SEO.
Untuk itu kita harus Cek Website kita dengan melakukan pengecekan tersebut. Buat rekan-rekan yang ingin melakukan pengecekan kevalidan kode
HTML/CSS blog anda dapat mengunjungi http://validator.w3.org/


1. Masukkan alamat blog kamu, lalu klik validate/revalidate.

Catat hasil eror yang dihasilkan
(Ini penting karena hasil itu akan kita bandingkan dengan hasil akhir nanti setelah kita melakukan trik-trik dibawah ini untuk meminimalkan eror HTML dan CSS blog kita).
Setelah kita melakukan pengecekan, tentu ada usaha kita untuk memperbaiki kode yang error.
Untuk itu silahkan anda ikuti langkah2 di bawah ini:
  • Login ke blogger Kalian --> Rancangan ---> EDIT HTML (centang Expand template widget)
  • Silahkan ganti "doctype" punya blogger (letaknya di awal kode template )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • selanjutnya cari code <b:include name='quickedit'/> dan hapuslah code tersebut
  • setelah kalian menghapus code di atas, kalian harus mencari code <b:include data='blog' name='all-head-content'/> kemudian mengganti  dengan code di bawah ini
<!-- Blogger Default Meta -->
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/IDBLOGGERPROFILEKALIAN' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGGERKALIAN' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGGERKALIAN/posts/default' rel='service.post' title='JUDULBLOG - Atom' type='application/atom+xml'/>
<link href='http://www.NAMABLOG.blogspot.com/feeds/posts/default' rel='alternate' title='JUDULBLOG - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->

Keterangan:
Tulisan : IDBLOGGERPROFILEKALIAN adalah ID anda saat membuka profil
Tulisan : IDBLOGGERKALIAN  adalah ID kalian saat melakukan edit HTML
Tulisan : NAMABLOG adalah URL blog anda

Mengurangi penggunaan kode strip/dash (-)
  • Untuk HTML 
<!------------------- Blogger Default Meta ---------------------->  SALAH

                      <!-- Blogger Default Meta --> Benar
  • Untuk CSS


  • /*----------- Header ------------*/ SALAH






    •      /* Header */ Benar




    • Simpan kode berikut dibawah kode </head>
        <!-- <body><div></div> -->

      Itu fungsinya untuk menghapus navbar blogger, kalau ada konfirmasi untuk menghapus, KLIK saja HAPUS. 

      Biasakan menggunakan tag alt pada setiap gambar.
      Contoh : <img alt='Tulis Keterangan disini' src='URL gambar'/>

      ******
      Setelah kamu selesai melakukan langkah-langkah diatas, silahkan simpan template anda.
      Setelah itu kembali ke http://validator.w3.org/
      Cek lagi eror HTML dan CSS blog anda.

      Lihat apakah eror yang ada tadi sudah berkurang atau belum.
      Berdasarkan pengalaman saya mengecek The Fox Rider sebelumnya didapatkan hasil 336 eror dan 246 warning, lalu setelah melakukan langkah-langkah diatas jumlah eror menurun cukup banyak, yaitu menjadi 102 eror dan 26 warning.

      semoga bermanfaat ya jangan lupa comentar dan sarannya....
      jangan tinggalkan spam.
      thank's ADMIN

      0 komentar

      Post a Comment