Valid HTML5 untuk template blogger part.1

template-blogger-valid-html5
Banyak template blogger yang tidak valid dengan markup HTML5. itu di sebabkan dengan beberapa faktor. dan tahukah anda beberapa orang mengatakan kalau template blog kita valid. maka akan berpengaruh terhadap SEO. apa benar..?? saya kurang tahu karena bukan ahli SEO. itu bukan tugas saya terhadap mesin google. naha kita hanya akan belajar mengurangi eror template yang ingin valid dengan HTML5. sebelumnya kita ketahui dulu seberapa besar eror template anda. silahkan check dulu.
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 Valid
Faktor penyebab.
  1. meta tag yang berlebihan yang tidak semua metag di terima HTML5
  2. Widget standar blogger (terutama follower).
  3. Posting yang tampil di homepage.dengan snippet.
  4. Gambar post atau home page.
  5. Pemasangan CSS kurang tepat.
  6. Dll
untuk mengurangi beberapa eror.
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).

license by under 88 blogspot.com
Post By : Denddy
Pranala Luar : Validator.W3C

25 comments:

  1. widget + script yang paling susah menerut sy @@,

    ReplyDelete
  2. kalo mau di bikin valid bisa saja.
    tapi 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

    ReplyDelete
    Replies
    1. saya kurang memahami dengan mesin google.. terutama apa itu SEO.. ~x(
      buteuk pikiran.. hehehe,,, sekarang lebih focus terhadap web design bukan ke mesin directed .. takut banyak yang salah tutorial seo mah.. @@,

      Delete
    2. euh...
      XML <-= 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

      Delete
    3. 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
    4. <?xml version="1.0" encoding="UTF-8" ?>
      knapa 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

      Delete
    5. Kalau kang kapuk mengunakan <html> menjadi hurup besar <HTML> saya malah lain lagi yaitu mengunakan huruf awal saja yang besar <Html> kalau bentuk lengapnya
      <?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]-->

      Delete
    6. tidak masalah karena penggunaan HTML template tidak case sensitive

      Delete
  3. say kurang ngerti yg beginian.
    oh iya ngemeng2 ada lgi ga mas template yg seperti ini?
    saya pengen nih, tapi yg kharatis :p

    #ngarep :p

    ReplyDelete
    Replies
    1. banyak kok yang share template blogger valid HTML5 di google ..
      manggil mas kaya orang jowo ... hehehe

      Delete
  4. 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

    ReplyDelete
  5. Masalah yang mudah teratasi, kini blogger dapat 100% valid, "www.boomtemplate.com" Visit Free Blogger Templates Valid .. Smoga brmanfaat.

    ReplyDelete
  6. Mantap bang, aku coba dulu Nich..
    Mungkin sangat merepotkan membuat-nya trutama newbie kayak saya ini kata mas ben..

    ReplyDelete
  7. sip udah berkurang errornya meskipun sedikit :D \o/

    ReplyDelete
  8. solusi yang sangat bermanfaat mas denddy,
    o 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...

    ReplyDelete
  9. Line 224, Column 31: script element between head and body.


    Line 224, Column 31: Cannot recover after last error. Any further errors will be ignored.



    Hal ini membunuhku

    ReplyDelete
  10. Hahahahhaah...
    untung saya sudah valid :)

    ReplyDelete
  11. Thank Mas, tutorial yang patut diapresiasi, salam sukses:)

    ReplyDelete
  12. Ternyata banyak juga yang bikin tutor Valid HTML5 selain saya T.T
    Semoga 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/

    ReplyDelete
  13. wih, artikelnya bisa membantu nih mas

    Blogwalking Sob
    http://www.dimazshare.blogspot.com

    ReplyDelete
  14. ada masalah di
    <link href='data:blog.postImageThumbnailUrl' rel='image_src'/>

    link gambar tidak mau muncul.


    Salam,
    Informasi dan Review

    ReplyDelete
    Replies
    1. seharusnya <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>


      Salam,
      Informasi dan Review

      Delete
  15. wahhh templatenya keren deh tapi kokk template saya masih banyak yang error ya.tlong dong bntuin ngebershin

    ReplyDelete
  16. udah gua coba ganti yg atas dengan yg ini ↓
    !DOCTYPE html
    html
    head
    qo ga bisa bro ?

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top