Cara Membuat Blog Valid HTML5 - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh
Kang Ismet dan Blog Krizeer (yoga-tc).Apa itu HTML5? HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.
Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah :
- Membantu 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.
Baguskah validasi Blogspot untuk SEO? Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO.
Cara Membuat Blog 100% Valid HTML5Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini (
Wajib !!) :
<?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) (
Wajib !!)
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'/>
<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>
Langkah 5 : Ganti
<b:skin><![CDATA[ dengan kode dibawah (
Wajib !!) :
<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>
Langkah 6 : Hapus semua kode ini (
Wajib !!) :
<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>
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 DiperhatikanKemungkinan 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/AVvXsEghYonZxNu9LUUD2CgX4RKbx8ga2anHB5I9NB8A6iUpcly7LOkYOPS6vyHf_xOqgiVeIsBT-C20rFO-qiZcCNWlwJJugSLbr4n2AzJWBOtcLOGd7zB4vIm59qDOpsyIdPmfkBSBx7IrrZQ/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.
Artikel selanjutnya :
Membuat Halaman Posting Valid HTML5Sumber : http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html
gan oot nih, ane pake template nya http://yoga-tc.blogspot.com/2013/10/free-premium-light-blue-responsive.html (ini punya mu kan?) cara ngilangin
BalasHapus(pertanyaan di gambar) Gimana?
http://1.bp.blogspot.com/-KHAbnudqK24/UsIbwgvlOPI/AAAAAAAAA0M/XSL3XABQxyU/s1600/per.png
1. cari kode ini :
Hapus.mobile #header-left,.profile-link,.navigation,#navigation,#menu,.menu,#footer .right,.mobile #sidebar .item-thumbnail{display:none!important}
2. Lalu ganti kode diatas dengan kode dibawah ini :
.mobile #header-left,.profile-link,.navigation,#navigation,#menu,.menu,#footer .right,.mobile #sidebar .item-thumbnail,#cssmenu,#navxnya{display:none!important}
sip, udah bener gan, plus saran dikit verivikasi kata nya dihilangin biar komen gak sulit
HapusDashboar -> setelan -> pos dan komentar -> moderasi komentar ? -> ubah menjadi "tidak pernah" -> simpan setelan
HapusSebenarnya cara yang ditunjukan Yoga Pratama itu tidak menghilangkan tetapi menyembunyikan. :) Jadi menu tersebut masih ada hanya saja disembunyikan.
HapusMungkin kang Yoga salah tangkap, maksudnya Farij itu dia memberi saran kepada sampean agar menghilangkan captcha karena dirasa menggangu... :)
Hapusowh begitu ya, sudah saya hilangkan sob
Hapusmeluncur gan
BalasHapussilahkan gan
Hapusmobile priceyou can get latest news about results from here
BalasHapusmobile
BalasHapuspricethe lates news and reviews about mobile in
Bangladesh