Friday, December 6, 2013

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPt0e0jfopmZsmvokd5R42TVMWSWg88f0F1B9Mr7l9PVXaDSSH8GZLhnoCuVvcLx6W_C97b8qBUYWFFzVz_BGfWJeMeQTigSef3couyU5Di4DBvlzI26TCaDnXn9GrxGGHStWkoRrfUrJ/s1600/menambahkan_deskripsi_blog.png">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPt0e0jfopmZsmvokd5R42TVMWSWg88f0F1B9Mr7l9PVXaDSSH8GZLhnoCuVvcLx6W_C97b8qBUYWFFzVz_BGfWJeMeQTigSef3couyU5Di4DBvlzI26TCaDnXn9GrxGGHStWkoRrfUrJ/s1600/menambahkan_deskripsi_blog.png" />

Menjadi

<img alt="Menambahkan Deskripsi blog" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPt0e0jfopmZsmvokd5R42TVMWSWg88f0F1B9Mr7l9PVXaDSSH8GZLhnoCuVvcLx6W_C97b8qBUYWFFzVz_BGfWJeMeQTigSef3couyU5Di4DBvlzI26TCaDnXn9GrxGGHStWkoRrfUrJ/s1600/menambahkan_deskripsi_blog.png">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPt0e0jfopmZsmvokd5R42TVMWSWg88f0F1B9Mr7l9PVXaDSSH8GZLhnoCuVvcLx6W_C97b8qBUYWFFzVz_BGfWJeMeQTigSef3couyU5Di4DBvlzI26TCaDnXn9GrxGGHStWkoRrfUrJ/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

Categories: , , , ,

0 comments:

Post a Comment