Sabtu, Mei 07, 2011

Home » , , » Membuat Blog Lebih Valid XHTML

Membuat Blog Lebih Valid XHTML

Sabtu, Mei 07, 2011  , ,  34 comments

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 2 error dan 2 warning 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:
CODE
<!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: 
CODE
<!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: 
CODE
<a href="http://validator.w3.org/"><img alt="Markup Validation Service" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuL_D6pCdWlt4aYHVzG_Kmzsi2A6N9_QHVDD9Oyejg5W5Z3pt-G1-mAjSEE90iecRs2g9LbjcSem-QSQChYHoNpnV86Hi-ybpiS-cFxZ-mzm2c-PiA3mafo0sGuOW4MM1FTJyqp9woVkY/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: 
CODE
<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.

34 komentar:

  1. Adis Production Bali7 Mei 2011 pukul 14.43

    Tutorial yang sangat bermanfaat Mas bro...

    BalasHapus
  2. Viyan Pradita7 Mei 2011 pukul 15.15

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

    BalasHapus
  3. RIFAAS SAMASENJU8 Mei 2011 pukul 08.28

    om kalo blog valid mank buat apa???

    BalasHapus
  4. RIFAAS SAMASENJU8 Mei 2011 pukul 08.31

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

    BalasHapus
  5. Blog SEO Drakula8 Mei 2011 pukul 08.59

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

    BalasHapus
  6. Viyan Pradita8 Mei 2011 pukul 10.44

    @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. RIFAAS SAMASENJU8 Mei 2011 pukul 11.21

    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. Kian8 Mei 2011 pukul 11.42

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

    BalasHapus
  9. Viyan Pradita8 Mei 2011 pukul 16.38

    @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. Viyan Pradita8 Mei 2011 pukul 16.57

    @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. boy9 Mei 2011 pukul 19.17

    309 Errors, 270 warning(s)

    BalasHapus
  12. wahidin rahmadi10 Mei 2011 pukul 19.22

    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. Viyan Pradita10 Mei 2011 pukul 20.27

    @boy : Huehehe, Lumayan banyak tuh

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

    BalasHapus
  14. Informasi Ku10 Mei 2011 pukul 21.02

    mantab infonya gan, sangat bermanfaat.

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

    BalasHapus
  15. Ali Hamid10 Mei 2011 pukul 21.10

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

    BalasHapus
  16. Astro10 Mei 2011 pukul 21.33

    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. Viyan Pradita11 Mei 2011 pukul 02.03

    @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. Astro11 Mei 2011 pukul 17.11

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

    BalasHapus
  19. Astro11 Mei 2011 pukul 22.04

    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. Viyan Pradita12 Mei 2011 pukul 01.20

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

    BalasHapus
  21. Cay's14 Mei 2011 pukul 07.27

    bisa dicoba itu mas boy.......

    BalasHapus
  22. Viyan Pradita14 Mei 2011 pukul 08.58

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

    BalasHapus
  23. North Sulawesi Tourism25 Mei 2011 pukul 10.49

    nice share,. thx

    BalasHapus
  24. arya26 Mei 2011 pukul 21.53

    makasih banyak beget buatmas
    sangat bermanfaat buat saya:))

    BalasHapus
  25. Viyan Pradita27 Mei 2011 pukul 01.25

    @North Sulawesi Tourism: Makasih Sob...

    @Arya: Semoga bisa membantu Mas. :)

    BalasHapus
  26. Unknown28 Juli 2011 pukul 11.36

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

    BalasHapus
  27. grupowu8 Agustus 2011 pukul 09.39

    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
  28. Dika12 Agustus 2011 pukul 13.10

    Nica artikel

    BalasHapus
  29. AdityaN8zz6 Desember 2011 pukul 21.45

    wah bgus ini, izin coba yah mas :D

    BalasHapus
  30. Anonim13 Januari 2012 pukul 21.27

    hehe tq sob,aq baru liat2 posting yang ini tq boy

    BalasHapus
  31. LP4 Juli 2012 pukul 11.37

    wah ada lagunya heheheheheh...........

    BalasHapus
  32. Unknown29 November 2012 pukul 15.53

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

    BalasHapus
  33. hdfans9 Desember 2012 pukul 01.49

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

    BalasHapus
  34. mohamad zaini23 Mei 2013 pukul 09.35

    siip

    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>