Memperbaiki Error Pada Template Blogspot oleh W3 Validator

Saya banyak melihat tingkat error yang blog-blog sahabat, khususnya yang agak "care" dengan hal ini dan yang pernah bertanya bagaimana mengurangi error tersebut, sering ditemukan masalah yang sama. Adapun beberapa error yang ditemukan tersebut adalah seputar:

• Penulisan url script:

Kalo kita menggunakan url script seperti ini:

<script src='http://iskaruji.googlecode.com/files/manyun_smiley.js' type='text/javascript'>

Tidak ada masalah dengan penulisan tersebut dan url script tersebut tetap bisa berjalan normal. Sayangnya penulisan tersebut tidak dianggap valid. Dan penulisan yang dianggap valid adalah:

<script type='text/javascript' src='http://iskaruji.googlecode.com/files/manyun_smiley.js'></script>

Hal ini juga berlaku untuk setiap kali penulisan yang di mulai dengan "script".

• Ada juga bentuk error seperti ini:

&adult=0&cat=news&big=big&cl=rainbow"></s…
&adult=0&cat=news&big=big&cl=rainbow"></…

Sebenarnya error tersebut hanya disebabkan oleh tanda & yang seharusnya ditulis &amp;

• Menghilangkan fungsi navigasi blog

Fungsi navigasi blog juga menjadi penyumbang error terbesar. Jika kamu berniat tidak menggunakan navigasi "post baru, beranda, post lama" seperti pada Iskaruji dot com, silahkan menhapus kode berikut:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</div>
</b:if>

<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>

<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>

</div>
<div class='clear'/>

Secara default, kode ini berada pada dua tempat didalam template. Yaitu di bawah kode <b:includable id='nextprev'>

• Template Mobile

Bagi yang pernah mengaktifkan template mobile, ini juga akan menjadi penyumbang error. Pergi ke Setting > Email & Mobile > Pilih "No" untuk show mobile template. Jangan Khawatir, aksi ini tidak menghapus mobile blogging kamu di http://namablog.blogspot.com/?m=1

• Kode widget

Untuk kode-kode widget sendiri kalo bawaan blogspot dijamin "parah". Cobalah untuk menggunakan widget yang bisa kita "oprek" kodenya. khusus untuk blog archive gunakan yang flat list seperti pada blog ini. Walaupun fungsi linknya hilang. Hanya sekedar menampilkan jumlah post perbulan sejak blog ini dibuat. Lumayan!

Bagi para sahabat Web Code Base Programming, mohon pencerahannya. Tutorial ataupun tips ini bukan berdasarkan ke-ilmuan saya. Semua ini adalah hasil dari pengalaman saja. Jika terdapat istilah coding yang salah dalam web code terms itu semua terjadi karena keterbatasan pemahaman. Tapi apapun itu saya tetap berprinsip menurut perintah, "Sampaikanlah walau hanya satu kode saja"...Jika ada manfaatnya silahkan ambil dan jika ada salahnya sangat diharapkan pencerahannya..

Demikianlah, Happy blogging!

Read more »

Validasi xhtml Template Blogspot

Kembali lagi menulis tentang validasi xhtml template blogspot dengan W3 Validator. Memang artikel tentang validasi ini terpisah-pisah pada Blog Iskaruji dot com ini dikarenakan keterbatasan kemampuan saya meramu semua hasil pengalaman mengurangi error template blogspot di blog ini.

Mengenai manfaatnya sendiri dari berkurangnya error pada template blogspot, yang saya rasakan sendiri adalah load halaman yang ringan, begitu juga saat di coba pada Page Speed Online. Manfaat lainnya bisa juga di baca pada komentar sobat Tips Wisata Murah pada postingan tentang Halaman Blogspot Tidak Valid. Selain itu silahkan rasakan sendiri saat kamu mengunjungi blog ini dan membolak-balik halamannya. Jika memang terasa ada hal baik, silahkan di coba langkah-langkah validasi xhtml template blogspot berikut:

• Silahkan kunjungi W3 Validator. Masukkan url blog kamu, centang semua pada option agar bisa melihat letak kesalahannya dan validate. Lihat berapa error-nya dan jangan tutup W3 Validator hingga semua langkah Validasi xhtml Template Blogspot ini selesai.

• Expand Widget Templates. Ganti Document Type template blog kamu dengan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' 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'>
<head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://namablog.blogspot.com/atom.xml' rel='alternate' title='Isi dengan judul blog kamu - Atom' type='application/atom+xml'/>
<link href='http://namablog.blogspot.com/rss.xml' rel='alternate' title='Isi dengan judul blog kamu - RSS' type='application/rss+xml'/>
<b:skin><![CDATA[

• Pada sebagian template sering kita lihat deklarasi seperti ini misalnya:

/* Header
------------------------------ */

Hal yang harus dilakukan adalah menghapus semua bentuk deklarasi template blogspot yang menggunakan garis panjang tersebut. Sehingga format deklarasi yang benar adalah:

/* Header */

• Letakkan kode berikut diatas <body>

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

Ini untuk men-delete Widget NavBar bawaan blogspot yang biasanya cuma kita sembunyikan.

• Hapus semua kode:

<b:include name='quickedit'/>

Kode ini akan selalu ada setiap kali kita melakukan aksi Add Gadget. Jadi pastikan kamu menghapusnya lagi setiap melakukan penambahan gadget.

• Cari kode berikut:

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>

dan ganti dengan kode:

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>

Sampai tahap ini, selesai sudah usaha kita mengurangi error pada template blogspot. Disarankan untuk Save Template setiap satu langkah selesai dipraktekkan dan dilanjutkan dengan revalidate di W3 Validator agar kita tahu kalo errornya berkurang.

Perlu diperhatikan bahwa langkah-langkah diatas hanya mampu menekan hingga 1 atau 2 error dan 2 warning. Jika ditemukan masih banyak error pada template kamu, itu disebabkan oleh kode widget atau halaman post kamu yang belum diperbaiki sesuai ketentuan W3 Validator. Lihat cara penulisan kode gambar dan video yang valid di halaman posting.

Demikianlah, halaman komentar sangat terbuka untuk kita berdiskusi bersama. Mohon kepada sobat yang bisa hingga Pass Check, sudilah untuk berbagi disini.

Happy blogging!

Read more »

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;

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!

Read more »

Validasi Template Blogspot | Cara Penulisan dan Validasi XHTML Template Blogger

Rasa penasaran terhadap ada atau tidak template blogspot yang lolos validasi xhtml, membawa saya searching di beberapa blog yang menulis tentang hal ini. Banyak blog-blog besar bahkan sampai bertanya langsung ke salah satu blog webmaster, tetap saja template Iskaruji dot com ini mentok pada posisi seperti sekarang ini. Lalu adakah template blogspot yang bisa lulus validasi xhtml? Jawabannya ada. Jika sebelumnya saya sempat berkomentar bahwa tidak ada, tapi sekarang saya sudah punya dua blog yang "menghijaukan" W3 Validator karena telah lulus validasi xhtml.

Inilah kedua blog platform blogspot yang telah lulus validasi xhtml dari W3 Validator.

1. http://mastotosugiarto.blogspot.com/
2. http://hendro-prayitno.blogspot.com/

Sementara hanya dua blog tersebut yang setelah saya cek hasilnya "hijau" [lulus validasi]. Silahkan cek di search engine dengan kata kunci, "W3 Validator, validasi template blogspot atau validasi xhtml". Cek saja pada halaman pertama google, disitu akan ada blog-blog yang membahas tentang validasi template blogspot. Tentunya selain dari blog Iskaruji dot com ini.

Dari kedua blog diatas saya lebih merekomendasikan cara penulisan template-nya seperti yang dilakukan oleh blog mastotosugiarto.blogspot.com. Karena dia menggunakan tipe dokumen yang sama seperti template blogspot rata-rata. Yaitu;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' 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'>

Untuk itu, sebelum usaha untuk validasi template blogspot, silahkan ganti dulu dengan tipe dokumen seperti diatas. Untuk hal detail lainnya, saya hanya bisa merekomendasikan link-link berikut:

1. http://www.oblo.web.id/2009/11/step-by-step-validasi-blogger.html
2. http://www.rikyrizkiyana.co.cc/2010/07/memvalidasi-template-blogger.html
3. http://www.masdoyok.co.cc/2011/04/mengurangi-error-validasi-template.html

Jangan cek hasil validasi xhtml blog-blog tersebut, baca dan praktekkan saja artikelnya. Karena artikel tersebut persis seperti yang aku temui saat ngoprek template blog Iskaruji dot com ini hingga seperti ini.

Untuk pengalaman sendiri, cobalah untuk mencentang semua option yang ada saat mem-validasi template blogger seperti pada screenshoot berikut. Ini sangat membantu kita mengenali apa yang error pada template ataupun cara penulisan kita, baik pada postingan maupun pada sidebar.

Powered by :

Read more »

W3 Validator | Usaha Untuk Validasi XHTML Template Blogspot Dengan W3 Validator

Usaha untuk mencoba mem-validasi template blogspot yang dipakai oleh blog Iskaruji dot com ini sepertinya hampir mencapai titik maksimal. Hingga saat ini saya hanya mampu menekan hingga 1 error dengan 2 warning. Itupun hanya jika kita memvalidasi halaman utama. Pada halaman post sendiri masih berkisar belasan error dan warning.

Tampilan Hasil Validasi Halaman Utama

Tampilan Hasil Validasi Halaman Posting

Suatu kemajuan tersendiri, karena awalnya memang tidak terpikirkan oleh saya jika tidak dapat masukkan dari sobat blogger Tips Wisata Murah mengenai pentingnya validasi XHTML ini. Dan betul juga, saat dicek hasilnya 200-an lebih error...

Usaha untuk memvalidasi xhtml ini sebenarnya agak lebih gampang jika kita coba membuang widget-widget yang tidak terlalu penting pada blog kita. Sayangnya, saya ingin tetap mempertahankan widget tersebut sambil terus membenahi cara penulisan kodenya yang benar menurut W3 Validator.

Jika ada sebagain sahabat masih bertanya-tanya mengapa dan kenapa W3 validator, saya mungkin hanya bisa menjawab dengan menunjukkan kode berikut:

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

Itu adalah kode yang selalu ada diatas kode html template blogspot kita. Ada tulisan www.w3.org, tempat dimana saya memcoba memvalidasi template blog ini. Jangan-jangan hak cipta xhtml yang dipake oleh template ini adalah bikinan w3.org? ...au' ah...

Pertanyaan diatas memang belum terjawab sempurna karena keterbatasan pemahaman saya tentang W3 Validator ini. Tapi, hal yang bisa saya rasakan secara langsung adalah load halaman yang lebih cepat dari sebelumnya walaupun masih dijejali dengan widget seabrek. Saat ditest pada Google Page Speed Online skor yang dihasilkan mencapai 80-an. Naik dari sebelumnya yang hanya 50-an. Selain itu, saya juga tahu cara penulisan kode html yang baik dan benar menurut W3 Validator.

Karena keyword W3 Validator ini masih bertengger "manis" pada SERPs Indonesia, semoga saja ada sahabat blogger yang lebih dulu paham tentang manfaat sebenarnya dari validasi xhtml ini bisa nyasar kesini dan dapat memberikan pencerahannya. Kolom komentar Iskaruji dot com selalu terbuka untuk kalian, dengan tetap menjunjung tinggi budaya ketimuran kita...

Moga manfaat and happy blogging!

Read more »