DESA CILEMBU
Ganti kemasan produk Anda dengan Kemasan berbahan dasar bambu ramah lingkungan...dimensi bisa request. Lihat GRATIS di DAFTAR HARGA KEMASAN BAMBU

Cara Mudah Validasi HTML5 Blog

Semua yang ada di laman ini adalah kumpulan Validasi HTML5 yang dikumpulkan dari SUMBER TERPERCAYA untuk memudahkan

Validasai W3 HTML5 dan HTML nu  

Blog 100% Valid HTML5

Langkah 1 : Backup template sebelum melakukan editing.
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>
ganti dengan :
<?xml version="1.0" encoding="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 + &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>
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'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<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='&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>
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 &amp;
Selesai

perhatian

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="http://2.bp.blogspot.com/-H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/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.

Breadcrumb

Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markuprdfa, untuk membuatnya valid html5 sobat harus menggunakan markup microdata. Silahkan kunjungi :  Breadcrumbs SEO Friendly dan valid HTML5

Gambar / Image

Apabila sobat mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="http://2.bp.blogspot.com/-XJW14wKp0n4/Ujs4FVUJRrI/AAAAAAAAFgs/s_wh3yLA0Yw/s320/abstract2.jpg" width="320" /></a></div>
hapus imageanchor="1", dan ganti border="0" dengan alt="keterangan gambar".
Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan border="0". Hal yang wajib ditambahkan adalah alt="keterangan gambar" lebih bagus lagi menggunakan tag title. Sebagai contoh menampilkan gambar yang baik:
<img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/>

Tombol Like / Share

Gunakan tombol Like Facebook / Twitter / Google Plus yang valid HTML5. (baca tutorial : Membuat Tombol Twitter, Google +1, dan Like Facebook Valid HTML5)

Related Posts

Ada beberapa script yang saya temui pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti Tutorial Blogger, dengan kondisi seperti itu, membuat white space yang seharusnya Tutorial%20Blogger. Bagi sobat yang menggunakan script ini, saya sarankan untuk membuat label hanya dengan 1 kata saja. Apabila sudah banyak label dengan 2 kata atau lebih, silahkan gunakan Related Posts Valid HTML5.

Widget

Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus <b:include name='quickedit'/> setelah menambah widget baru.
Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSSHTML dan JavaScript di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.
Sebagai gambaran seperti ini :
<style type="text/css">
.home-link{display:none} #blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){ var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt });
</script>
Kode <style type="text/css"> inilah yang menyababkan error, untuk solusinya tambahkan scoped atauscoped='' atau scoped='scoped'. Inilah yang dinamakan Boolean Attribute. Maka kode yang benar menjadi :
<style type="text/css" scoped>

Komentar

Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada 2 alternatif yang saya tawarkan :
1. Gunakan Komentar Google Plus; atau
2. Gunakan Threaded Comments Hack
Apabila sobat menggunakan Thread Comments Hack Valid HTML5, ada beberapa langkah yang harus sobat lakukan dalam validasi html5 ini.
1. Cari semua kode yang seperti di bawah ini (ada beberapa kode)
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' scrolling='no' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
hapus kode-kode berikut ini :
  • allowtransparency='true'
  • frameborder='0'
  • src=''
  • scrolling='no'
  • width='100%'
  • style='display: none'
2. Cari kode seperti ini :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
ganti dengan :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
Validasi HTML5 pada Link Google Font - Setelah berkunjung ke blog Kang  +Adhy Suryadi Kompi Ajaib, saya baru tau Link Font di Tag Head mengakibatkan Error Validasi HTML5. Sepengetahuan saya hal ini sebelumnya tidak terjadi. Entah perbaikan, atau bug pada validator. Soalnya saya coba di Validator yang lain aman-aman saja.
Sebetulnya cara validasi HTML5 pada Link Font di Head sudah dijelaskan pada postingan Kompi Ajaib (baca : Link Font di Head Blog Error Validasi HTML5). Kalau saya simpulkan yaitu dengan dua alternatif yaitu :
1. Memisahkan masing-masing font.
2. Menggunakan @font-face pada CSS.
Rasa penasaran menyelimuti perasaan saya, kenapa bisa error validasi? Sebelum kepada penyebab error, saya contohkan link font yang error seperti ini :
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>
Pesan yang muncul pada validator seperti ini :
Bad value http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald for attribute href on element link: Illegal character in query: not a URL code point.
Selidik punya selidik ternyata permasalahannya ada pada tanda pembatas antar font (|) harus di escape menjadi %7C. Permasalahnnya sama dengan tanda & harus dirubah menjadi &amp;. Jadi dari kode error di atas harus dirubah menjadi
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700%7CRopa+Sans%7COswald' rel='stylesheet' type='text/css'/>

Kode error HTML5 ganti kode :
  • &  jadi  &amp;  
  • <  jadi  &lt;  
  • >  jadi  &gt;  
  • "   jadi  &quot;  
  • ±  jadi  &plusmn; 
PASANG YOUTUBE DIBLOG
Contoh penerapan kontrol koding pada iframe pada embed video YOUTUBE 
<div class="ResponsiveWrapper">
<iframe height="480" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="700"></iframe>
</div>
Biasanya kode embed video Youtube akan seperti di bawah ini:
<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0?rel=0" frameborder="0" allowfullscreen></iframe>
Namun ketika dicek pada validasi HTML5, kode embed di atas tidak valid HTML5. Jadi kalau mau valid HTML5 kodenya harus dirubah, perhatikan kode berwarna merah di atas silahkan ganti dengan tana kutip (") sehingga menjadi seperti di bawah ini.
<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0"></iframe>
Nah dengan cara di atas, kode embed video Youtube sekarang sudah valid HTML5. Namun ternyata setelah dicek untuk skor SEO template, iframe pada kode tersebut error/bad. Nah untuk mengatasinya silahkan gunakan cara di bawah ini.
Ketika Anda klik tombol embed video di Youtube, silahkan gunakan kode embed lama Youtube dengan memberi tanda centang pada "Use old embed code". Dan kodenya akan seperti di bawah ini.
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Perhatikan kode yang berwarna merah, silahkan hapus kode tersebut dan kode yang berwarna biru ganti dengan tanda (/), sehingga penampakannya akan seperti di bawah ini.
<embed src="http://www.youtube.com/v/Bgt9g1q-xj0" width="560" height="315"/>
Nah sekarang coba cek validasi HTML5 di W3C dan skor SEO templatenya di Chkme. 
Demikian Cara Mudah Validasi HTML5 Blog semoga bermanfaat


Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | Created by Kompi ajaib - Powered by Blogger