Cara Membuat Template Valid CSS3+HTML5

HTML5 merupakan proyek pengembangan dari versi sebelumnya, Tujuan pengembangan HTML5 agar memperbaiki teknologi HTML supaya dapat mendukung teknologi multimedia terbaru, compatible dan mudah dibaca oleh para user dan juga mudah diindex oleh mesin pencari. Pada Intinya, HTML 5 bertujuan agar web/blog sobat terindex, terbaca dengan sempurna di semua browser internet dan mudah dalam penggunaannya.

Adapun keuntungan template valid HTML5 adalah :

Cepat terindex Search Engine dokumen website/blog terbaca sempurna.
Render browser sangat cepat, sehingga lebih baik
DOM / DOCUMENT OBJECT MODEL sangat konsisten dan lebih stabil
HTML lebih kompatible terhadap browser terbaru ( Future Proof )
Dapat Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
Lebih dicintai browser dan mesin pencari dan lainnya.

Apakah Blogspot/Blogger Valid HTML5? Nah.. Dalam hal ini saya masih belum tahu pasti, akan tetapi ketika saya cek di css validator , banyak sekali vitur-vitur template blogspot itu sendiri belum valid HTML5. Bagaimana pendapat sobat tentang validasi untuk SEO. Coba cek validasi template sobat di VALIDASI BLOG DISIN I dan DISINI atau DISINI

Langkah Langkah Merubah Blog Sobat Valid HTML5

Tahap 1 : Backup template sobat sebelum melakukan editing.
Tahap 2 : Coba cari kode 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 b:version='2' class='v2' 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>

diganti dengan kode ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

Tahap 3 : Kode </html> digan dengan huruf besar </HTML> (paling bawah di template)

Tahap 4 : cari kode dibawah ini dan hapus:

<b:include data='blog' name='all-head-content'/>

kemudian diganti dengan kode di bawah ini :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Tahap 5 : cari kode <b:skin><![CDATA[ lalu diganti dengan kode dibawah ini :

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>

Tahap 6 : Hapus semua kode ini :

<b:include name='quickedit'/>

Setiap kali setelah menambahkan widget baru, pasti muncul kode diatas, lalu hapus kode di atas tersebut.

Tahap 7: Semua kode seperti dibawah ini (opsional) harap dihapus

<a expr:name='data:post.id'/>

Tahap 8 : Cari kode seperti ini dan Hapus :

<b:include data='post' name='postQuickEdit'/>

atau kode seperti ini juga, dihapus :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Tahap 9 : Cari kode dibawah ini (kalau ditemukan dihapus, kalau tidak ada, lewati saja)

<div class='post-share-buttons goog-inline-block'>...sampai...</div>

Tahap 10 : Cari semua code simbol & dengan diganti kode &

Dengan 10 Tips diatas, template sobat sudah Valid HTML5 untuk Homepage, walau tidak 100%. Melainkan pada postingan masih banyak error/warning karena komentar blogger (kecuali komentar hack seperti blog ini). Selamat Mencoba..

Perhatian Tips Berikut ini !

10 Tips di atas masih belum lengkap dan sempurna, jadi blog sobat belum valid. Supaya menjadi 100%, sebelum melanjutkan Tips-TIps dibawah ini, Silahkan perhatikan beberapa hal dibawah ini :

1. Pada setiap Gambar selalu gunakan tag alt , contoh :

<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnC-Fqwgr0igon3ZdBmihnB4oMkR9h8h7kirgXs9M_f1xAJ9yz9yk84u5LyMfMvH6jgHbbzYkl0H8OyTR5N-DTZnCLnmtMEZ2RX48TGYyMA4EHjX6G4x-pQ8TJzTCpDoUaa7yVHagxGMM/s1600/html5.png" />

2. Jangan sekali-kali menggunakan border="0" pada gambar, sebagai gantinya tambahkan kode :

style="border:none"

atau kode CSS dipisah seperti dibawah ini

img{border:none}

3. Pada hal iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode dibawah ini :

style="border:none;overflow:hidden"

atau kode CSS dipisah seperti kode dibawah ini

iframe{border:none;overflow:hidden}

4. Tag a jangan menggunakan tag name seperti dibawah ini :

<a name='comment-form'>

ganti dengan menggunakan id seperti dibawah ini :

<a href='#comment-form'>

5. Jangan terdapat dua id pada template sobat.

6. Selalu Hapus kode <b:include name='quickedit'/> setiap menambah widget baru diblog sobat.

Selamat Mencoba
Salam from www.seowas.com

23 Mar 2014