Senin, 12 Desember 2011

Cara Membuat Template Blogspot Valid

Cara Membuat Template Blogspot Valid XHTML dapat berpengaruh terhadap SEO, dalam artikel ini saya akan membahas langkah apa saja supaya template SEO Friendly anda menjadi lebih valid dari sebelumnya agar menjadi template SEO Friendly, walaupun tidak begitu valid. Template blogspot biasanya memiliki kode yang kurang valid yang disebabkan oleh widget yang dimiliki blogger, jika anda ingin benar-benar valid anda harus menghapus semua widget, tapi bagaiman blog yang butuh widget ? disini kita akan meminimalisir kesalahan kode pada template blogspot.
Membuat Valid XHTML tidak lah mudah, (Bagi Newbie seperti Saya) karena banyak kode yang sering kita gunakan padahal itu merupakan kode yang tidak valid ; contoh: sepertinya kita lebih sering memberi kode <br/> dibanding <p>...</p> untuk memberi perintah garis baru. padahal sesungguhnya pemberian kode br/ itu merupakan kode yang tidak valid XHTML (begitulah menurut para ahlinya). Selain itu penggunaan widget pun ternyata tidak terlalu baik terhadap valid XHTML ; contoh : widget kotak followers ternyata tidak valid XHTML.
Bagaimana cara cek blog yang valid XHTML? Caranya mudah, kunjungi saja situs http://validator.w3.org/, kemudian masukkan alamat blog sobat, nanti dapat terlihat berapa banyaknya yang error dan warning, blog saya memiliki sekian eror, sobat dapat cek sendiri untuk membuktikannya
Bagaimana Cara Membuat Template Blogspot Valid XHTML 1.0 ?
1. Menghapus widget, seperti yang tadi saya paparkan di atas, bahwa ada beberapa widget yang disediakan oleh flatform blogspot yang tidak valid xhtml, hapus kotak followers, dan rubah tampilan arsip menjadi flat list
2. Mulai edit html, cari kode dibawah ini (terletak paling awal dari kode 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>
Hapus kode diatas, dan ganti dengan kode di bawah ini :
<?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>
Kemudian kembali lagi ke situs http://validator.w3.org/ dengan result/hasil eror sebelum di edit, refresh dan lihat hasil erornya apakah berkurang atau tidak.
3. Mengatur CSS anda
Menghapus comment declaration
hapus tanda yang berisi /* ----------------- […..]  ---------------------  */ seperti contoh dibawah ini
/* -----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Compress CSS dengan CSS Compresor
Compress CSS dapat meringankan blog anda juga gunakan tool css compressor dari salah satu website yang ada di google.
4. Mulai memasuki Expand Widget Templates.
menambahakn kode <!-- <body><div></div> –> setelah kode </head> , ini berfungsi untuk menghapus navbar anda.
5. Hapus Quickedit
Hapus kode yang ada di bawah di dalam html, hapus semua kode <b:include name='quickedit'/> yang ditemukan dalam template :
6.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 ")
Save template dan kembali lagi ke http://validator.w3.org/ jangan lupa di refresh. :)

0 komentar:

Posting Komentar