Cara Perbaiki Template Bloger Valid Html 5

chmood
Awalnya saya Malas x Berurusan Sama HtmL lima teman teman Tapi sesudah saya pahamin Tenyata Mudah :3


Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β Β 

Ok teman teman T.I Sniper Kita melangkah Ke Cara Perbaiki Template agar Valid Html 5

Kenapa Blog atau Web Teman Teman harus VALID HTML5

Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :

Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β Β 

 √ Mmbantu Search Engine meng-indeks dokumen website/blog lebih baik.

√ Render browser lebih baik dan lebih cepat

√ DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten

√ Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.

√ Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)

√ Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

Cara Membuat Blog 100% Valid HTML5

Hapus kode <b:include name='quickedit'/> setiap Anda menambah widget baru.


√1 Backup template sebelum melakukan editing.


√2 Cari kode ini


Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β 
HTML

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


√3 Silahkan Anda ganti dengan yang dibawah ini :

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


√4 Ganti kode </html> dengan </HTML> ( pada bagian bawah template Anda )


√5 Cari kode seperti yang di bawah ini :


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


√6 Gatikan seperti yang 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>




√7 Cari kode seperti ini : <b:skin><![CDATA[

√8 Gantikan dengan yang di bawah 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>




√9 Hapus semua kode ini : <b:include name='quickedit'/>


Catatan : Setiap kali Anda menambahkan widget baru, hapus kode di atas.


√10 Hapus semua kode ini : <a expr:name='data:post.id'/> ( Jika Anda temukan = optional ).


√11 Hapus semua kode ini :

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


Atau seperti dibawah ini :


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




√12 Hapus kode dibawah ini jika ketemu ( jika tidak lewati saja )


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

√13 Gantikan semua kode ini & dengan &amp;

Jika cara diatas sudah Anda lakukan bisa dipastikan template sudah Valid HTML5 untuk Homepage.Kecuali pada postingan tentunya masih belum FIX atau masih banyak error .

Jadi langkah yang harus di tempuh berikutnya agar blog menjadi 100% valid HTML5, maka hal hal yang perlu diperhatikan adalah seperti di bawah ini :

Selalu gunakan tag alt pada gambar, contoh :

<img alt=" isikan judul gambar atau judul posting " src="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/bloggingpasuruanblogspotcom.pict1.jpg" />

Hindari penggunaan border="0" pada gambar, sebagai gantinya tambahkan kode :

style="border:none"


atau CSS terpisah seperti


img{border:none}



Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", cari dan temukan lalu ganti dengan kode :


style="border:none;overflow:hidden"


atau CSS terpisah seperti di bawah ini :

Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β 

iframe{border:none;overflow:hidden}


Pada tag a jangan menggunakan tag name seperti di bawah ini :

<a name='comment-form'>


Silahkan Anda ganti menggunakan id seperti :


<a href='#comment-form'>

Β 
Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β 

Jangan ada dua id pada template.

Jangan Lupa.........!

1. LAKUKAN KODE TEMPLATE

Lekukan pada kode HTML template merupakan jarak atau spasi antara kode, atau sebagai perpanjangan kode HTML yang jika kita hapus akan mempunyai arti yang sama, jadi buat apa menyimpannya jika kode tersebut tidak berguna, lebih baik dihapus bukan.!, jadi silahkan periksa kode HTML template anda, jika masih terdapat lekukan silahkan langsung dihapus saja agar template lebih SEO Friendly dan Valid HTML5.

2. FUNGSI KODE DAN PENGHAPUSAN

Trik Ini didasarkan pada pemahaman fungsi kode tersebut pada template, jika anda tidak paham akan kode tersebut untuk menampilkan apa pada blog, jangan nekad untuk menghapus ya, (bisa brabeh urusannya) hehe..!!
Untuk tahap penghapusan saya akan ambil contoh menggunakan kode berikut :

Kode I

<b:include name='quickedit'/>

Kode II

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

Kode III

<div class='post-share-buttons goog-inline-block'>sampai kode penutup </div> pertama

Kode IV

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

Cari dan Temukan kode I,II,III dan IV pada HTML Template anda, gunakan CTRL+F untuk mempermudah pencarian, kalau sudah ketemu, silahkan langsung dihapus saja.

3. MENGUBAH STRUKTUR KODE HTML


Cara ini merupakan pergantian kode-kode tertentu agar web/blog anda lebih mudah dipahami oleh googlebot index, karena fungsi HTML5 ini merupakan technology HTML multimedia yang telah dikembangkan dari versi sebelumnya dengan tujuan agar content halaman pada blog lebih mudah dimengerti dan mudah terbaca oleh mesin pencari Google (googlebot,spider, dll).

Berikut beberapa kode yang perlu diubah/diganti

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

Hapus kode diatas dan gantikan dengan kode berikut:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>

Sampai tahap ini, jika anda melakukannya dengan benar, blog anda sudah mendukung HTML5 Validasi, langkah selanjutnya kembangkan kemampuan anda dalam pemahaman HTML Template Coding Editing secara perlahan.

Demikian tahap sederhana untuk Belajar Mengubah Kode Template Agar Valid HTML5 dari saya. Semoga bermanfaat.


Demikian tutorial Untuk Valid HTML5, semoga bermanfaat....

Yang Mau Tambahin Silahkan........................



Kalau Kurang Bisa Tanyakan Di T.I Sniper Teman Teman "Nanti saya tambahin

Komentar