Belajar Blog template valid XHTML

Belajar Blog Valid XHTML - mungkin memang perkara yang sulit untuk membuat blog kita valid xhtml. Tapi dengan validnya Template Blog kita dapat mempengaruhi kinerja blog kita terhadap SEO.

Halaman blogspot yang sudah memenuhi XHTML/CSS standar dapat menunjang SEO karena Spider dapat menangkap semua content dari halaman blog tersebut tanpa masalah. Umumnya, memenuhi standar HTML/CSS bukan keharusan buat web atau blog, tergantung keperluan dan tujuan masing-masing, sebagai contoh Google, Yahoo, Facebook, Twitter dan halaman blog milik Matt Cutts ternyata masih belum Valid HTML/XHTML.

Jika anda ingin mencoba,sebelumnya anda bisa cek di layanan Tool dari http://validator.w3.org/

Kita dapat mencoba langkahnya satu demi satu untuk membuat template valid XHTML.

1. Cari kode di bawah letaknya dibagian atas template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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>

Ubah menjadi

<?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>

 Save dan refresh kembali http://validator.w3.org/

2. memperbaiki tulisan meta tag 

Ganti seluruh penulisan Meta tag yang menggunakan uppercase menjadi lowercase.
Contoh :
<META content='Mo9MvGP3GZvNuz6CXDF58rL2NhgOH4GhtwttcSiGyhc' name='google-site-verification'/>
Menjadi seperti berikut :

<meta content='Mo9MvGP3GZvNuz6CXDF58rL2NhgOH4GhtwttcSiGyhc' name='google-site-verification'/>
 Save dan refresh kembali http://validator.w3.org/ 

3. Menghapus comment declaration

Cari kode comment declaration seperti dibawah 

/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Hapus ----------------------------------------------- Maka hasilnya seperti di bawah

/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/

&ave dan refresh kembali http://validator.w3.org/

4. Menambahkan attribut ALT pada setiap gambar

Sesuai standar W3C, semua gambar harus memliki attribut alt, akan tetapi secara default blogger tidak menambahkan attribut alt untuk gambar, untuk itu Anda harus menambahkannya secara manual.
Contoh :

<img href="http://3.bp.blogspot.com/-yhhzRDOiLiY/TeE59pQf4vI/AAAAAAAAAMI/I3Dc8dSh6u4/s1600/menambahkan_deskripsi_blog.png">http://3.bp.blogspot.com/-yhhzRDOiLiY/TeE59pQf4vI/AAAAAAAAAMI/I3Dc8dSh6u4/s1600/menambahkan_deskripsi_blog.png" />

Menjadi

<img alt="Menambahkan Deskripsi blog" href="http://3.bp.blogspot.com/-yhhzRDOiLiY/TeE59pQf4vI/AAAAAAAAAMI/I3Dc8dSh6u4/s1600/menambahkan_deskripsi_blog.png">http://3.bp.blogspot.com/-yhhzRDOiLiY/TeE59pQf4vI/AAAAAAAAAMI/I3Dc8dSh6u4/s1600/menambahkan_deskripsi_blog.png" />
Save dan refresh kembali http://validator.w3.org/

5. Memperbaiki penulisan tags Javascript

Jika Anda menemukan kode <style type='text/javascript'> kode javascript </style> maka ganti dengan script berikut karena tag javascript tersebut tidak benar.

<script type='text/javascript'> kode javascript </script>

Simpan template, kemudian kembali lagi ke situs http://validator.w3.org/ untuk melihat hasilnya.

Sekarang centang Expand Widget Templates.

6. menghilangkan navigasi bar

masukan kode di bawah tepat di bawah kode </head>
<!-- <body><div></div> --> 

Save dan refresh kembali

7. Hapus Quickedit

Hapus kode yang ada di bawah di dalam html pokonya kalau ketemu kode ini hapus!!
<b:include name='quickedit'/>

  Save dan refresh kembali http://validator.w3.org/
(pengaruhnya tanda obeng pada tiap widget akan hilang, tapi ga masalah toh masih bisa edit di page elements)

8. Menghapus post icon

Sekarang temukan kode di bawah:
 
<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>
Kalau sudah ketemu hapus seluruh kode di atas dan ganti dengan kode di bawah:

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

      </span>
      </div>
(ini merupakan penghapusan icon gambar pensil yang secara default sudah ada dari blogger "ternyata tidak valid lho")
  Save dan refresh kembali http://validator.w3.org/


Ternyata widget followers bawaan dari blogger dideteksi oleh web master tidak valid XHTML

jika anda merasa sangat membutuhkan widget followers dan tidak ingin menghapusnya

silakan klik Disini untuk ikuti langkah-langkah cara validasi widget follower
Cara Membuat Valid Widget Follower

23 komentar:

NgeBlog DOFOLLOW Di_Hp mengatakan...

wah Kang kayanya penting banget begini ni,tapi masih pusing eum. Belum paham,tpi makasih artikelnya buat pembelajaran !

blogdhika.com mengatakan...

OK sama2
kalau boleh jujur saya juga belum terlalu mahir membuat blog valid,tetapi akan lebih baik kita mengurangi error di blog kita walau hanya sedikit

kelewer mengatakan...

mantap bro.. gw awalnya sampe 80 errorr,,
seakrang tinggal 50n doang.. dan sisanya di script,, tapi terpaksa dipasang.. jadi biarlah,,

nice tips..

Dhika mengatakan...

ok terma kasih sudah berkunjung

replace mengatakan...

makasih bang.
salam blogger

UP DATE mengatakan...

gan, mau nanya nih,.
cara mengatasi masalah feed yang seperti ini "There has been an error of some kind. Ack!" gmana gan?

tlng bantuannya segara gan..
terimakasih sblumya,,

Dhika mengatakan...

@UP DATE: memang nya peringtan seperti itu muncul ketika akang sedang melakukan perubahan apa?

Tips Simple mengatakan...

banyak sekali ya yang perlu diedit supaya template blogspot jadi valid
nice share agan :)

kowandy mengatakan...

uda kurang error blog saya..thanks

dunia ngetik mengatakan...

Mantap sobb...
Tapi seiring dengan banyaknya komentar yang masuk error template jd bertambah juga..

Asdot mengatakan...

pusing kl mikirin w3 validator :D

http://www.sabarmuanas.com/ mengatakan...

wah bagus, dan menarik untuk dipraktekkan :))

Ramadhan.S.K. mengatakan...

Nice artikel. tp memvalidkan blog gak gampang :)

mampir gan! --> http://ramadhansk.blogspot.com/

Blog Touring mengatakan...

nice info..thanks...........

dewi bola mengatakan...

mantap gan saya coba ya di blog saya...

Anonim mengatakan...

yahhh share tutor gini tapi blognya sendiri banyak yang error, 70an malah :cd

cindaga weblog mengatakan...

perlu dicoba nih..,

http://alfiandoang.blogspot.com/ mengatakan...

wah makasih gan atas tutornya tentang kode - kode yang beginian. template akan jadi lebih ringan

rico ade mandana mengatakan...

139 Errors, 124 warning(s)
menjadi
107 Errors, 64 warning(s)
syukur dah hehehehe

Madu Hutan Asli mengatakan...

msksdih gsn, berkat keterangannya toko online blog ane bagus

upiseo mengatakan...

thx ya bro

MaseuS Shan mengatakan...

Informasi yang Bermanfaat tapi masih bingung nikunjung balik di http://gratisslaguu.blogspot.com

Sandal Jepit mengatakan...

Mantap juga ne, perlu dicoba… (y)
kunjung balik di http://aslikerinci.blogspot.com

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™