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)

37 Komentar untuk "Cara Membuat Template Blog Valid HTML5"

error 170, warning 19...mau coba tapi masih ragu

tu error kebanyakan....! sebaiknya ganti template saja...

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?

Great, error dikit gak apa-apa.....

Makasih mas, tipsnya sangat bermanfaat

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

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

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

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

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

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

makasi mas info yg sangat bagus ni heheheee

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

berhasil dah di coba... manfaat sekali

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

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

Contact Form

Name

Email *

Message *