NB : Template Blogger yang valid hanya pada halaman homepage atau halaman depan blog. dan tutorial ini hanya untuk mengurangi sebagian belum sepenuhnya jika template anda terlalu banyak yang eror.
Demo Valid Check ValidFaktor penyebab.
- meta tag yang berlebihan yang tidak semua metag di terima HTML5
- Widget standar blogger (terutama follower).
- Posting yang tampil di homepage.dengan snippet.
- Gambar post atau home page.
- Pemasangan CSS kurang tepat.
- Dll
pastikan dulu template anda sudah menggunakan Doctype HTML5. caranya...
pada bagian atas template anda lihat barisan code yang mirip 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 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 code ini .
<!DOCTYPE html> <html> <head>Dan jika ada kesalahan pada tag head feed. maka cari code
<b:include data='blog' name='all-head-content'/>dana ganti dengan code di bawah :
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://under-88.blogspot.com/feeds/posts/default' rel='alternate' title='CSS Tutsplus Design - Atom' type='application/atom+xml'/>
<link href='http://under-88.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='CSS Tutsplus Design - RSS' type='application/rss+xml'/>
<link href='http://www.blogger.com/rsd.g?blogID=MASUKAN_ID_BLOG' rel='EditURI' title='RSD' type='application/rsd+xml'/>
<link href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<link href='http://www.blogger.com/profile/11256212643663337235' rel='me'/>
<!-- deskripsi dan keyword -->
<meta content='Description Blog Anda' name='description'/>
<meta content='Keywords Blog Anda' name='Keywords'/>Ganti semua code yang di garis bawahi dengan settingan blog anda
di atas saya tidak menyertakan tag rel="publisher". karena mendeteksi tidak valid alias eror.Tips kedua.
Valid html yang sulit kita sadari adalah penempatan CSS yang kurang baik.
seharusnya CSS di simpan dalam satu baris dan tidak boleh berada dalam property
<div> . semua css harus benar-benar berada dalam stylesheet sebaris.contoh pada template anda simpan css di atas
]]</skin> atau di bawahnya.jika berada di bawahnya gunakan pembungkus CSS seperti ini.
<style type='text/css'> -- isi code css di sini -- </style>Tips ketiga
Widget sidebar dengan widget Followers. saya kurang tahu bagaimana mengatasi eror pada widget ini agar valid html5. kalian bisa carinya di google.
karena itu pula saya menghilangkan widget follower dan menggantinya dengan text link anchor saja karena kegunaanya sama saja. dan saya sendiri tidak terlalu tertarik dengan banyaknya follower.
mungkin saat ini saya hanya bisa menuliskan sebagainnya. karena agar valid sempurna kita harus belajar dari awal. dan terlalu panjang untuk saya jelaskan semuanya.
nanti kita akan bahas pada artikel kedua (part2).
Pranala Luar : Validator.W3C
widget + script yang paling susah menerut sy @@,
ReplyDeletekalo mau di bikin valid bisa saja.
ReplyDeletetapi harus di ingat 1 hal, google membuat blogspot dengan bahasa XML ada tujuan tersendiri. jadi bila kita membuat valid mengikuti syntax HTML5, takutnya ke depan akan merepotkan bagi yg new bie spt saya
just suggestion bro
saya kurang memahami dengan mesin google.. terutama apa itu SEO.. ~x(
Deletebuteuk pikiran.. hehehe,,, sekarang lebih focus terhadap web design bukan ke mesin directed .. takut banyak yang salah tutorial seo mah.. @@,
euh...
DeleteXML <-= perhatikan sok pas di Next Blog yg ada di navbar, tuh pakek XML. Kalo kita hilangkan <?xml version="1.0" encoding="UTF-8" ?>
yg lain sy jg tidak tauk atuh :D
Setuju kang beben, kata orang pinter tuh: lain ladang lain belalang, jadi lain bahasa bisa jadi lain pembacaannya. Apalagi kayak gw yang awam masalah apa tuh XML ma HTML 5
Delete<?xml version="1.0" encoding="UTF-8" ?>
Deleteknapa harus dihilangkan kl bikin HTML5...
Pakai trik original saya, yaitu dengan merubah <html> <-- dengan huruf kecil...ganti dengan <HTML> <-- dengan huruf besar
Jangan lupa tag penutupnya jg ganti dengan </HTML>
kapukonline.com/2012/08/cara-membuat-merubah-template-html5.html
Kalau kang kapuk mengunakan <html> menjadi hurup besar <HTML> saya malah lain lagi yaitu mengunakan huruf awal saja yang besar <Html> kalau bentuk lengapnya
Delete<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<Html>
<head>
Tapi masih belum bisa juga valid tanpa ada tambahan script lain seperti <!--[if IE]>..bla..bla..bla...<![endif]-->
tidak masalah karena penggunaan HTML template tidak case sensitive
Deletesay kurang ngerti yg beginian.
ReplyDeleteoh iya ngemeng2 ada lgi ga mas template yg seperti ini?
saya pengen nih, tapi yg kharatis :p
#ngarep :p
banyak kok yang share template blogger valid HTML5 di google ..
Deletemanggil mas kaya orang jowo ... hehehe
kalau dari saya sih manfaat Valid HTML5 sih untuk menggenerate alexa rank dan kawan2nya. Walau blog jarang update saya yakin rank alexa pun masih ramping. salam kenal sob sejutatrik.blogspot.com
ReplyDeleteMasalah yang mudah teratasi, kini blogger dapat 100% valid, "www.boomtemplate.com" Visit Free Blogger Templates Valid .. Smoga brmanfaat.
ReplyDeleteMantap bang, aku coba dulu Nich..
ReplyDeleteMungkin sangat merepotkan membuat-nya trutama newbie kayak saya ini kata mas ben..
sip udah berkurang errornya meskipun sedikit :D \o/
ReplyDeleteikutnyimak dulu mas
ReplyDeletesolusi yang sangat bermanfaat mas denddy,
ReplyDeleteo ya mas, kenapa kalau gadget google translate kita pasang, template malah jadi doubel H1-nya ?
maaf kalau pertanyaan saya keluar dari topik bahasan,
Terima kasih atas bantuan mas Denddy sebelumnya...
Line 224, Column 31: script element between head and body.
ReplyDelete✉
Line 224, Column 31: Cannot recover after last error. Any further errors will be ignored.
Hal ini membunuhku
Hahahahhaah...
ReplyDeleteuntung saya sudah valid :)
Ternyata banyak juga yang bikin tutor Valid HTML5 selain saya T.T
ReplyDeleteSemoga kita dapet bersaing secara sehat :D
Yang semangat ya sob, Blogger Indonesia harus tetap berjuang jangan mau kalah sama Blogger luar negri ^^
-------------------------------------------
Blogwalking
http://zone-uchiha.blogspot.com/
wih, artikelnya bisa membantu nih mas
ReplyDeleteBlogwalking Sob
http://www.dimazshare.blogspot.com
ada masalah di
ReplyDelete<link href='data:blog.postImageThumbnailUrl' rel='image_src'/>
link gambar tidak mau muncul.
Salam,
Informasi dan Review
seharusnya <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
DeleteSalam,
Informasi dan Review
wahhh templatenya keren deh tapi kokk template saya masih banyak yang error ya.tlong dong bntuin ngebershin
ReplyDeleteudah gua coba ganti yg atas dengan yg ini ↓
ReplyDelete!DOCTYPE html
html
head
qo ga bisa bro ?