Step by Step Validasi Blogger. Mungkin salah satu kelemahan terbesar blogger sebagai media weblog adalah format HTML dan CSS yang tidak bisa valid menurut W3C Validator. Padahal validasi itu sendiri diperlukan untuk mendapatkan design weblog yang mendekati sempurna selain beberapa aspek lain yang tidak kalah penting. Setelah beberapa lama menyimpan artikel ini kini akan saya ulas dibagian Blogger Tutorial, di bantu seorang sahabat dari Deconstructioncode om Choen.
Satu hal yang perlu diperhatikan sebelum melakukan Validasi pada template Blogger yaitu karakteristik tiap template yang berbeda, jadi jangan kaget jika ada beberapa code yang tidak anda temukan dalam template anda. Selain hal tersebut ada juga bagian yang sering dilupakan yaitu pemakaian widget yang tidak valid, tentunya hal tersebut menambah daftar error dalam validasi weblog anda. Terlalu banyak kalimat pembuka, mari kita lanjut ke Step by Step Validasi Blogger. Jangan lupa save template sebelum edit lebih lanjut, jaga-jaga kalau terjadi error pada template anda. Pada tab lain buka halaman HTML Validation W3C untuk melihat seberapa banyak error yang tersisa dan letak kesalahannya.
1. Pada Edit HTML "doctype" default blogger mempunyai tingkat kesulitan untuk menjadi valid, Solusinya ganti
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
dengan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Pada Edit HTML contreng expand template widget lalu cari code
<b:include data='post' name='postQuickEdit'/>
dan
<b:include name='quickedit'/>
selanjutnya hapus semuanya. Fungsi code tersebut adalah icon Quick edit pada masing-masing widget, beberapa blogger hack bisa mendisable atau menghilangkan icon tersebut namun link edit widget itu sendiri adalah error karena mengandung code & yang tidak di tutup oleh ; sehingga menghasilkan error.
3. Jangan lupa tambahkan tag ALT pada setiap image yang terdapat pada weblog, sekecil apapun image tersebut. Hal ini dimaksudkan agar Image tersebut tidak hanya berfungsi secara visual, namun dapat di baca oleh robots. Selain itu jangan lupa untuk menggunakan penutup tag tersebut dengan attribut /> sehingga bisa mengurangi error pada html validation.
4. Jangan gunakan widget Archive menggunakan tampilan Hierarchy, karena itu akan menampilkan banyak error. Lebih baik gunakan Model List sehingga mengurangi error, selain itu tampilannya akan lebih simple dan elegant.
5. Berhati-hati dalam menggunakan langkah berikut ini, pastikan anda tidak salah dalam melakukan copy paste karena sedikit perubahan dapat mengakibatkan error.
Cari code
<b:include data='blog' name='all-head-content'/>
Ganti code tersebut dengan code berikut 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/IDBLOGGERANDA' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGANDA' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGANDA/posts/default' rel='service.post' title='OBLO - Atom' type='application/atom+xml'/>
<link href='http://www.URLANDA.blogspot.com/feeds/posts/default' rel='alternate' title='OBLO - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->
Perhatikan!
IDBLOGGERANDA = dapat anda jumpai pada alamat URL Profile Blogger anda.
IDBLOGANDA = dapat anda jumpai pada alamat URL edit Html Blog anda.
URLANDA = isi dengan url blog anda.
6. Jangan terlalu banyak menggunakan dash ( - ) pada HTML blog anda, memang akan terlihat indah jika kita menambahkan beberapa code ASCII disana, namun sadarkah anda itu hanya akan menambah jumlah error pada HTML / CSS anda.
Gunakanlah sesederhana mungkin.
HTML
<!------------------- Blogger Default Meta ----------------------> SALAH
<!-- Blogger Default Meta --> Benar ( terlihat simple dan rapi )
CSS
/*----------- Header ------------*/ SALAH
/* Header */ Benar
7. Banyak yang mengeluarkan trick untuk mendisable Default NAVBAR Blogger, tapi bagaimana kalo kita hapus saja Navbar tersebut. Karena walaupun di hidden / disable, link yang terdapat didalamnya akan tetap terbaca. Letakkan code berikut diantara </head> dan <body>
<!-- <body>
<div></div> -->
setelah itu save template, maka akan keluar notifikasi untuk menghapus Widget Navbar. Done you lost the Navbar. :)
8. Sebetulnya masih banyak yang perlu di benahi dalam blogger terutama penggunaan & ( & ) dalam setiap URLnya, karena code tersebut tidak bisa berdiri sendiri dan harus di akhiri dengan ( ; ) pada HTML, solusinya gunakan code &amp;.
Dengan melakukan beberapa step diatas anda tidak akan memperoleh hasil yang valid dari blogger karena beberapa bagian penting dari blogger sendiri itu mengandung ERROR. Kita bisa mengakalinya dengan menghapusnya, namun fungsi dari widget yang kita hapus tersebut tidak bisa berjalan dengan sempurna. Beberapa bagian blogger yang cukup mengandung banyak error adalah Comment box dan link Comments yang lagi lagi menggunakan code ( & ). Selain itu pada halaman index terdapat juga error pada navigation page ( New and older post ).
Untuk menghilangkan Navigasi newer dan older post pada halam index, dapat menggunakan trik berikut ini. Cari code dibawah ini
<b:include name='nextprev'/>
ganti dengan
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
Catatan: Jangan lupa cek error blog anda pada W3C HTML Validator untuk mengetahui sisa kesalahan anda tiap kali melewati Step by Step Validasi Blogger.
Thanks to: Deconstructioncode, TheYoBoo.
80 Comments for Step by Step Validasi Blogger:
wah lengkap bos
akan saya coba pada blog saya yang errornya laur biasa banyak :D
@Ihsan .: monggo mas di sedot ilmunya, dengan kemampuannya pasti mudah untuk dipahami dan di validasi. suwun dah mampir.
meuni lieur Bos..shauhsuahshauhsa. Validasi teh naon deui...xixixixixix biar valid yah hohohohoh
wot hepen wit yur blog...melorot sidebar e nek tak buka nganggo chrome
mbok ya di validasi dhisik wkwkkwkwkwkw.. aku ae ra tau validasi..maklum amatir
aduh.. mungkin habis tak lebarin content wrappernya kali ya bong, soale di mozilla lancar ga ada error.. susah juga ya.. tar tak cek lagi di cssnya..
solusi paling gampang,, kowe pindah wae nganggo mozilla. :p
mau coba praktek ah, tks infonya bro :)
Mas Denny, blog saya setelah di validasi nemuin 37 Errors, 25 warning(s)dan 'kalau pake cara poin ke 5 error-nya berkurang namun Feed Validator jadi error, kenapa ya?
@bukulogi .: di tempat saya pakai cara yang sama, valid. tapi memang ada recomended dari W3C.
mungkin ada yang salah dari penempatan IDBLOG / IDBLOGGER nya mas. coba di cek ulang, kalau ada kritik saran silakan di utarakan saja. disini kita sama-sama belajar kok..
Wah dapat ilmu lagi disini.. mantab pokokke..
Makasih dah mampir....
wah aku terapin metaNya wahhhhhhhhhh, malah ilang tittle blogku. tolongin donk bozzzzzzzzzzz. piye iki. help mememememe.......
kunjungi blogku untuk membantuku. pleaseeeeee
makasih infonya mas .... bookmark dulu ya ...
mantep nih tutornya, cuma untuk yg bermain Teks Link Ads..upssss
hati2 mengganti kode
<b:include data='blog' name='all-head-content'/>
siap-siap ga ke detek sama mesin TLA nya alias $$$ nya bakal di sunat ( pengalaman pribadi..hihih )
wow. makasih kang rohman dah mampir disini.
oh begitu ya ceritanya, pengaruhnya ketika mengikuti TLA. terima kasih masukannya omz.
terus bisa di ketahui ga TLA itu melihat dari bagian mana ? penasaran aja si, disini kan all head content tak hapus, terus tak edit ulang sesuai dengan yang ada waktu kita pakai code tersebut.
Hmm. lupa lagi apa errornya. cuma yang jelas, mesin mereka menyangka bahwa link iklan mereka tidak terpasang di blog kita.
hmm gitu ya, thanks oms. mungkin mereka kehilangan feeds yang digunakan ketika cek posisi link yang terpasang ya. tapi ga tau juga. solusinya balik lagi ke template clasic :D
untungnya saya gak main iklan apapun kang rohman
makasih mas deni bermanfaat sekali
Awesome...gokil deh bro. Tetapi ini sebagian saja y. Soalnya error gw ada 700 lebih tuh. Memang lebih banyak di bagian '&' itu. Haruskan semuanya diganti satu persatu.
terus gw agak takut takut menghilangkan dan mengganti beberapa bagian. hehehe...
@Biyan .: sabar bro, memang harus mengganti satu persatu. konsentrasi aja di saat mengedit ini, tapi hasilnya memuaskan kok. biasanya 1 code yang error bisa terdapat lebih dari 1 yang terdeteksi, jadi misal kita sudah membenahi satu code errornya bisa berkurang mungkin 10 lebih.
tetep berusaha ya..
Kang Rohman Said
"mantep nih tutornya, cuma untuk yg bermain Teks Link Ads..upssss
hati2 mengganti kode
siap-siap ga ke detek sama mesin TLA nya alias $$$ nya bakal di sunat ( pengalaman pribadi..hihih )"
selain itu postingan juga susah ke indeks
webmaster errorr dan lain lain
jadi jangan sampek menghapus atau mengganti kode itu
tambahan aja sob dari saya yang cuma blogger pemula hehehe moga aja ada manfaatnya
@Blogger Pemula .: memang si ada beberapa code yang terhapus, namun code itu bisa di backup dengan menuliskannya secara manual. bukannya di template clasic malah ga ada code2 macam ini? yah semoga ga terlalu kacau di SERP. kalo postingan ga keindex alhamdulillah cuman beberapa kali kena google sandbox tapi dah normal kembali, dan saya kira penyebapnya bukan ini.
thanks masukannya, mungkin ada yang bisa memastikan?
Benar juga sih. Pada template klasik gak ada kode seperti itu. Masakan blogspot mau membiarkan template klasik gak keindex.
Kemungkinan besar sih bukan itu.
Kalo saya masih optimis di pemakaian link feeds sebagai penggantinya, karena memang itu yang mengatur singkronisasi antara postingan dan feeds. dengan menghapus code tersebut dan menggantinya secara manual meminimalisir adanya error pada blog.
Sipzzz Bosss... Saran anda bener bener manjur... Terima kasih banyak yach.. Succes.
mampus loh, aku tok sing ijek garuk-garuk sirah nang kene. arep belajar tapi ndelok komentarnya malah jadi bingung. mas mas, arep tanya aku. kira2 pengaruhnya ke SERP gimana mas ya kalo error template kita terlalu banyak??? maklum lagi balapan SEO nih. lawannya WP self hosted semua :(
SEO itu tergantung sudut pandang kok mas.. semua benar karene "Menurut saya" :D
ini Menurut saya juga ya, google suka blog yang bersih dalam artian tersusun rapi atau istilahnya sesuai dengan acuan ( valid ). namun banyak unsur lain yang juga di pertimbangkan google untuk bisa meraih posisi serp yang baik. ada backlink, kwalitas konten dan jangan lupa penempatan keyword yang tepat sehingga enak di baca.
Mas, kalo navbarnya dihapus, apa nggak ngelanggar TOS Blogger?
Bisa di-banned nggak sama google kaklo seperti itu...?
Mohon pengarahan.... Maklum, anak baru....
Mengenai navbar yang di hapus, apakah melanggar TOS blogger saya sendiri belum tau pasti. Tapi beberapa antisipasi telah saya lakukan antaralain backup template dan postingan, sehingga bila sewaktu2 terjadi hal2 yang tidak diinginkan kita bisa mengimport kembali artikel.
tapi menurut pengamatan beberapa teman, masalahnya bukan pada navbar akan tetapi pada konten dan beberapa backlink farm yang mungkin membuat google jengah. belum lagi artikel copas atau artikel2 lainnya yang berhubungan dengan lend*r. rasanya terlalu dangkal kalo hanya gara2 navbar blog sampai di hapus, tapi ini hanya Opini..
thanks
makasieh........
thanks buat infonya, tulisan ini menunjukan keahlian uji coba karakter blogspot. sangat bermanfaat. trimakasih sob..
makasih infonya kebetulan blog-ku errornya buanyak bangets...!!
link-nya dah dipasang kalo berkenan tuker link , kalao ndak yang ndak pa pa... soalnya aku yang butuh... he he he ..! buat referensi kalo lagi ada errort.. .. makasih..!!
mantebs om, bener2 selangkah demi selangkah :D
Ikut Nimbrung ah...
Ardi Firgi...
Mas, kalo navbarnya dihapus, apa nggak ngelanggar TOS Blogger?
Bisa di-banned nggak sama google kaklo seperti itu...?
Mohon pengarahan.... Maklum, anak baru....
Mestinya melanggar ya, dan lebih tepatnya kita bisa dibilang tidak menghargai template bawaan dari blogger. Tapi Selama ini yang saya rasakan tidak ada pengaruhnya di SEO dan tidak di banned sama google..buktinya punya saya masih eksis, cuma kalau mengganti all-head content seperti langkah-langkah di atas emang sangat riskan..
Terimakasih master..... ini sangat membantu buat templet yang yang saya pakai saat ini.
yes, selesai sudah template valid so far!!!
tapi yang mau saya tanya, apa ini juga pengaruh di seo ya??
kok juara "mobil keluarga ideal terbaik indonesia" masih banyak errornya????
huft, gimana guru???
terima kuasih buanyakkkkkk prof.
nuwun
Trims buat tipsnya.
piye seh carane pas nok single post cek iso melu valid sisan...???
@sambel teri .: disable comments, hide nextPrev
@ Denny : waduh.... disable comments...??? kolom kotak komentar juga penting sich,,, g mana yak...
@sambel teri .: sebetulnya yang bikin error dari blogger itu adalah susunan linknya yang menggunakan code "amp" jadi dia terbaca error pada validasi.. dan code itu dipake pada kolom komentar :D
@ Denny : Thank's dah buat infonya
wah tutorial ini bagus banget, buat kita2 yang memang ingin blog kita tampil perfect tanpa error. apalagi untuk yg baru bikin blog.
Error tinggal 1, warning 7. Udah mentok gak bisa lagi. Ada saran. Komentar yah di blog ku. Thanks.
Thanks sob...
error'a berkurang...
salam kenal...
Lumayan banyak blog yg bikin artikel seperti ini, isinya juga hampir sama. Nah, yg masih dikuatirkan oleh blogger yaitu menghilangkan navbar yg jelas-jelas melanggar TOS dari Blogger dengan konsekuensi penghapusan blog oleh Blogger Team dari Google. Serba salah kalau navbar tidak dihilangkan error html nya lumayan banyak tapi kalau dihilangkan melanggar TOS.
@tipsaza .: saya rasa hanya beberapa yang bikin artikel seperti ini, kenapa? karena rata2 mereka hanya menyembunyikan NavBar dengan CSS display:none sedangkan ini di del sampe akar2nya :D
entah ini melanggar TOS atau enggak dan apakah dipermasalahkan oleh blogger atau enggak setau saya beberapa temen blogger yang notabennya senior juga melakukan hal yang sama dan alhamdulillah sampe sekarang masih baek2 saja. :D
btw blogger menginject 1 scripts lagi yang bikin error.. tapi lom ketemu solusinya neh :(
fdgdfgdfg
Setelah menerapkan tips ini, error di blog saya jadi berkurang sekitar 50 error. :)
Kopas....kopas.....kopas..........................................................................................KOPAS
mantap mas bos, saya coba nih
horeee W3 ane berkurang errornya!! mksh tutornya mas broo.. :D
joss mas tapi yang untuk Navbar ndak saya delete cuma saya hidden saja cukup....tapi thanks banget mas atas artikelnya kerena ehh karena saya memang membutuhkan artikel ini untuk optimalkan SEO on page saya
aku tidak menghilangkan navbar blog akhirnya :) itu maksudnya setiap ada kode & di edit html blog seharusnya pakai kode & biar valid ?
KODE
jadi muncul paling puncak di blog ane,pas abis di pasang blogger default meta.why nya kang?
Makasih mas infonya. Salam kenal!!
@lavhalitya .: iya code & tidak valid di validator, karena berfungsi ganda :D
@jasmin .: periksa lagi code yang dimasukan, mungkin ada yang html yang ikut masuk :)
@all .: thanks untuk yang masih visit my blogs walau udah ga pernah update dikarenakan bosan akut. :( keep in spirit ya
jankrik!!!!!!!!!!!!!!
ada yang salah nie.
templatenya belum aq back up.
salah hapus kode.
ambyar semua..
coba dilihat nie... T.T
apa dampaknya si bang klo template kita eror..??
Sungguh-sungguh dan sangat berharga buat saya mas.
terimakasih banyak
salam hormat
Taman Bacaan
Saya gak ngerti bahasa css dan html (cuma sedikit). Btw, ttg w3c validation, sya cuma bisa ngurangin 100-an error. Selebihnya, angkat tangan deh, hhehe. Tapi sebelumnya, wkt validasi saya emang blm ngasih centang pada option yg tersedia... Sya coba deh kalo gitu, Tks....
sadapppppp oam... thnks banyak dah... lumayan buat sedikit mengurangi error..hhehe.
Gan, tahu gak cara hapus link ini ditemplate ane? 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'
soalnya redirect terus setelah di hapus :(
organi sasi bocah lali omah :)
makasih trik n tipsnya mas :)
thanks gan uda saya coba n sukses
Terima Kasih banyak atas tutorialnya,
Sangat membantu.
template kita sudah valid html 5, kalo ada yang bisa dibantu mungkin saya sedikit bisa bantu,,
terima kasih banyak atas tutorialnya mas
salam kenal ya
Sudah saya coba, dan hasilnya memang ada pengurangan error. Terimakasih gan.
Sudah saya coba, dan hasilnya memang ada pengurangan error. Terimakasih gan.
Sudah saya coba, dan hasilnya memang ada pengurangan error. Terimakasih gan.
thank info nya mass
makasih sob triknya
ternyata code asli dari blogger ada yang error juga ya..
thanks infonya..
Makasih gan Eror html blog saya bisa dipres walaupun jumlahnya masih ratusan yang eror. jadi pusing untuk menghilangkannya.
Sangat membantu sekali. dengan menggunakan trik ini blog saya erornya semakin berkurang. apa ada trik yang bisa membuat eror html ilang sepenuhnya atau Jumlahnya sekitar belasanlah ?
terima kasih sudah berbagi
termkasih gan..salam kenal gan..
Nice posting.. ane udah terapin n tinggal 2 errors & 5 warning(s) (cuma 2 minggu aja)..
saran aja untuk smua yg mau coba utak atik html (menurut pengalaman sendiri):
- Dengan mengikuti tutorial di atas, saja jamin error sudahh pasti berkurang
- Untuk masalah menghilangkan navbar, ane kurang setuju. Ane sendiri masih takut untuk menghilangkannya krn ada beberapa alasan yg buat ane msih sangsi (googling aja biar tau). Mending di hide aja.
- Hapus aja kode html "Diberdayakan oleh Blogger" karena berdasar pengalaman, setelah ane hapus error langsung berkurang (sebelumnya ada 2, jadi ane hapus salah satu)
- kebanyakan error berasal dari widget yang agan2 pasang. Silahkan dicek aja cz ntar klo ada error bisa dibenerin berdasarkan panduan error dari validator.
- meski sepele, penulisan judul posting dengan simbol sangat tidak dibenarkan, terutama simbol-simbol yang mirip atau sering digunakan dalam html misal "&"
- jangan menambahkan kode css di tag body. silahkan dipindah di bagian tag header saja.
- ada beberapa error yg mungkin tidak bisa dibenerin krn memang bukan dari kita tapi dr blogger sendiri (sebagai contoh adalah dr situs ini atau situs ane)
- terakhir, silahkan googling aja cari situs lain yg bhs ttg validasi htmlc(maaf bukannya ane ngremehin posting www.oblo.web.id) untuk sekedar cari informasi lain krn saya sendiri juga cari referensi lain terkait error yg masih ada di blog ane..
Posting Komentar
Spam is not Good for your Body :)