Cara Membuat Template Blog Valid XHTML
1. Login ke akun blogger anda2. Pilih Template -> Edit Template (Backup terlebih dahulu template anda)
3. Cari kode seperti berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Hapus kode diatas dan ganti dengan kode dibawah ini :
<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>
<!DOCTYPE html>4. Lalu cari dan ganti kode </html> menjadi </HTML>
<HTML>
<head>
<meta charset='utf-8'/>
5. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:
/* ----------------------Menjadi
Name: 4JIE BLOG TEMPLATE EDITION
Author : Fajri Alhadi
-------------------------*/
/* Blogger Template Style
Name: 4JIE BLOG TEMPLATE EDITION
Author : Fajri Alhadi*/
6. Cari dan hapus meta tag ini <b:include data=’blog’ name=’all-head-content’/>
7. Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya
<!-- <body><div></div> -->
Nanti akan muncul notifikasi untuk menghapus widget, silahkan pilih hapus
8. 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.
9. 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>
Ganti dengan kode berikut ini
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
10. 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://javascript16.googlecode.com/files/sumbercopas.js"></script>
<script src="https://javascript16.googlecode.com/files/coba.css"></script>
Ubah Menjadi seperti kode dibawah ini
<script type="text/javascript" src="https://javascript16.googlecode.com/files/sumbercopas.js"></script>
<script type="text/css" src="https://javascript16.googlecode.com/files/coba.css"></script>
11. 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>
12. Hapus semua meta tag yang membuat template error/ tidak valid dan ganti dengan meta tag valid dibawah ini.
<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’/>
13. 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>
14. Menyembunyikan widget dihalaman utama
<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang ingin disembunyikan
</b:if>
15. Taruh Script dibawah dibawah tepat dibawah <head>
<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
16. 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/AVvXsEiFaadZwc-zZ2eyBBJ5oZ20viZDbsgFp5sJ2uZv95019-ueKNvEmOurGkpDtD2wb33oL9nBUhzL1wXOYvZhwRtDJZQVYYmFnip2l4VQgKvho2dM3jv8MJtEb-v9kAdT97m7smXA_mFwLVsL/s1600/4jiee.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaadZwc-zZ2eyBBJ5oZ20viZDbsgFp5sJ2uZv95019-ueKNvEmOurGkpDtD2wb33oL9nBUhzL1wXOYvZhwRtDJZQVYYmFnip2l4VQgKvho2dM3jv8MJtEb-v9kAdT97m7smXA_mFwLVsL/s1600/4jiee.png" /></a></div>
Ubah menjadi
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaadZwc-zZ2eyBBJ5oZ20viZDbsgFp5sJ2uZv95019-ueKNvEmOurGkpDtD2wb33oL9nBUhzL1wXOYvZhwRtDJZQVYYmFnip2l4VQgKvho2dM3jv8MJtEb-v9kAdT97m7smXA_mFwLVsL/s1600/4jiee.png" style="margin-left: 1em; margin-right: 1em;"><img alt="4JIE BLOG" title="Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaadZwc-zZ2eyBBJ5oZ20viZDbsgFp5sJ2uZv95019-ueKNvEmOurGkpDtD2wb33oL9nBUhzL1wXOYvZhwRtDJZQVYYmFnip2l4VQgKvho2dM3jv8MJtEb-v9kAdT97m7smXA_mFwLVsL/s1600/4jiee.png" /></a></div>
17. Terakhir, 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>
Simpan dan selamat mencoba, buat yang sudah mencoba boleh berbagi pengalaman ke saya melalui komentar dibawah ini :)
No comments:
Post a Comment