Cara Membuat Template Blog Valid HTML5
June 20, 2014
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>
<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>
<!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'/>
<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:
5. Cari dan ganti kode <b:skin><![CDATA[ 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>
<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>
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' /> <style type="text/css"> <!-- /*<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'/>
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>
<!-- 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:
10. Tambahkan kode type = "text/javascript" di semua kode JavaScript dan tambahkan type = "text/css" di semua kode css. Misalnya:
Ubah menjadi begini:
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
<!-- 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>
<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>
<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>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
12. Tambahkan "Alt Attributes" di semua gambar/images. Misalnya:
<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwr6A4SvhexbBe7l0xBaY5FN-JHhu_XiQF0h3GVMxhGa3mcUaIB4nxf0whgI5yIXlunzu37K1JqncX5X2Kc1tFBIhy6-7WO26J9vAcdGSgrxTDi0E8PA8zBaJSPSakWZtuPxyUfAxthYw/s1600/logo.png' width='75'/>
Ubah menjadi begini:
<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwr6A4SvhexbBe7l0xBaY5FN-JHhu_XiQF0h3GVMxhGa3mcUaIB4nxf0whgI5yIXlunzu37K1JqncX5X2Kc1tFBIhy6-7WO26J9vAcdGSgrxTDi0E8PA8zBaJSPSakWZtuPxyUfAxthYw/s1600/logo.png' width='75'/>
Ubah menjadi begini:
<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwr6A4SvhexbBe7l0xBaY5FN-JHhu_XiQF0h3GVMxhGa3mcUaIB4nxf0whgI5yIXlunzu37K1JqncX5X2Kc1tFBIhy6-7WO26J9vAcdGSgrxTDi0E8PA8zBaJSPSakWZtuPxyUfAxthYw/s1600/logo.png' width='75'/>
13. Langkah Terakhir Cara Membuat Template Blog Valid HTML5 adalah SAVE Template!
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)
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
error 170, warning 19...mau coba tapi masih ragu
ReplyDeletetu error kebanyakan....! sebaiknya ganti template saja...
DeleteUpdate! Gak masalah
Deletehttp://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html
blog saya udh coba cek, http://areakostnetwork.blogspot.com/
ReplyDeletebagian ULR : 2 Errors, 1 warning(s)
Direct Input: 2 Errors, 3 warning(s)
ini udah bagusan gk mas?
Great, error dikit gak apa-apa.....
DeleteMakasih mas, tipsnya sangat bermanfaat
DeleteMakasih mas, tipsnya berhasil mengurangi kesalahan dari 100 menjadi 50. Kereeeen.
ReplyDeletemasih banyak tuh gan, dikurangi lagi kalau bisa. biar pengunjungnya betah di blog agan. hehehe
Deletethenk`s
ReplyDeleteWah.. thank's tutorialnya gan
ReplyDeleteAne perlu perbaikan lagi ni :)
masih error 3 nih mas, bingung kaga ngarti ane hahaha :D
ReplyDeleteGreat! CB aja 6 errornya, gak masalah... yang penting KONTEN BERKUALITAS !
Deletemakasih mas tutorial nya blog saya udah jadi valid html5, salam kenal
ReplyDeletemakasi mas info yg sangat bagus ni heheheee
ReplyDeleteTerima kasih mas sudi berkungsi cara tukar template biasa jadi templat HTML5. Bagus sekali.
ReplyDeletePosting yang bagus. tapi ingin bertanya cara agar kotak komentar bisa jadi valid HTML5?
ReplyDeleteterima 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...
ReplyDelete1. hapus saja semua kode yang ada tulisan "quickedit"
Delete2. Yes, absolutely right...!
di blog saya errornya banyakan yang kaya gini &, apa harus saya ganti seperti ini semuanya : & amp;
ReplyDeleteGak masalah, gpp, sila baca:
Deletehttp://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html
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.
ReplyDeleteSePAKAT pak....
Deletehttp://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html
7 Errors, 4 warning(s) , bang segitu bakalan susah apa nggak
ReplyDeleteGood! No problema.... silakan baca:
Deletehttp://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html
punyaQ 25 error dan 11 warning
ReplyDeletekira2 bgus g..??
Silakan baca:
Deletehttp://contohblognih.blogspot.com/2015/02/template-blog-valid-html-seo-indeks-google.html
detik.com errornya 200-an tp kok index di google nya bagus, punya ane juga hampir sama (268 Errors), tp beda SEO nya :)
ReplyDeleteSilakan baca UPDATE nya:
Deletehttp://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?
ReplyDeleteTerima kasih
ReplyDeletethanks. i make it :-D
ReplyDeletepunya saya error nya ada 5. kalau di biarin aja tuh gimana ya, apa ada dampak bahaya ngga ya
ReplyDeleteGak masalah.... sudah bagus banget error cuma 5... Valid HTML hanya soal tampilan di browser, tidak ada kaitan langsung dengan indeks Google
Deleteberhasil dah di coba... manfaat sekali
ReplyDeletesaya hampir seribu :v
ReplyDeletewah patut di coba tuh ditemplate bawaan blogger...terima kasih ya atas informasinya, di bookmarks dulu
ReplyDeleteSusah nemuin releted post
ReplyDeletegan valid html 5 ini berpengaruh besar ga sih artikel muncul di page one?
ReplyDeletemaaf gan tanya nya aneh masih baru ngenal blog nih
valid html 5 tidak ngaruh ke SEO, hanya pengaruhi desain tampilan, gak valid html 5 gak masalah asalkan artikelnya bagus-bagus
Delete193 error. 70 warning..
ReplyDeleteKebanyakan punya ane😂😂
Di baca dulu panduannya, semoga berhasil
ReplyDelete