 |
| Template Blog Valid XHTML |
1. Login ke akun blogger > masuk menu Templates > Edit HTML > beri centang Expand Template Widget
2. Ubah 'deklarasi DOCTYPE, cari kode dibawah
<!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>
hapus semua kode diatas dan ganti dengan kode berikut
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
setelah itu ubah kode </html> menjadi </HTML>
3. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:
/* ----------------------
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Template Hasbi Htc
-------------------------*/
hasilnya menjadi
/* Blogger Template Style
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Template Hasbi Htc */
4. Hapus meta tag <b:include data=’blog’ name=’all-head-content’/>
5. Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya
<!-- <body><div></div> -->
Nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.
6. Menghapus Icon Quickedit atau gambar obeng, cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.
7. Menghapus Post icon, cari kode berikut
<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 dan ganti dengan kode berikut
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
8. Menambahkan jenis type="text/javascript" pada semua kode JavaScript dan type type="text/css" untuk semua css yang ada, baik di templates, posting maupun di widget. Contoh:
<script src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>
<script src="https://bloggergubug.googlecode.com/files/coba.css"></script>
ubahlah menjadi
<script type="text/javascript" src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>
<script type="text/css" src="https://bloggergubug.googlecode.com/files/coba.css"></script>
9. Menyembunyikan page navigation di halaman utama, cari kode <b:include name='nextprev'/> ganti dengan kode berikut
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
10. Menambahkan atribut Alt pada semua gambar, contoh
<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg' width='75'/>
ganti menjadi seperti berikut
<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg' width='75'/>
11. Hapus semua Meta tag yang mengakibatkan Error pada template blog. Gunakanlah meta tag Valid HTML 5 berikut
<b:if cond=’data:blog.pageType == "item"’>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content='Kumpulan Informasi Internet' name='description'/>
<meta content=’Keyword blog anda’ name=’keywords’/></b:if>
<link href=’http://bloganda.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://bloganda.blogspot.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
<link href=’http://bloganda.blogspot.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
<meta content=’kode verifikasi dari google webmaster’ name=’google-site-verification’/>
<meta content=’kode verifikasi alexa’ name=’alexaVerifyID’/>
<meta content=’kode verifikasi dari bing’ name=’msvalidate.01′/>
<meta content=’Nama Anda’ name=’Author’/>
12. Mengatasi error css bundle templates, hapus code <b:skin><![CDATA[ ganti dengan kode berikut
<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>
13. Menyembunyikan widget dihalaman utama.
<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang Mau DiSembunyikan
</b:if>
14. Taruh Script dibawah dibawah tepat dibawah <head>
<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
15. Pada saat posting gambar hapus atribut Anchor='1' dan Border='0' ganti tambahkan atribut alt dan title. contoh berikut adalah format gambar standart blogspot
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" /></a></div>
Rubah menjadi
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Hasbi Htc" title="Template Hasbi Htc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" /></a></div>
16. Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html.
<div style="text-align: center;">Isi Widget</div>
Kira nya itu dulu Membuat Template Blog Lebih Valid XHTML, saya juga pun masih belajar untuk masalah validasi xhtml. Mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar :)
Tidak ada komentar:
Posting Komentar