Cara Membuat Template Blog Valid XHTML -
Cara Membuat Template Blog Valid XHTML - Mungkin sudah banyak yang bahas tentang
Cara Membuat Template Blog Valid XHTML namun tidak ada salahnya saya berbagi kepada yang belum tahu. Tujuan dari membuat template blog valid XHTML adalah agar blog semakin dekat dengan google, jadi robot google dapat dengan mudah mencari dan melacak blog anda. Untuk yang penasaran ingin mencoba mengetes apakah blog nya sudah Valid XHTML bisa langsung menuju ke
http://validator.w3.org/ cukup masukkan url blog kamu dan enter secara otomatis web akan menampilkan beberapa kesalahan yang terjadi pada template blog kamu.
Cara Membuat Template Blog Valid XHTML
1. Login ke akun blogger anda
2. 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">
<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 kode diatas dan ganti dengan kode dibawah ini :
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
4. Lalu cari dan ganti kode
</html> menjadi
</HTML>
5. Menghapus
comment declaration yang ada pada CSS, cari kode
dash ( ----- ) dan hapus semuanya. contoh:
/* ----------------------
Name: 4JIE BLOG TEMPLATE EDITION
Author : Fajri Alhadi
-------------------------*/
Menjadi
/* 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="http://2.bp.blogspot.com/-G96JSCUaOCM/UNUqjdoV_5I/AAAAAAAABOo/GFq2jwxi6KI/s1600/4jiee.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-G96JSCUaOCM/UNUqjdoV_5I/AAAAAAAABOo/GFq2jwxi6KI/s1600/4jiee.png" /></a></div>
Ubah menjadi
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-G96JSCUaOCM/UNUqjdoV_5I/AAAAAAAABOo/GFq2jwxi6KI/s1600/4jiee.png" style="margin-left: 1em; margin-right: 1em;"><img alt="4JIE BLOG" title="Blogger Tutorial" src="http://2.bp.blogspot.com/-G96JSCUaOCM/UNUqjdoV_5I/AAAAAAAABOo/GFq2jwxi6KI/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 :)
Cara Membuat Tooltip Otomatis Di Semua Title - Kalau sebelumnya saya pernah posting tentang Cara Membuat Tooltips Dengan Jquery kali ini saya mau share Cara Membuat Tooltip Otomatis Di Semua Title. Kalau dulu, kita harus memasukkan kembali syntax HTML agar tooltips muncul, namun kali ini gak perlu capek-capek memasukkan syntax HTML lagi kedalam postingan. Sebab, tooltip ini hadir secara otomatis dan hanya mendeteksi link/gambar yang memiliki title. Jadi, cukup dengan menambahkan title di masing-masing gambar/link dan tooltip akan tampil. Oh ya untuk preview nya bisa liat gambar dibawah ini.
