Bagaimana Cara Cek Dan Memperbaiki Validasi html 5
Cara mengetahu mengetahui validasi template blog yang kita gunakan dan cara mempebaikinya.
akses https://validator.w3.org/ masukan url pada kolom Address dan klik check
Langkah 1 : Backup template sebelum melakukan
editing.
Langkah 2 : Cari kode seperti ini :
Langkah 2 : 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>
<!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>
ganti dengan :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di
template)
Langkah 4 : ganti kode ini :
<b:include data='blog'
name='all-head-content'/>
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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 ==
"item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
Langkah 5 : Ganti <b:skin><![CDATA[ dengan
kode dibawah :
<link
href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css'
rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
Langkah 6 : Hapus semua kode ini :
<b:include name='quickedit'/>
Setiap kali menambahkan widget baru, hapus kode di
atas.
Langkah 7: Hapus semua kode ini (opsional)
<a expr:name='data:post.id'/>
Langkah 8 : hapus kode seperti ini :
<b:include data='post'
name='postQuickEdit'/>
atau seperti ini :
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + 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>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + 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>
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan,
kalau tidak ada, lewati saja)
<div class='post-share-buttons
goog-inline-block'>...sampai...</div>
Langkah 10 : Ganti semua code & dengan
&
Sampai di sini, template sobat sudah bisa Valid HTML5
untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar
blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share
cara mem-fix-an postingan.
Harap Diperhatikan
Kemungkinan dengan langkah-langkah di atas, blog sobat
belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini
:
1. Selalu gunakan tag alt pada gambar, contoh :
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0LIjnDC760POcPi8QZq64pceiU7sy319eYHvZW4sDIJP3owmpnHxkgNblP1xQHZF8PKr62wC4Qq4tyaKVPjwFLKvp41vEMr2AuoK6X1D7IRcaCAuw9S11eKpY4r0OiR1gyUbsR6AV3sE/s1600/html5.png"
/>
2. Jangan gunakan border="0" pada gambar, sebagai
gantinya tambahkan kode :
style="border:none"
atau CSS terpisah seperti
img{border:none}
3. Pada iFrame, jangan menggunakan frameborder="0" atau
allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :
style="border:none;overflow:hidden"
atau CSS terpisah seperti
iframe{border:none;overflow:hidden}
4. Pada tag a jangan menggunakan tag name seperti :
<a name='comment-form'>
sebagai gantinya gunakan id seperti :
<a href='#comment-form'>
5. Jangan ada dua id pada template.
6. Hapus kode <b:include
name='quickedit'/> setiap menambah widget baru.
Selesai.
