Senin, 13 Juni 2011

Validasi Template blogspot | Penulisan Kode Gambar dan Video Menurut W3 Validator

Mencoba lagi menulis tentang validasi xhtml template blogspot ini. Semoga saja bisa membantu sahabat blogger lainnya yang kebetulan "care" dan lagi usaha untuk mengurangi tingkat error pada template blognya.

Apa yang yang share disini adalah berdasarkan step-step yang telah blog ini lalui untuk mencapai tingkat error seperti sekarang ini. Seandainya saja mau mengurangi widget ataupun sidebar yang bikin blog Iskaruji dot com terlihat ngejreeng, [setidaknya di mata saya selaku admin] mungkin bisa saja mencapai 100% pass check. Tapi masih sayang dan aku ingin tetap template blog ini seperti sekarang tanpa mengurangi widget.

Pada kesempatan ini, kita akan melihat bentuk penulisan kode gambar dan kode video pada post. Saat kita meletakkan gambar dan video pada post maka akan terlihat error seperti pada gambar berikut ini setelah di cek pada W3 Validator;

error Validasi xhtml3
error validasi xhtml
error validasi xhtml2

Dalam keadaan default saat pertama kali gambar di upload ke post akan tertampil kode sebagai berikut:

<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-B5dRf5tjoqc/TZlaDRYPLcI/AAAAAAAABGk/GDO0IKborqo/s1600/Video+lipsing+anggota+brimob+Gorontalo.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="143" src="http://2.bp.blogspot.com/-B5dRf5tjoqc/TZlaDRYPLcI/AAAAAAAABGk/GDO0IKborqo/s200/Video+lipsing+anggota+brimob+Gorontalo.JPG" width="200" /></a></div>

Dan ini adalah kode default saat kita embed video pada post. Kode-kode ini merujuk kepada post tentang video lipsing Briptu Norman.Jadi teringat Pak Yadi. EYD yang salah tapi ngetren. Masak Brigadir Satu disingkat Briptu...gak nyambung khan?...hehe

<iframe title="YouTube video player" width="480" height="350" src="http://www.youtube.com/embed/ZyhI3OG2raE" frameborder="0" allowfullscreen></iframe>

Kode-kode tersebut akan dianggap error oleh W3 Validator jika tetap dibiarkan demikian. Untuk membuatnya valid, hapuslah kode berwarna merah dan selalu tambahkan "alt" pada setiap gambar pada post. Maka kode gambar yang benar adalah:

<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-B5dRf5tjoqc/TZlaDRYPLcI/AAAAAAAABGk/GDO0IKborqo/s1600/Video+lipsing+anggota+brimob+Gorontalo.JPG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Video lipsing briptu norman" border="0" height="143" src="http://2.bp.blogspot.com/-B5dRf5tjoqc/TZlaDRYPLcI/AAAAAAAABGk/GDO0IKborqo/s200/Video+lipsing+anggota+brimob+Gorontalo.JPG" width="200" /></a></div>

Dengan menghapus kode berwarna merah dan menambahkan alt seperti pada kode berwarna hijau, maka halaman post ataupun halaman utama kita yang dijejali dengan gambar akan berkurang error-nya. Load halamannya-pun akan terasa lebih cepat dari biasanya.

Sebelumnya, pastikan dulu kamu telah mengganti tipe dokumen template blogspot kamu seperti pada post tentang Validasi template blogspot sebelumnya.

Selamat mencoba and happy blogging!

0 komentar:

Poskan Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Powerade Coupons