Cara Membuat Template Blog Lebih Valid XHTML -
Mengurangi Jumlah Error Templates Blogspot. Mungkin banyak yang sudah membahas mengenai cara membuat
template blog valid xhtml atau
valid html5
dengan mengurangi jumlah error pada template dan widget. Dimana semakin
berkurang jumlah error pada template, maka akan mempermudah robot
menelusuri blog kita dan tentunya mempengaruhi kualitas SEO suatu blog.
Untuk mengecek jumlah error di blog, bisa menggunakan tools Validator HTML Service di http://validator.w3.org/
Membuat Template Blog Lebih Valid HTML5
1. Login ke akun blogger > masuk menu Templates > Edit HTML
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: Blogger Gubug
-------------------------*/
hasilnya menjadi
/* Blogger Template Style
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug */
4. Cari <body> ganti dengan
<body expr:class='"loading" + data:blog.mobileClass'>
5. Mengatasi er
ror 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>
6. Gunakanlah
meta tag Valid HTML 5 berikut
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Deskripsi Blog' name='description'/>
<meta content='Keyword 1, 2 dst' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + ", " +
data:blog.title + ", " + data:blog.pageName'
name='Description'/>
<meta expr:content='data:blog.pageName + ", " +
data:blog.title + ", " + data:blog.pageName'
name='Keywords'/>
</b:if>
<meta content='index, follow' name='robots'/>
<meta content='follow, all, index' name='googlebot'/>
<meta content='2 days' name='revisit-after'/>
<meta content='Nama Anda' name='author'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='general' name='rating'/>
<meta content='Kode Verifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
<link href='http://URLBLOG.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://URLBLOG.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds’ type=’application/atom+xml'/>
<link href='https://plus.google.com/IDgoogle+ Anda' rel='author'/>
<link href='https://plus.google.com/IDgoogle+ Anda' rel='me'/>
7. Cek dulu di http://validator.w3.org/ dan hapus semua kode yang menyebabkan error
8. 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>
9. 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>
10. 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>
11. Menambahkan atribut Alt pada semua gambar, contoh
<img height='75'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg'
width='75'/>
ganti menjadi seperti berikut
<img alt='no image' height='75'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg'
width='75'/>
12. Menyembunyikan widget dihalaman utama.
<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang Mau DiSembunyikan
</b:if>
13. 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/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img
border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg"
/></a></div>
ubah menjadi
<div class="separator" style="clear: both; text-align: center;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg"
style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Gubug"
title="Blogger Gubug" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpi3lvMJQEYhNG7hu4jpb-C0Z2nT5rIerLL3fWKeXOR5WD8DqhMf6lLCnlhPcgAFxrTvEzfYw_j4XoDk9-l1U5oR2gM93qVqla5SJYZCzXoZRBw9PW_hZJHHa3GkOgZzYaw5y0gUg-lih/s1600/BloggerGubug.jpg"
/></a></div>
17. 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>
Ok selamat mencoba
Membuat Template Blog Valid XHTML, Semoga bermanfaat :)
0 comments:
Post a Comment
Berikan kritik dan saran demi kemajuan blog ini
- Berkomentarlah dengan baik
- Gunakan Anonymous jika tidak punya blog
- Mohon tidak memasukkan link dalam komentar
Terimakasih sudah berkunjung :)