Cara Membuat Blog Valid HTML5
0 views
Cara Membuat Blog Valid HTML5 - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh Bung Adhy Kompi Ajaib :)
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 :
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.
Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :
ganti dengan :
Langkah 3 : Ganti kode
Langkah 4 : ganti kode ini :
dengan kode di bawah ini :
Langkah 5 : Ganti
Langkah 6 : Hapus semua kode ini :
Setiap kali menambahkan widget baru, hapus kode di atas.
Langkah 7: Hapus semua kode ini (opsional)
Langkah 8 : hapus kode seperti ini :
atau seperti ini :
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)
Langkah 10 : Ganti semua code
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.
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :
1. Selalu gunakan tag
2. Jangan gunakan
atau CSS terpisah seperti
3. Pada iFrame, jangan menggunakan
atau CSS terpisah seperti
4. Pada tag
sebagai gantinya gunakan
5. Jangan ada dua
6. Hapus kode
Artikel selanjutnya : Membuat Halaman Posting Valid HTML5
Semoga bermanfaat...
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 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 + "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 :<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 :
<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 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="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.Artikel selanjutnya : Membuat Halaman Posting Valid HTML5
Semoga bermanfaat...
258 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
setelah tahap homepage selesai, ane coba lihat blog ane..
waw, amazing..jadinya kosong plong tanpa ada isi hanya ada google friend connect..
kenapa yah kang ?
mohon sekali yah kang bantuannya..
gimana nih cara ngatasi masalah yang ini..
http://validator.w3.org/check?uri=cyber-che4t.blogspot.com
tapi gak apa-apa.. demi validasi HTML blog
thanks infonya!
Tolong lah Kang Ismet, oge para senior lainnya. Tulung2,...
saya tanya yang gambar untuk header dan post-title entry-title
<span itemprop='description'>
sudah bingung saya kang, tolong ya kang ismet
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.kenali-negeri.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&st=1&outline=1&No200=1&verbose=1
kalau dihapus gimana ya
http://validator.w3.org/check?uri=http%3A%2F%2Ffirman-ardy.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
tolong pencerahannya
terimakasih ilmu bermanfaat
No, 1 : Silahkan lihat ke atas pada langkah 1
No,2 : lihat judul 'Harap diperhatikan' poin 4
No.3 : ganti widget folower dengan ini http://blog.kangismet.net/2013/08/modifikasi-tampilan-widget-followers-gfc.html
<img src="http://4.bp.blogspot.com/-DQk1iF_kB9Y/UkbrQEKBt1I/AAAAAAAAApQ/vSeriqzOA3U/s1600/324.JPG>
Upiseo.blogspot.com
tlong pencerahannya, aq cuman bingung di no.5 aja nih...
<div id="main-wrapper"/>
<div id="sidebar-wrapper"/>
</div>
<div id="footer>
<div id="outer-wrapper"/>
</div> ada dua id yang sama
mudhon-13.blogspot.com
setiap upload gambar kan otomatis ada border=0
nah biar bisa hilang tanpa hapus manual itu caranya bagaimana?
kemarin coba tambah .post img{border:none} di css kok gak berhasil
mohon bantuannya kang.. :)
tinggal satu code ini yang saya bingungkan.
https://lh5.googleusercontent.com/-XddUITx48iY/UkDqdA2ErvI/AAAAAAAACz4/OUfaGNoruuE/w958-h766-no/Mohon+Bantuannya.bmp
..
TQ kang :D
pada widget yang terdapat <style type="text/css"> tambahkan 'scoped' jadi <style type="text/css" scoped>
https://lh3.googleusercontent.com/-iZugcbcL2As/Uj44-MLMYNI/AAAAAAAAHaw/60mr5bDruOo/s912/My%2520Blog%2520Has%2520Valid%2520HTML5.jpg
kunjung balik yah
ane jadi tambah ilmu lagi niih ..
mantep banget bagi ane yang masih nubie di blog .. :D
Jelas banget, tapi ane mash belum bisa mecahin masalah yg No 10 niih om ..
mohon di perjelas lagi donk :D
Terimakasih om
salam kenal ..
…nt-iframe.g?blogID=8746360420546868922&postID=8623888396615015059' id='comment…
Mas, letak kode di atas dibagian mana iya? mohon bantuannya!
83 ERROR 45 Warning :(
Saya dapat template di Fullblog design gimana mengatasinya
http://validator.w3.org/check?uri=http://kamu-info.blogspot.com
saya udah beberapa kali mencobanya tetep tidak valid, kecuali saya menghapusnya baru valid hehe
Sengaja buat blog anyar ie teh tapi tetep ada yang error
http://validator.w3.org/check?uri=trikseowoles.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0
bantuanya kang plizz
kira-kira apanya ya?
Udah pusing ngutak-ngatik html tapi masih ga valid juga :p
Mohon pencerahannya kang.
http://validator.w3.org/check?uri=www.nulispost.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
2. Pada widget Recent Comment :
- ganti [code]<style type="text/css">[/code] menjadi [code]<style type="text/css" scoped="scoped">[/code]
- ganti
[pre]<script type="text/javascript" src="http://www.nulispost.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&max-results=20"></script>[/pre]
menjadi
[pre]<script type="text/javascript" src="http://www.nulispost.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&max-results=20"></script>[/pre]
Line 1133, Column 177: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…ACM/pGaV81DHeZs/s72-c/Cara+Memasang+Emoticon+Komentar+di+blog.png' width='72'/>
✉
Warning Line 1145, Column 150: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…aUVpp0/UiMa3nUIs4I/AAAAAAAAABY/aE6gyBPsFzo/s72-c/cara+cek+seo.jpg' width='72'/>
bagaimana solusinya kang???
Gimana kang caranya? :D
http://masgober.blogspot.com
[link]http://blog.kangismet.net/2013/08/modifikasi-tampilan-widget-followers-gfc.html[/link]
dan Kode & sangat banyak diblog, emang harus diganti yah??
pami teu sadayanan di robih teu nanaon kang? ngan ngarobih sababaraha langkah hungkul??
salam kenal dari : http://meubeljeparaasli.blogspot.com/
[link]http://validator.w3.org/check?uri=http%3A%2F%2Fblog.kangismet.net%2F2013%2F08%2Fcara-membuat-blog-valid-html5.html[/link]
samentawis mah dikandangan heula kodena kang...
hatur nuhun ..
*Oh ya Kang halaman postingan blog ini masih ada error, kayanya lupa ngasih attribute alt. Makasih udah posting tentang validasi ;)
terima kasih kang
http://html5.validator.nu/?doc=http%3A%2F%2Fbravoseo.blogspot.com%2F2013%2F08%2Fefek-smooth-scrolling-pada-komentar-blog.html&showsource=yes
Thanks sob atas infonya ...
Blog saya banyak yg error,. kalau di edit bener gk ya..? apa ganti template
Blog saya apa gimana yah Kang,.coba di cek di http://karristaent.blogspot.com
Saya nunggu kang Ismet bersedia bikin template yang 100% valid html5 ajalah :p
Di Simpen Aja Dulu Kang..
Oya Kang Mau Tanya... !!
Kenapa Ya Alexa Blog Ku Kok Naek Terus Ga Turun Dari 300 An Sekarang malah 360 An.
Apakah Akang Juga Begitu .. ??
[img]https://lh4.googleusercontent.com/-yf_T1t8Dqtg/Uhsw0O4i_GI/AAAAAAAADXE/eAFTiIIol3M/w719-h288-no/Capture.JPG[/img]
Doain berhasil ya mas. :D
sebelum benar-benar ada jaminan waktu dan inet yang stabil kang ...
TAPI untuk yg customize template, kode brkt sangat berarti nih
<b:include data='blog' name='all-head-content'/>
Banyak lg kode2 and tag conditional yg memakai xml template customize memang harus ada dan tidak bs di hapus (pengalaman urang sih, teuing batur mah). Kalo di delete errot!
good good, keep cepilit :)
Diantosan waleranana...
untuk solusi error 'longdesc' cek lagi di komentar sebelumnya kang (komentar bertingkat mirip wordpress)