Cara Membuat BLOG Anda VALID HTML5

Cara Membuat BLOG  Anda VALID HTML5

HTML5 sebenarnya adalah pengembangan dari versi sebelumnya yang bertujuan  untuk memperbaiki teknologi HTML untuk mendukung teknologi multimedia dan juga mudah dimengerti oleh mesin.
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.

Demikian tutorial Cara Membuat Blog 100% Valid HTML5, semoga bermanfaat....


Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

12 comments

Write comments
October 5, 2014 at 2:53 AM delete

Wuuiiiih ini lagi..! yang saya cari.... makasih infonya :)

Reply
avatar
October 6, 2014 at 4:29 AM delete

sama sama... ada problem ? tinggalkan komentar , insyaAllah saya coba bantu :)

Reply
avatar
November 30, 2014 at 8:34 PM delete

Terimakasih untuk infonya sangat bermanfaat, akan saya coba langsung di blog saya perawatanwajah.co.id

Reply
avatar
April 28, 2015 at 11:23 PM delete

Hi friends, This is Rebeka from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML5 Training in Chennai at FITA academy, Its really useful for me to make a bright future.



Reply
avatar
July 17, 2015 at 6:23 AM delete

Udah saya coba tp ga berhasil bro, gmn ya? bisa bantuin bro?

Reply
avatar
August 2, 2015 at 6:29 AM delete

gan, ane sudah coba praktekkan di blog ane tapi koq malah jadi error templatenya yaa?
pas buka webmasternya juga jadi error, mungkin sehubungan dengan yg poin 6 itu memang harus diganti dengan kode itu semua yaa?
suwun

Reply
avatar
Fayad Grafika
AUTHOR
September 2, 2015 at 7:12 PM delete

kok blog punya masnya juga masih banyak yang error..

Reply
avatar
September 3, 2015 at 9:11 AM delete

menuju 100% VALID memang susah,,, Google aja jg ada yang tidak Valid HTML. Intinya Sobat harus bisa meminimalkan ERROR itu saja ! se minim mungkin..

Reply
avatar
September 24, 2016 at 12:50 AM delete

hmmm eror, udah cape ganti sana sini tapi hasilnya tetap sama
tapi thanks postingannya nanti saya usahain lagi sampe bisa

Reply
avatar
Dewi Aja
AUTHOR
October 22, 2016 at 10:59 PM delete

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply
avatar