Home » , , » Cara Membuat Template Blog Valid HTML5

Cara Membuat Template Blog Valid HTML5

Cara Membuat Template Blog Valid HTML5
YANG dimaksud Cara Membuat Template Blog Valid HTML5 ini bukan membuat template baru, tapi mengedit, memperbaiki, atau memodifikasi template yang kita gunakan agar valid atau sesuai dengan program HTML5.

Jika template blog kita valid HTML5, maka menurut para pakar desain web, hal itu akan membuat blog kita mudah dibaca user (pengguna, pengunjung) dan mudah dikenali serta diindeks oleh mesin pencari.

Artinya, valid HTML5 sangat bagus untuk masa depan dan kejayaan blog kita. Seluruh internet browser utama (Firefox, Opera, IE, Chrome, Safari) mendukung HTML5.

Cara Cek Valid HTML5

Untuk mengecek apakah blog kita valid HTML5 atau tidak, bisa gunakan situs ValidatorW3. Blog CB ini mendapatkan data error dan warning: 6 Errors, 1 warning(s) (dengan memasukkan URL) dan 2 Errors, 3 warning(s) (dengan metode Direct Input).

Biarin da ah, yang penting nggak kebanyakan. Bandingkan misalnya dengan detik.com yang dinyatakan punya 221 Errors, 161 warning(s)! Tapi toh detikcom aman-aman saja!

Bahkan, template-template yang diklaim Valid HTML5, saat dicek di sana, masih saja mengandung error. Aneh ya?

Jadi, gimana dong? Itu tadi.... minimal  "jangan kebanyakan" errornya, di bawah 10 deh kayak punya CB ^_^

Cara Membuat Template Blog Valid HTML5

Untuk membuat blog kita valid HTML5, minimal mengurangi errror, maka lakukan langkah-langkah berikut ini. Backup dulu template blog Anda, kalau makin error, atau nanti tampilannya malah acak-acakan, balikin lagi aja ke semula.

Login > klik "Template" > klik "Edit HTML"
1. Cari (CTRL+F) atau temukan kode di bawah ini. Gampang... ada di bagian paling atas!

<!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>

Atau yang 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>

Hapus semuanya dan ganti (replace) dengan kode berikut ini:

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

2. Ganti kode </html> menjadi </HTML>  di bagian akhir/bagian bawah banget template Anda.

3. Hapus kode <b:include data='blog' name='all-head-content'/>
4. Ganti dengan meta tags Valid HTML 5 berikut ini:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' 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 == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

5. Cari dan ganti kode <b:skin><![CDATA[ dengan kode di bawah ini:

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>

6. Ganti kode semua /*------ ----*/ dengan /* dan */ saja. Contohnya kode seperti ini:

/* ---------------------- Related Posts -------------------------*/

Ganti menjadi begini:

/* Related Posts */

7. Hapus Navigasi Baru bawaah blogger! Cari kode <body> dan tambahkan kode di berikut ini di atasnya.

<!-- <body><div></div> -->

8. Hapus ikon QuickEdit atau gambar Obeng+Tang (Screwdriver)! Cari dan hapus semua kode 
<b:include name='quickedit'/> 

Jangan lupa, setiap kali menambah widget baru, akan muncul kode tersebu di template, dan hapus lagi!

9. Temukan kode seperti ini:

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>

Hapus semuanya dan ganti dengan kode berikut ini:

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>

10. Tambahkan kode type = "text/javascript" di semua kode JavaScript dan tambahkan type = "text/css" di semua kode css. Misalnya:

<script src="https://cbblogger.googlecode.com/files/code.js"></script>
<script src="https://cbblogger.googlecode.com/files/cibiblog.css"></script>


Ubah menjadi begini:

<script type="text/javascript" src=""https://cbblogger.googlecode.com/files/code.js"></script>
<script type="text/css" src="https://cbblogger.googlecode.com/files/cibiblog.css"></script>

11. Sembunyikan navigasi halaman (page navigation) di Homepage! (Optional)
Cari kode <b:include name='nextprev'/> dan ganti dengan kode berikut ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

12. Tambahkan "Alt Attributes" di semua gambar/images. Misalnya:

<img height='75' src='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png' width='75'/>

Ubah menjadi begini:
<img alt='no image' height='75' src='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png' width='75'/>

13. Langkah Terakhir Cara Membuat Template Blog Valid HTML5 adalah SAVE Template!

Kalaupun ke-13 langkah di atas tidak 100% membuat template blog kita jadi Valid HTML5, minimal bisa mengurangi error dan warning

Namun, jika langkah di atas malah menjadikan tampilan blog berantakan, balikin aja ke semula. Lakukan langkah "minimal", antara lain: ganti meta tags dan hapus quickedit doang.

Jangan terlalu "pusing" soal valid HTML5 ini. Pilih saja template blog seo dan fokus ke konten! Ingat, Content is STILL the King! Konten tetaplah raja. Maka, utamakan konten berkualitas

Good Luck & Happy Blogging! (www.contohblog.com)

Thanks for reading & sharing Cara Membuat Template Blog Valid HTML5

Previous
« Prev Post

37 comments:

Comment Page:
  1. error 170, warning 19...mau coba tapi masih ragu

    ReplyDelete
    Replies
    1. tu error kebanyakan....! sebaiknya ganti template saja...

      Delete
    2. Update! Gak masalah
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  2. blog saya udh coba cek, http://areakostnetwork.blogspot.com/
    bagian ULR : 2 Errors, 1 warning(s)
    Direct Input: 2 Errors, 3 warning(s)
    ini udah bagusan gk mas?

    ReplyDelete
    Replies
    1. Great, error dikit gak apa-apa.....

      Delete
    2. Makasih mas, tipsnya sangat bermanfaat

      Delete
  3. Makasih mas, tipsnya berhasil mengurangi kesalahan dari 100 menjadi 50. Kereeeen.

    ReplyDelete
    Replies
    1. masih banyak tuh gan, dikurangi lagi kalau bisa. biar pengunjungnya betah di blog agan. hehehe

      Delete
  4. Wah.. thank's tutorialnya gan
    Ane perlu perbaikan lagi ni :)

    ReplyDelete
  5. masih error 3 nih mas, bingung kaga ngarti ane hahaha :D

    ReplyDelete
    Replies
    1. Great! CB aja 6 errornya, gak masalah... yang penting KONTEN BERKUALITAS !

      Delete
  6. makasih mas tutorial nya blog saya udah jadi valid html5, salam kenal

    ReplyDelete
  7. makasi mas info yg sangat bagus ni heheheee

    ReplyDelete
  8. Terima kasih mas sudi berkungsi cara tukar template biasa jadi templat HTML5. Bagus sekali.

    ReplyDelete
  9. Posting yang bagus. tapi ingin bertanya cara agar kotak komentar bisa jadi valid HTML5?
    terima kasih sebelum nya

    ReplyDelete
  10. Langkah ke 9 ko gak ada ya mas, dan langkah ke 12 apa sama dengan menambahkan Alt Attributes di gambar saat membuat artikel...

    ReplyDelete
    Replies
    1. 1. hapus saja semua kode yang ada tulisan "quickedit"
      2. Yes, absolutely right...!

      Delete
  11. di blog saya errornya banyakan yang kaya gini &, apa harus saya ganti seperti ini semuanya : & amp;

    ReplyDelete
    Replies
    1. Gak masalah, gpp, sila baca:
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  12. Secara signifikan memang tidak ada pengaruhnya jika blog valid html5 atau tidak, namun dengan memvalidasi blog serta artikel blog, maka kualitas SEO dan tatanan kode HTML pada blog akan lebih mudah ditangkap search engine, sebab susunan yang menggunakan Validasi HTML5 memberikan dampak positif untuk loading dan perkembangan blog di mata search engine.

    ReplyDelete
    Replies
    1. SePAKAT pak....
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  13. 7 Errors, 4 warning(s) , bang segitu bakalan susah apa nggak

    ReplyDelete
    Replies
    1. Good! No problema.... silakan baca:
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  14. punyaQ 25 error dan 11 warning
    kira2 bgus g..??

    ReplyDelete
    Replies
    1. Silakan baca:
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  15. detik.com errornya 200-an tp kok index di google nya bagus, punya ane juga hampir sama (268 Errors), tp beda SEO nya :)

    ReplyDelete
    Replies
    1. Silakan baca UPDATE nya:
      http://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html

      Delete
  16. Rasanya dah HTML5 blog saya. Saya check errornya banyak. Bagaimana ya kasi errornya kurang. Boleh tolong jelaskannya?

    ReplyDelete
  17. punya saya error nya ada 5. kalau di biarin aja tuh gimana ya, apa ada dampak bahaya ngga ya

    ReplyDelete
    Replies
    1. Gak masalah.... sudah bagus banget error cuma 5... Valid HTML hanya soal tampilan di browser, tidak ada kaitan langsung dengan indeks Google

      Delete
  18. berhasil dah di coba... manfaat sekali

    ReplyDelete
  19. wah patut di coba tuh ditemplate bawaan blogger...terima kasih ya atas informasinya, di bookmarks dulu

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox