CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG
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 !!!!!
Baca juga : Mengubah Windows 7 Bajakan Menjadi Asli/Genuine dan Melacak Laptop & HP yang Hilang
Sob Saya Juga Post Article Tips Trick Validation For Blogger Dan Hasilnya Saya Terapkan Di http://news.notes-of-life.co.cc/ Menjadi This document was successfully checked as XHTML 1.0 Transitional! Coba Test Sendiri http://goo.gl/rgv1j
BalasHapusthanks buuaanget infonya .... sangat bermanfaat ...
BalasHapuskunjung balik yaa..
@ garasihotel : sama-sama...
BalasHapussaya pasti segera berkunjung, dtunggu aja gan....
@ Journalist Blog : Ok...
BalasHapusSaya sdh cek, kurang lebih sama dg cara yg ada di blog ini.
Mari kita minimalkan eror script blog kita agar makin baik kualitasnya...
Thanks, blog saya udah valid html 5. Tapi masih ada 4 warning yg sulit dihilangkan, ada saran buat hilangin pesan warningnya?
BalasHapusmakasi tipsnya sob.....
BalasHapus@ tipsaza : coba buang widget yang tidak begitu berguna, kadang widget bisa bikin eror.
BalasHapusKadang script verifikasi dari Google atau Yahoo juga dikenali sbg eror, kalau yang ini aku tetep biarin (gak ku-remove) biar ttp cepet terindex sm Google n Yahoo.
@ kolom lyrics : sama-sama sob...
bro ane mau tanya yg nomor satu itulohh,.,emang apa pengaruhnya ya ngubah doctypenya?
BalasHapus@ YPSr : itu gunanya agar script blog kita support sm versi yg lbh baru (transitional). Kalau make yg strict itu aturannya ketat, jadi bbrpa script dalam template kita bisa dikenali sbg eror.
BalasHapus@ RENO : sama2, smoga brmanfaat mas Reno....
makasih yah infonya, sekarang sudah berkurang.
BalasHapuskeren tips nya mas,
BalasHapusblog ane awalnya 149 Errors, 127 warning(s)
sekarang jadi 83 Errors, 50 warning(s)
o iya ane msh bingung dgn IDBLOGGERKALIAN itu diisi yg mana ya ?
klo profil kan nama di profil kita ?
iya mas saya juga msh bingung kyk mas rip666.maklim msh belajar..mohon di perjelas lagi om.TQ
BalasHapus@ anshari : yup, smoga bermanfaat.
BalasHapus@ RIP666 dan @ MR.W : IDBLOGGERKALIAN itu diambil dari ID kamu saat melakukan edit HTML (coba buka edit html, trus url-nya itu kan ada angka2, nah itu ID blogger kamu).
@ asmara : ok deh, smoga brmanfaat.
(btw, blogmu bagus, tingkatkan terus bro...)
wah makasih banget mas, ane ga sadar klo blog ID ada disana ehehehe,
BalasHapusklo 2 JUDUL BLOG kamu ga diganti jga kah ?
Infonya sangat bermanfaat, makasih udh dibagikan mas..
BalasHapusSalam Blogger,
Multi Blogging
Tipsnya sangat membantu mas, sekarang eror di template saya lumayan berkurang...
BalasHapus______________
Info Tech
Informasi yang sangat membantu untuk saya Mas.Makasih untuk infonya.
BalasHapusSalam kenal dari Papua!
Assalamu'alaikum..kawan-kawan saya mau minta saran dan krtikan tentang blogku ditunggu ya..saya blogger baru, makasih ya master..
BalasHapusbermanfaat banget, dari kmaren utak atik html n baru sekarang ketemu, thanks sob
BalasHapuskenapa dimana mana begini aja ya? punyaku masih banyak -_-
BalasHapustadinya aku make yang default meta tag diatas, terus tak buang tak ganti yg all head content lagi, eh errornya malah berkurang, mungkin default meta tagnya itu gak perlu
BalasHapusyg html 5 ad gk?
BalasHapus@ All : Selamat bereksperiment dg meta tag di blogmu kawan, pokoknya usahakan minimalkan sedikit mungkin eror yg ada, karena algoritma Google skrg mempertimbangkan seo onpage dg baik. ini sdh saya buktikan di blog2 sy yg lain.
BalasHapus@ cek info : HTML5 merupakan pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, HTML5 merupakan salah satu karya W3C, dan cara diatas itu memang disesuaikan serta di cek menggunakan validator w3c, jadi sudah relevan dg perkembangan script yg ada.
BalasHapussilahkan dicoba...
apa kekurangannya pabila kita mengedit html default seperti contoh diatas ?
BalasHapusmisalnya ketika kita menghasup quick edit
@ tergaptek : tidak ada kekurangannya. paling cm kita akan ksulitan jika kpengen edit langsung lwt quick editnya.
BalasHapusmakasi infonya mas
BalasHapusmas, saya terlanjur menghapus smua jadinya susah ngedit entri... gmn ya cara pasangnya lagi (khusus untuk edit entri secara cepat aja. mohon petunjuknya... maklum gaptek... belajar cuman dari mbah google...
BalasHapus@ sidrap : sama2 mas...
BalasHapus@ novi : wah, saya juga blm pernah nyoba mengembalikan yg buat edit entry. Saranku sih km backup dulu semua widget blogmu, trus upload lagi theme blogmu dg theme yg baru, ntr kan masih lengkap tombol edit entry-nya.
Terakhir baru kamu edit lagi utk mengurangi eror css-nya.
Tips yang sangat bermanfaat...lanjutkan mas...kalo berkenan silaturahmi ke my blog GUITAR-ID. Thanks
BalasHapusMakasih infonya kawan,sangat bermanfaat untukku.Salam kenal,salam erat persahabatan.Happy weekend and happy blogging.
BalasHapusmaaf sob.... kenapa tingkat errornya makin banyak... gimana tuh lanjutanya...thank infonyo
BalasHapusterima kasih banyak infonya...
BalasHapusblog saya (http://yusrandante.blogspot.com/)sebelumnya 250 error dan 84 warning, setelah saya lakukan petunjuk di atas, errornye berkurang menjadi 90 error dan 63 warning....
Oke cuy ane coba dolo
BalasHapusthank's
terima kasih bro...sangat bermanfaat sekali...dah q coba n' brhasil...
BalasHapusSangat bermanfaat. teruutama penggantian !DOCtype*.*
BalasHapusNice Share gan...
PUSING BOSSSSS
BalasHapusMantap Gan Berhasil Berkurang
BalasHapussekarang jadi 81 Errors, 90 warning(s)
trus sisanya gmn gan lanjut gan tipsnya buat yg masih baru, thank's yah
makasih gan infonya punyaku 124 error gan aku coba tapi kok gag ada yah di blogku
BalasHapusmantap, berhasil
BalasHapusSemua cara diatas sdh dilakukan, lumayan errornya sdh Berkurang walaupun masih ada error yg tersisa
BalasHapusSemua cara diatas sdh dilakukan, lumayan errornya sdh Berkurang walaupun masih ada error yg tersisa
BalasHapussaya udah ikuti langkah2 diatas.. ko erornya malah tambah banyak
BalasHapus<!------------------- Blogger Default Meta ----------------------> SALAH
BalasHapus<!-- Blogger Default Meta --> Benar
lebih baik di hapus saja mas kode di atas, toh juga tidak berguna. hanya judul meta sebagai pembatas. untuk kode <!-- <body><div></div> --> kadang itu gak mau di pasang di template. tapi bisa di hilangkan dengan kode navbar-iframne. maaf ini hanya masukan dari seorang sahabat blogger. makasih atas artikelnya. salam persahabatan blogger. mahesa (makin hebat saja) buat blog ini
punya saya error 208 warning 206, ok saya coba dech sapa tau bisa berkurang, terimakasih mas wahyu..
BalasHapussip banget :D
BalasHapusthanks'
BalasHapusdulu templatku ada 300an error,dan ternyata kebanyakan error terjadi karena beberapa widget,stlh beberapa widget aku hpus akhirnya tinggal 100an,tetapi masih ada beberapa widget yang error,sprti popular post,archive,comment,profile,nah jika widget trsebut aku hpus..mungkin blogku gundul alias kosongan..jadi aku biarkan.
BalasHapusUntuk kode inipun ada 10 error
sorry bro ada tambahan lagi..agar widget yang kita pasang tidak error gmn caranya?
BalasHapusthanks gan atas infonya
BalasHapusdi template blog ane kalau
BalasHapusdiganti dengan script diatas jadi ga bisa quick edit.
I am very happy to see you here. Thanks for share your thought about blogging. And the best part of it, we all in the warmest community and find the greatest people like you, my friend. I am proud to be your friend here. God bless you.
BalasHapusBerbagi itu indah, trims
BalasHapusthanks banget tutorialnya om, walaupun masih banyak errornya tapi tetap gw coba untuk perbaikinya, dan tutorial ini benar2 sangat membantu.... thanks......
BalasHapusinfo bermanfaat gan!
BalasHapusterimakasih ane dah cobain mantap 210 eror tingal 73
BalasHapus227 warning tingal 76
maklum gan pendatang baru
wah info bagus bgt nih gan, btw bisa bantu saya untuk mengatasi hal ini gak gan?
BalasHapusAn "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Suer dah mumet bgt nih cara benerinnya.
makasih...dah ane coba semua...salam kenal : www.pembuatandesign.web.id
BalasHapusgak sukses mas bos tu malah nambah banyak error di template yg saya pakai...minta tips baru.y dunk
BalasHapustq mas tripnya...
BalasHapus. . nyoba achhh . .
BalasHapusom wahyu,bantu donk,saya ini pemula masalh blogger,,saya mengalami masalah saat edit html nya,,saya menggunakan blogspot,
BalasHapussaat edit html selalu keluar tulisan "Kesalahan saat mengurai XML, baris 2, kolom 123: Content is not allowed in prolog." bahkan kadang kadang keluar tulisan,maaf kami tidak bisa menyelesaikan perminttaan anda untuk mengunjungi bantuan blogger laporkan kode kesalahan x- dan lain sebagainya pak wahyu,,mohon pencerahannya ya,,kalau bisa di email dong pak wahyu ke awaneui@gmail.com..trima kasih sebelumnya
nice post,, mhn knjugn blik,ane btuh bgt saran dri gan al na blog ane lelet,, ok
BalasHapusAssalamualaikum...
BalasHapusMas Wahyu" Kalau cara cek id Profil Blog gimana yah?
saya masih belum faham...
Balas bisa lewat E-Mail Facebook, m_zakariabinsaad@yahoo.com
http://www.ilmukomputer95.co.cc
waduh masih sulit juga ya, belum ada cara yang gampang , lupa , thanks gan infonya
BalasHapusthnx info'a gan error'a berkurang tapi translation'a tetep di bilang not found tpi nice post lah...
BalasHapuskunjungi jug blog saya
wah... sangat bermanfaat dan terbukti pada blog saya muhmuqorrobinist.blogspot.com
BalasHapusthanks gan... sekarang error nya dah berkurang salut!!
mantab gan coba yak
BalasHapusboleh juga nih,, jgn lupa tipsd dari saya bro..
BalasHapussip infonya gan,,,sudah saya laksanakan,,,trima kasih infonya gan,,kunjungan balik gan ya
BalasHapusgan kok setelah ada konfirmasi hapus,terus saya hapus,kok malah postingan saya ilang ? sidebar sebelah kanan jadi di kiri,yang kanan kosong tanpa postingan saya :(
BalasHapus44 errors dan 71 warning sob :)..thanks in advance
BalasHapusizin nyontek sebagai rujukan untuk belajar merapihkan blog dari error html 5. thanks mas
BalasHapusini yang saya cari,, trima kasih banggg....
BalasHapusHem rumit juga buat memvalidasi HTML ya Gan, apalagi kalau latar belakang pendidikannya bukan dari IT
BalasHapusdi template ku ada beberapa yang tidak ada gan
BalasHapusmakasih mas.. error html berkurang..
BalasHapuswork 100%
Mantap gan, itu trik di atas berlaku untuk semua template blogger ya.. ane pake mxfluity :) ketemu 58error dan 1 warning
BalasHapusErrors found while checking this document as HTML5!
Result: 58 Errors, 1 warning(s)
Address: http://discoversumatra.blogspot.com/
Encoding: utf-8 (detect automatically)
Doctype: HTML5 (detect automatically)
Root Element: html