Membuat Blog Lebih Valid XHTML

Viyan Pradita Sabtu, Mei 07, 2011 , ,

Pastilah sobat semua sudah tahu maksud dari judul yang diatas, setelah membaca artikel kesana-kesini, terlebih dahulu saya praktekkan ke blog saya ini, awalnya design template ini (standart) sudah Valid XHTML, tp hanya untuk halaman HOME-pagenya saja, karena pada blogger untuk form komentar tidak bisa di utak utik lagi. untuk mengeceknya di template valid XHTML ini hanya terdapat hanya terdapat 2error dan 2warning saja.
Bila Sobat berminat, sobat bisa melihat demo dan mendownloadnya langsung di blognya sobat @Choen disini : Template Valid xHTML


Nah karena blog saya sudah berisi postingan dan banyak widget, tentu saja banyak error/warning untuk valid XHTML, dan harus dibenahi kembali. Serta dikarenakan fitur-fitur default dari template blogger yang kurang bersahabat dengan XHTML.
Yasudah kita mulai saja dari awal, cara ini saya dapat dari berbagai sumber, dan ini berdasarkan apa yang saya tahu dan saya praktekan di blog saya ini, hasilnya... bisa kita lihat nanti.

Langkah pertama kunjungi website berikut untuk mengecek valid XHTML,
Silahkan kunjungi disini:http://validator.w3.org
Setelah masuk dan muncul seperti gambar dibawah ini:

screenshot


Setelah itu masukan alamat url blog sobat, dan klik CHEk... lihatlah hasil reviewnya, bisa sobat lihat berapa jumlah error dan warning blog sobat, sedikitkah?? banyakkah?? nah kalau banyak berarti selamat, hasilnya sama kayak punya saya.. hahaha ^^

ini hasil dari blog saya

Bagaimana cara untuk mengurangi error/warning, agar lebih valid XHTML ??
Berikut caranya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Setalah itu kita mulai step by step dan cari kode dibawah ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Kemudian, gantilah kode diatas dengan kode berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Pastikan setelah itu simpan dan sobat cek untuk melihat perbedaan/hasilnya.

7. Perhatikan kode dibawah ini, kode bawaan/default blogger biasanya seperti ini:

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */


Hapuslah semua kode/tanda strip (--) hanya stipnya saja yang dihapus.
Dan cek juga pada kode css yang lainya, biasanya terdapat banyak tanda seperti pada contoh diatas.
Hasilnya kan menjadi seperti ini:

<b:skin><![CDATA[/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/


8. Jika sobat menambah sebuah widgate atau gadget, ingatlah untuk menghapus:

<b:include name='quickedit'/>

9. Ini yang mungkin pengaruhnya cukup banyak untuk valid XHTML, tapi ?? efeknya juga ada sob, setelah saya hapus kodenya, ternyata avatar untuk komentar admin blog tidak muncul, hal ini juga yang sempat membuat saya pusing, kenapa avatar admin pada komentar blog saya tidak muncul.
dan semua terserah sobat, mau mempertahankan atau menghapusnya.
cari dan hapuslah kode:

<b:include data='blog' name='all-head-content'/>

10. Ini juga sebenernya melanggar TOS blogger, karena kita menghilangkan Navbar blog, tapi kalo memank mau valid ya tidak ada cara lain selain menghapusnya.
tambahkan kode berikut di bawah tag: </head>

<!-- <body>
<div></div> -->

11. Jika Sobat meng-upload sebuah image, ubah script tersebut. contoh scriptnya seperti ini:

<a href="http://validator.w3.org/"><img alt="Markup Validation Service" src="http://3.bp.blogspot.com/_L8cTYaYGAGI/SyHeZ6cwSmI/AAAAAAAAA0M/bUqfyU9VsFU/s320/valid-html.gif" /></a>

12. Jika sobat menemukan penulisan meta content dengan huruf besar, contoh:

<META content='blogger' name='generator'/>

Ubahlah menjadi:

<meta content='blogger' name='generator'/>


Nah mungkin cara diatas cukup untuk membuat template blog lebih valid XHTML, sebenarnya masih banyak, dan masih bisa dikompres lagi, itu tergantung widget/kode script yang ada di blogger sobat.

Misalnya:
Saya membuang kode script untuk recent post, dan recent comment, facebook like, tentunya agar lebih valid XHTML, untuk widget followers bisa kita akali dengan google friend connect.
tapi bila sobat masih ingin mempertahankan widget tersebut, saya rasa cara diatas sudah paling maksimal untuk valid XHTML.
Untuk hal lainnya bisa sobat atak-atik sendiri dan mungkin sobat blogger punya trick baru, jadi kalau ada, jangan lupa share juga ya sob!! hehehe
Untuk hasilnya silahkan sobat cek sendiri di: http://validator.w3.org
Sobat juga bisa mengecek blog saya ini, dan lihat hasilnya.
Dari saya cukup sekian, semoga bermanfaat.


UPDATE
Menambahkan jenis type="text/javascript" pada semua kode JavaScript yang ada.
Contoh:

<script src="http://sites.google.com/site/kodeblogger/javascript/post-terakhir.js"></script>

Ubahlah Menjadi:

<script type="text/javascript" src="http://sites.google.com/site/kodeblogger/javascript/post-terakhir.js"></script>


Simpan, jangan lupa untuk mengecek kembali blog sobat untuk melihat hasilnya.
Thanks.

Ditulis Oleh :

Artikel Membuat Blog Lebih Valid XHTML ini dipublish pada hari: Sabtu, Mei 07, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

35 komentar
Terjun Ke Kolom Komentar

  1. Tutorial yang sangat bermanfaat Mas bro...

    BalasHapus
  2. @Adis Production Bali: Hehe, Makasih mas bro... salam kenal :)

    BalasHapus
  3. om kalo blog valid mank buat apa???

    BalasHapus
  4. masalahnya yang eror di blog saya ada 360 dan warning 380,,,,

    BalasHapus
  5. sangat membantu infonya buatnewbie seperti saya...sekalian mau ngantari award buat sahabat viyan..kalau mau silakan ambil di blog saya..suksess yacchh

    BalasHapus
  6. @Imaduddin: Setahu saya, akan berpengaruh pada search engin, blog/website yang valid XHTML akan lebih mendapatkan perhatian dari mesin penelusur(search engin) atau boleh dikatakan "SEO Friendly"

    @Blog SEO Drakula: Wahhh.. Award lagi yaa?? ok sob, TKP...
    Thank banget sob :)

    BalasHapus
  7. keren,, dapet award lagi y om blogger,,,,,

    aqw mau tanya tapi belum dijawab,, sekarang aqw mau tanya y? cara munculin emoticon yang tidak muncul tuh gmna y??,,,

    aqw butuh banget,,, kk kan master blogger,, heheehehe

    BalasHapus
  8. Mantap gan.. saya sudah lama mengotak.atik hal ini.. tapi tetep aja banyak errornya...

    BalasHapus
  9. @Deafile: Yah valid XHTML rata2 cuman pada halaman awalnya/Home-pagenya saja, pastilah banyak yang dikorbanin kalo mau bener2 valid. hehhee
    toh semua itu gak mutlak sob. karena filtur2 default dari blogger jg gak bersahabat denga xHTML.
    jadi, menurut saya jg gak begitu bermasalah.

    BalasHapus
  10. @Imaduddin: Yup, makasih sob.
    Weleh, gak ada master disini sob, saya jg masih sambil belajar, jadi mari kita sama2 belajar.

    Emoticon pada kotak komentar atau emoticon pada blogger sob??
    Untuk masalah emoticon gak muncul coba sobat baca terlebih dahulu di:
    http://kode-blogger.blogspot.com/2011/03/cara-mudah-menambah-emoticon-pada.html

    BalasHapus
  11. 309 Errors, 270 warning(s)

    BalasHapus
  12. makasih atas infonya. . .info ini sangat penting buat saya. . . . info ini benar-benar berguna buat saya. . .

    jangan lupa lihat juga blog saya yach. .

    http://aboutinstallationlinux.blogspot.com/

    makasih. . .

    BalasHapus
  13. @boy : Huehehe, Lumayan banyak tuh

    @about linux : Yupz, sama2 Sob? Blognya bagus sob !!

    BalasHapus
  14. mantab infonya gan, sangat bermanfaat.

    ane follow agan ya, btw follow balik ya gan. salam kenal

    BalasHapus
  15. As a Newbie, I am always exploring online for articles that can help me. Thank you

    BalasHapus
  16. Selamat malam dan selamat beristirahat.. berkunjung di malam hari sambil mencari artikel tentang cara memasukan kode CSS dan JQuerry serta Script neh.. mumet kemana2 bahasa linggis semua ... hohohoho Blognya kyknya ada yang berubah nih.... ^_^

    BalasHapus
  17. @Informasi Ku: Sipp gan, pasti saya follow balik.
    salam kenal juga :)

    @Ali Hamid: Hi Bro ?? I am also newbie bro? Thanks for the visit and comment.

    @Astro: Malam sob, wah sibuk neh critanya :))
    Bagian mana yang berubah sob?? ;))

    BalasHapus
  18. soreee.... prikitiew... setelah di analisa ternyata navigasi nya berubah :-o mantebh tebh deh... :)) met beraktifitas dueh di hari yang cerah ini....

    BalasHapus
  19. bisa bantu pasang kode JS di blog saya sob.. ane sdh mumet met masukin kodenya tp gagal terus :((

    http://astro-note.blogspot.com/

    BalasHapus
  20. @Astro: Yupz, makasih sob.
    Kode.js buat bikin apaan sob ??

    BalasHapus
  21. bisa dicoba itu mas boy.......

    BalasHapus
  22. @Cay's: Sip, silahkan mas bro ?? :)

    BalasHapus
  23. makasih banyak beget buatmas
    sangat bermanfaat buat saya:))

    BalasHapus
  24. @North Sulawesi Tourism: Makasih Sob...

    @Arya: Semoga bisa membantu Mas. :)

    BalasHapus
  25. nice sob, lumayan udh turun yang erornya... tpi masih 100an yang tertinggal..

    BalasHapus
  26. Halo teman bagaimana cara mengurangi kesalahan saya lebih dari template saya, saya mengikuti saran mereka (ucapan selamat di website Anda) dan memiliki beberapa blogger hacks terakhir
    Ini adalah www.uviconsejos.com web saya
    Terima kasih banyak
    Saya terjemahkan pesan estte karena saya tidak berbicara melalui penerjemah google Idoma
    Salam dari Spanyol

    BalasHapus
  27. wah bgus ini, izin coba yah mas :D

    BalasHapus
  28. hehe tq sob,aq baru liat2 posting yang ini tq boy

    BalasHapus
  29. wah ada lagunya heheheheheh...........

    BalasHapus
  30. sudah lama saya menerapkannya...
    btw thnx :-bd

    BalasHapus
  31. makasih infonya...
    sekalian share cara memperbaiki yang errornya dunk om

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers