Mungkin sebagian dari kalian ada yang bertanya, apa pentingnya kevalidan HTML dan CSS?
Dari
beberapa referensi yang saya baca, katanya kevalidan HTML dan CSS ini
penting untuk mempercepat looding 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 mari kita cek site kita dengan melakukan pengecekan tersebut. Buat
rekan-rekan yang ingin melakukan pengecekan kevalidan kode HTML/CSS blog
anda dapat mengunjungi http://validator.w3.org/
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).
 |
| Validasi blog.wahyu-winoto.com |
(Gb.
1. Hasil pengecekan eror blog saya sebelum dilakukan trik pengurangan
eror HTML/CSS. Disana terlihat hasil 168 eror dan 176 warning).
CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG (VALIDASI DENGAN W3C)
Setelah kita melakukan pengecekan, tentu ada usaha kita untuk memperbaiki kode yang error.
Setelah kita melakukan pengecekan, tentu ada usaha kita untuk memperbaiki kode yang error.
Untuk mengurangi eror HTML dan CSS blog anda silahkan anda ikuti langkah2 di bawah ini:
1. Login ke blogger Kalian --> Rancangan ---> EDIT HTML (centang Expand template widget)
2. Silahkan ganti "doctype" punya blogger (letaknya di awal kode template )
Kode terusannya seperti di bawah.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ganti kode diatas dengan kode berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. Selanjutnya cari kode berikut :
<b:include name='quickedit'/>
Hapus semua kode tersebut yang ada pada template kalian
4. Sekarang cari kode berikut :
<b:include data='blog' name='all-head-content'/>
Ganti dengan kode berikut :
<!-- 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://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
5. Mengurangi penggunaan kode strip/dash (-), hapus Dash pada script template anda.
Untuk HTML
<!------------------- Blogger Default Meta ----------------------> SALAH
<!-- Blogger Default Meta --> Benar
Untuk CSS
/*----------- Header ------------*/ SALAH
/* Header */ Benar
6. Simpan kode berikut dibawah kode </head>
<!-- <body><div></div> -->
Itu fungsinya untuk menghapus navbar blogger, kalau ada konfirmasi untuk menghapus, KLIK saja HAPUS.
7. Biasakan menggunakan tag alt pada setiap gambar.
Contoh: <img alt='Tulis Keterangan disini' src='URL gambar'/>
8. Tambahkan kode CSS seperti ini pada CSS template blogspot Anda (Tempatkan diatas kode ]]></b:skin> )
.quickedit{display:none}
9. Selanjutnya, cari kode HTML berkut:
<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>
<b:include data='post' name='postQuickEdit'/>
</span>
Lalu ganti menjadi seperti ini:
<span
class='post-icons'> <!-- email post links --> <b:if
cond='data:post. emailPostUrl'> </b:if> </span>
10. Nonaktifkan tampilan versi mobile blog Anda
Biarkan
versi desktop saja yang tampil ketika blog Anda dibuka dari browser
ponsel, karena versi mobile blogspot mengandung banyak error alias tidak
valid.
 |
| Nonaktifkan versi Mobile |
******
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 http://blog.wahyu-winoto.com
sebelumnya didapatkan hasil 168 eror dan 176 warning, lalu setelah
melakukan langkah-langkah diatas jumlah eror menurun cukup banyak, yaitu
menjadi 68 eror dan 43 warning.
 |
| Eror berkurang Drastis |
(Setelah
melakukan langkah-langkah diatas jumlah eror pada HTML/CSS blog saya
menurun cukup banyak, yaitu dari 168 eror dan 176 warning menurun
menjadi 68 eror dan 43 warning.)
Bahkan jika anda mau lebih teliti lagi maka eror yang ada akan bisa ditekan menjadi lebih sedikit lagi, coba saja cek eror blog www.wahyu-winoto.com
DEMIKIAN SEDIKIT SARAN CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG, SEMOGA BERMANFAAT !!!!!
mantab nih gan sharenya langsung coba yak hehehehehe
BalasHapusmakasih bang..
BalasHapus