Validasi HTML W3 Pada Blog

validasi HTML blog
validasi html


Sebelum kita melakukan validasi HTML w3 blog selayaknya kita mengetahui karakteristik template blog kita , karena ada beberapa validasi HTML kode yang tidak ditemukan pada beberapa template . namun hal itu tidak terlalu berpengaruh , mungkin cara ini tidak menghapus 100% kesalahan HTML blog namun dapat mengurangi secara signifikan sehingga blog anda mempunyai kesalahan HTML yang sedikit dan berkurang drastis saat sebelum memakai metode ini

Apabila anda belum pernah mencek kesalahan html blog anda , anda bisa melihat pada posting saya sebelumnya cara cek validasi HTML blog

Salah satu kelemahan terbesar blogger sebagai media weblog adalah format HTML dan CSS yang tidak bisa valid menurut W3C Validator.

Validasi HTML Blog


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 centang 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:

<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'/>

Catatan!
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 banyak menggunakan dash ( - ) pada HTML blog anda, 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. bila anda mendisable Default NAVBAR Blogger, lebih baik menghapusnya, 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 &amp; ( & ) dalam setiap URLnya, karena code tersebut tidak bisa berdiri sendiri dan harus di akhiri dengan ( ; ) pada HTML, solusinya gunakan code &amp;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 halaman 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.

Pada akhir antara </div> </body> masukkan script berikut untuk memvalidasi template anda.
<script src='http://gochati.com/resource/gochati_w3validator.js' type='text/javascript'></script>

9. pada setiap photo yang diupload ke posting anda akan menemukan kode ini
imageanchor="1"
maka hapus kode tersebut.

dan setelah melakukan validasi html di blog , maka lihat hasilnya!

Pin It!

fb comment box

33 komentar:

kolom lyrics mengatakan...

makasi tipsnya sob,,sangat membantu....

Unknown mengatakan...

sama-sama gan semoga bermanfaat

Anonim mengatakan...

hhmm kalo saya untuk masalah "doctype" - saya pakai ini mas :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html dir='ltr' lang='en-US'>

sekedar masukan aja, semoga sukses template nya lolos validasi dan menjadi HTML5. salam kenal?

Unknown mengatakan...

makasih gan masukannya .. salam kenal juga

Raindra mengatakan...

boleh juga nih gan artikelnya,saya cobanihyah
"lam kenalyah"\m/

Multi Blogging mengatakan...

Makasih buat tipsnya gan..

Info Tech mengatakan...

Infonya sangat bermanfaat gan.. Langsung ke TKP..

Alam Yuda mengatakan...

setelah menambahkan kondisional di nextprev, error dan warning di blog ku berkurang mas. tutorialnya sangat bermanfaat, terima kasih :)

Bloggermacz mengatakan...

Eror blog saya tinggal 4 mas,.tapi cuman di homepage aja,gak tau di postingan,.tapi gak pp yang penting udah lakuin yang terbaik,.maksih infox mas,.sangat bermamfaat sekali,.

Unknown mengatakan...

untuk blogspot tidak akan bisa sampai 100% valid nya karena formatnya yang HTML dan css .. kalau tinggal 4 itu sudah bagus sekali mas ..heu..

Bloggermacz mengatakan...

Iy mas,.aduh tadi mah sy cek pas blum ada postingan erorx cuman 4,pas udah ngepost eh erornya membludak naik jadi 20,.ckckckck

hehehehe,.tapi gk pp lah,.blogger tetap di hati :D

Unknown mengatakan...

hahahaha coba biasanya itu dari upload photo di posting nya mas huehe .. ayo berusaha barangkali bisa sampe 1 erornya .. kalau blog ini masih sampe ratusan erornya ,, males diurusin heheheh..

Lutfi A mengatakan...

kasih saran yang buat tanda & dong, aku bingung gimana ngurusin itu, kan di blog banyak banget &

Unknown mengatakan...

pake cara ini aja gan ctrl+f , nanti masukan kode & tekan cari .. nanti otomatis akan mencari sendiri kode tersebut .. biasanya kalau ditemukan akan di blck secara otomatis dengan berwarna hijau .. lalu anda block kode yang sudah ditemukan dan ganti dengan &amp; secara manual .. tapi mesti cermat dan teliti gan ..

Tablet Android Honeycomb Terbaik Murah mengatakan...

makasih gan info nya... sangat bermanfaat sekali bagi saya..

Unknown mengatakan...

sama-sama gan

Unknown mengatakan...

hmm trik yg bagus nih, plaing tidak bisa mengurangi error dan warning yah di w3c :D
makasih infonyaa ^^

Unknown mengatakan...

iya gan bisa mengurangi drastis kesalahan w3c ,, tapi tidak sampai habis hehhe

Mr.Randy mengatakan...

gan tempe gue gak ada adanya make id bukan name,pas gue coba malah gak bisa parse?itu ada caranya gak?

Unknown mengatakan...

make id apa gan ,, saya g ngerti pertanyaan agan ..

Ijal Fauzi mengatakan...

thanks ya info nya, alhamdulillah meski ngga langsung ngilangin semua error tapi ini berguna :D

Unknown mengatakan...

sama-sama gan

Sejuta Trik Blogger mengatakan...

walaupun belum valid, lumayan lah infonya. emang susah ya gan. salut aj dah buat yang blognya passed. =))

royansableng mengatakan...

udah berhasil gan
thanks ya

Dinbebe mengatakan...

Lagi di tkp gan,tapi nyari IDBLOGGERANDA gak

ketemu..yang mana ya ?? :(

kalo IDBLOGANDA am URLANDA dah dapet.:)

Makasih infonya gan...

Unknown mengatakan...

id blogger anda , anda masuk ke blogger.com , lalu ke dasbor , disebelah kiri ada photo pemilik blog dan dibawahnya ada beberapa link profile ,, anda cari lihat profile ,, biasanya diawali seperti ini http://www.blogger.com/profile/xxxxx(no id)

goesmenx mengatakan...

sobat, saya masih bingung nyari IDBLOGGERANDA

Catatan!
IDBLOGGERANDA = dapat anda jumpai pada alamat URL Profile Blogger anda.

mohon penjelasannya. trima kasih.
posting ini sangat bermanfaat untuk newbi seperti saya.

Ucup mengatakan...

Makasih ya..., lagi-lagi terimakasih

FLodesta mengatakan...

mantab gan, template saya berkurang errornya.

diare mengatakan...

mantap gan...tak praktekin langsung yah

Jefry mengatakan...

Cari template blog untuk wordpress dan blogspot yang valid kira2 dimana ya tempatnya, kalau tahu mohon share infonya gan..
terima kasih banyak

LP mengatakan...

waahh keren nih sharenya...

Agriculturproduct mengatakan...

haduhhhh.kok susah ya kayaknya mas.??

Posting Komentar

◄ Newer Post Older Post ►