Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
4 Jan 2014

Tutorial Membuat Blog Valid HTML5

Valid HTML5 Tutorial Create a Blog - Setelah kemarin sempat membahas artikel terkait seputar HTML5, kali ini saya akan membahas episode selanjutnya dalam penerapannya ke blog.

Tutorial Membuat Blog Valid HTML5

KEUNTUNGAN WEB/BLOG VALID HTML5

1. Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
2. Render browser lebih baik dan lebih cepat
3. DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
4. Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
5. Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
6. Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

BAGAIMANA DENGAN SEO?

Menurut pribadi saya, blog yang bervalid HTML5 bisa meningkatkan kualitas SEO. Ini dikarenakan fungsi HTML5 memperbaiki teknologi HTML agar mendukung teknologi multimedia.

TUTORIAL MEMBUAT BLOG 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;

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

Cara diatas sebenarnya sudah valid, tapi mungkin belum fix 100%. Nah, harap perhatikan poin ini untuk mendapatkan blog valid 100%.

1. Selalu gunakan tag alt pada gambar, contoh :


<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51UdAGcG2RpAwA_GGlZnqvovTyigt00KoLzDK1vk4IFTLIJTy-wN5k_wO4O5WCs-wt8WR5RdH9qo2EzMYL7icUdPpt_xoQaClNmouCCpkQ4-PCHA3sRDCWapbeZtBtTIIlo-mNRsYB74/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.

Resource : http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html

6 Komentar

Saya pelajari dulu ya sob.. kalo asal takut jd masalah, soalnya baru mengenal blogger :)

Silahkan.. yang penting templatenya di Backup

ncepost , ,
salam kenal . . .
tutornya mantap, ,
modah dimengerti

Salam kenal juga dan terima kasih.. :)

hihi mantep gan.. coba pelajari,. hihi sambil jalan" hihi

http://sahabat-renz.blogspot.com

Awas kesasar :D silahkan dipelajari..

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup