Kukuh Cakra Darma

Memvalidasi HTML5 Pada Template Di W3C Validator

Saya telah mencari beberapa mengenai HTML5 yang merupakan sedikit membantu SEO pada blog kita. Alasannya? Karena Google akan mengupdate atau lebih mudah mengindex blog yang menggunakan Engine Baru. Jika anda belum mengetahui HTML5? Silahkan saja buka saja Wikipedia. Nah, hal yang cukup mempengaruhi pada masalah validasi di HTML5 via W3C adalah tata letak yang kurang teratur, serta masalah lainnya yang akan saya bahas disini. Perlu diketahui, untuk memvalidasi yang dibutuhkan adalah teraturnya halaman utama (Homepage) dari blog kita, dan bukan subpage yang merupakan artikel maupun lainnya.
Berikut adalah pembahasan mengenai "Memvalidasi HTML5 PadaTemplate Di W3C" dan disini saya akan menggunakan template Minima.
Oke, mari kita validasi bersama sama
1. Buka halaman berikut: W3C Validator.
2. Kemudian masukkan halaman web atau blog anda kemudian klik Check.
Click To Zoom
3. Jangan kaget apabila blog anda memiliki banyak warning dan error, haha.. Untuk itulah artikel ini saya tulis

Oke, langsung ke topik permasalahan.

   *a. Alangkah baiknya, masuk ke Design dan menghapus widget followers dan atribution, kemudian rubahlah arsip blog anda menjadi flat list.
****ATAU
Menyembunyikannya pada subpage yang sudah pasti Error, yaitu dengan cara silahkan baca disini Menampilkan Widget Hanya Pada Halaman Tertentu.

   *b. Masuk ke Edit HTML maka anda akan menemukan coding seperti ini
<?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>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
Nah, HAPUS coding diatas dan ganti dengan coding berikut
<?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='/atom.xml' rel='alternate' title='TULIS JUDUL BLOG ANDA - Atom' type='application/atom+xml'/>
  <link href='/rss.xml' rel='alternate' title='TULIS JUDUL BLOG ANDA - RSS' type='application/rss+xml'/>
   *c. Mungkin anda kira ini tidak akan berpengaruh, akan tetapi hal ini dapat membuat jumlah warning kita pada W3C berkurang, yakni penggunaan
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Nah,  hapus tanda -----------------------------------------------, sehingga menjadi
/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/
  *d.  HILANGKAN navigasi bar dari Blogger, yakni dengan cara
Masuk ke Edit HTML dan klik pada Expands Widget Templates
Letakkan kode berikut dibawah kode </head>
<!-- <body><div></div> -->
  *e. Hapus Quickedit dan Post Icons.
Hal ini juga cukup berperan dalam memberikan error pada templates anda, sehingga untuk menghilangkanya silahkan ikuti cara berikut
***** Quick Edit
HAPUS SEMUA coding yang sama dengan kode dibawah ini
<b:include name='quickedit'/>
*****Dan untuk menghilangkan post icons, silahkan ikuti langkah dibawah ini
*********** Temukan kode dibawah ini
<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>
Kemudian, silahkan hapus dan ganti dengan kode dibawah ini
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
        </b:if>

      </span>
      </div>
Next, SAVE TEMPLATE
Lihat apa yang terjadi pada situs W3C Validator.
Jikalau
This document was successfully checked as HTML5!

Selamat! Anda telah sukses "Memvalidasi HTML5 Pada Template Di W3C Validator".
Jika belum, mungkin ada kesalahan.. Bersabarlah, dan coba untuk memahami apa kesalahannya dengan memperhatikan W3C Validator tadi..
Oke, silahkan mencoba dan semoga bermanfaat!



Artikel Terkait:

5 Comments:

Dimas Abi Galoga | 14 November, 2010 10:04 | [Reply]

/'This document was successfully checked as XHTML 1.0 Transitional!' bukanya itu berarti masih XHTML 1 yg valid?

Kukuh Cakra Darma | 14 November, 2010 10:24 | [Reply]

@Dimas Abi Galogakarena yg dideteksi pada Blogger yakni menggunakan XHTML 1 gan, sehingga scara otomatis Validator akan menchecknya XHTML 1 apa sudah memenuhi syarat sbg HTML5 dan XHTML1

Dimas Abi Galoga | 14 November, 2010 11:31 | [Reply]

@Kukuh Cakra Darma bukannya validator mengecek otomatis web menggunakan HTML tipe apa. setau saya klo valid HTML 5 yg keluar tulisan 'This document was successfully checked as HTML5!' secara otomatis.

Kukuh Cakra Darma | 14 November, 2010 13:03 | [Reply]

@Dimas Abi Galoga gini nih, masalahnya adalah, Validator mendetect secara otomatis, dan yang ke detect adalah XHTML 1.0.. Jikalau emang pengen HTML5, tinggal diubah detect automaticallynya ke HTML5

Dimas Abi Galoga | 14 November, 2010 13:38 | [Reply]

@Kukuh Cakra Darma itu namanya manual gan klo harus di ganti dulu, ga auto detect. hehe. oke nice info deh gan keep post

Post a Comment | Classic Comment's Form