Cara Membuat Blog Valid HTML5
Kang Ismet
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnDEQTA6MBQRGXw_IO0xkk4hTkBsVKzX_zl2L7b_M59yoFtAGzXbNDuMuN6ZY2Y6ojOZDCHWP5viAzgAYOrDbEWSXtYbjmP-5IQN9vbw5g3tR8lCrmvB8TEYbpe2uQeeErtSA1jXzDE0/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...
terimakasih kawan-kawan sudah memberikan banyak petunjuk tentang validasi html 5, blog saya sudah ( Passed, 1 warning(s) )
ini urlnya silahkan di cek:
http://ubuntu-gnome.blogspot.com/
mantap
jengkel lihat template kang is..... buat kepingin aja
hahahhaha...
Aduh kang pusing... udahlah masih banyak yg eror http://html5.validator.nu/?doc=http%3A%2F%2Fjikindra.blogspot.com%2F&showsource=yes,,, muncul ginian lagi https://lh3.googleusercontent.com/-gyIpalxrbOI/Up7nbaT7e4I/AAAAAAAAAOE/aMP0lP44WJs/w890-h503-no/eror.jpg
minta pencerahannya kang....
mantap deh info nya.
punya saya udah valid wkwkwk :D
Kang, kalo tidak ada kode <b:include data='blog' name='all-head-content'/> gimana ya ???
Kang. semua kode & harus di ganti sama kode & , berarti pegel banget tuh tangan...
Kang, please help me link here
:( http://html5.validator.nu/?doc=http%3A%2F%2Fwww.thuthuatpro.info&showsource=yes
sip deh udah saya laksana kan
langsung mantap hasilnya kang :D
terima kasih sebanyak-banyak nya banyak banget @@,
kang mohon bantuannya punya saya sisa 2 :
Line 764, Column 142: & did not start a character reference. (& probably should have been escaped as &.)
…ncodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return fa…
Error Line 764, Column 159: & did not start a character reference. (& probably should have been escaped as &.)
…(location.href)+'&langpair=id%7cen&hl=en'); return false;' rel='nofoll…
dimanakah letak kesalahannya ya kang..?
kang, semua kode "" jadi error..
mohon solusinya kang..
kang, semua kode "variable name" jadi error..
mohon solusinya kang..
kang, masalah yang ke 2 ini kang..
waktu di-save muncul pesan "template-skin only available for templates version 2 and above" kang..
blognya yang mana ya?
<img src="http://3.bp.blogspot.com/-0VgbhQRq_rk/UraCQbCi-oI/AAAAAAAAA90/mjHmO-DfefM/s1600/error+html5.png"/>
Saya sudah tambahkan scoped, spcoped=' ', atau pun scoped tapi tetep aja dapet error kaya gitu. Bantu kang, cuma 2 error lagi udah finish.
Gak jadi nanya kang. Ane sudah sukses memecahkannya dan udah valid HTML5. Gak sia-sia usaha keras, mencoba, gagal, dan akhirnya berhasil. Thanks kang atas artikel tentang HTML 5 sangat membantu.
jadi gimana kang solusinya??
wow, jazakumullah kang, blog saya makin kenceng deh hehehe, thanks alot! :D
aduh lieur euy kang ngulik template teh,,,aya template anu harga 100 rb teu kang,,rek meli welah :D anu suport keur adsanse
Kali di di penjelasannya ada kalimat >> Element style is missing required attribute scoped.
Gimana itu kang??
Dari Lensa Globe [dot] blogspot
Kang plis help me, saya utak utik sebelumnya memang berkurang, tapi tampilan home page jadi amburadul Kang, dari 3 kolom langsung jadi 2 kolom, stress Kang.
Mulai error waktu Langkah ke 6, error di widget middle nya, tulisan more tidak pada posisinya...
Langkah ke 7, 8, 9 semuanya langsung error :(
jadi terpaksa saya balikin lagi ke seperti semula jadi tidak valid :(
Maap Kang, mau nanya lagi hehehe....
Sisa ini Kang :
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.smuainfo.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
Semoga bisa dikasi pencerahan Kang :D
kang, gimana nih jadinya solusinya?
saya ga bisa spekulasi... harus liat dari dashboard kodenya
susah gan
Hadeeehhh blog ku udah berbulan2 belum valid html5, padahal sudah ikutin tutorial ini =(
mungkin lankahnya ada yang kelewat :D
Kang Ismet kalo tampil error seperti ini penangannanya bagaimana
[img]http://3.bp.blogspot.com/-zbOEoXApWLk/Ur22R5kkqXI/AAAAAAAACag/mEsmW2279i4/s1600/PrtScr+capture.jpg[/img]
biasanya salah penempatan script
dicoba dulu kang :D