Cara Membuat Template Blogspot Valid XHTML/ Valid HTML5

Cara Membuat Template Blog 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 validasi template suatu blog bisa menggunakan tools Markup Validation Service dari W3C dengan mengunjungi http://validator.w3.org Disitu kita tinggal memasukkan url blog dan dapat mengetahui jumlah error blog kita. Sebelum melakukan validasi, ada baiknya menggunakan blog lain untuk percobaan, jika tidak hapus widget yang dirasa mengakibatkan error atau copy semua isi widget tersebut ke notepad.


Cara Membuat Template Blog Valid XHTML/ Valid HTML5

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: Blogger Gubug
-------------------------*/
hasilnya menjadi
/* Blogger Template Style
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug */
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='http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg' width='75'/>
ganti menjadi seperti berikut
<img alt='no image' height='75' src='http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/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 == &quot;item&quot;’>
<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' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<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="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" /></a></div>
 ubah menjadi
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/s1600/BloggerGubug.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Gubug" title="Blogger Gubug" src="http://1.bp.blogspot.com/--IexqAWfbYc/UTFuBQSQhOI/AAAAAAAAAk4/Sc-_jSYHxC8/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

Sumber: http://bloggergubug.blogspot.com/2013/03/cara-membuat-template-blog-valid-xhtml.html

Cara Membuat Template Blogspot Valid XHTML/ Valid HTML5 Rating: 4.5 Diposkan Oleh: Seribu Arsp

15 komentar:

SD Islam Unggulan mengatakan...

Info yang menarik,,,

Rifky Iqbal Algifari mengatakan...

bagus sob

http://qyystyle.blogspot.com

Bandi Shippuden mengatakan...

Mantap gan ....

Lensa Globe mengatakan...

wah nambah wawasan ni,
blog ane jadi valid,,thanks :-)

http://lensaglobe.blogspot.com

Kolom Tutorial™ mengatakan...

terimakasih banyak gan infonya sangat membantu sekali salam kenal

Anonim mengatakan...

Terimakasih sobat, blog saya menjadi html 5

Dofri Sofwatul mengatakan...

terimakasih atas tips nya gan sangat membantu, salam kenal dari : http://makalahkomplit.blogspot.com/

ikhsan mengatakan...

gan, saya sudah mencoba cara diatas, namun setelah saya cek di w3c ternyata blog saya masih memiliki 2 eror 1 warning, pemberitahuan w3c seperti ini

Error Line 203, Column 22: An body start tag seen but an element of the same type was already open.

menurut agan letak masalah kode erornya ada dimana?

sewa mobil jepara mengatakan...

okee

Semar Bingung mengatakan...

Menurut saya, validitas template memang sangat penting bagi seorag webmaster Sob. Namun demikian walaupun validitas template cukup penting, satu hal yang lebih penting lagi adalah konten yang terdapat dalam setiap artikel yang diterbitkan.

Kenapa saya berpendapat demikian? Karena pengunjung yang membaca setiap artikel kita tidak akan pernah peduli dengan validitas template yang dipakai untuk menayangkan artikel itu.

Sehingga kalaupun akhirnya template tidak dapat dijadikan sebagai template yang valid, maka saya rasa tidak akan jadi masalah dan tak perlu dipermasalahkan. Artinya daripada membuang waktu dan tenaga untuk menjadikan sebuah template menjadi valid, akan lebih baik jika waktu dan tenaga itu dipanfaatkan untuk menyusun dan atau menerbitkan artikel baru.

Oh ya, tidak lupa saya sampaikan bahwa ulasannya sangat bermanfaat, serta saya sampaikan pula salam kenal dan salam berbagi. :)

pasutri pria perkasa mengatakan...


PEMBESAR PENIS
obat pembesar penis permanen
obat pembesar alat vital
pro extender alat pembesar penis
obat besar panjangkan penis
oil lintah super obat pembesar penis
celana vakoou alat pembesar penis
semenax obat penyubur sperma
vimax oil oil pembesar penis
vigrx plus obat pembesar penis
vakum pembesar pembesar penis alat pembesar penis
vimax asli canada obat pembesar penis paling ampuh
pembesar penis lintah oil papua

OBAT PERANGSANG SEX
blue wizard obat perangsang
obat perangsang sex
obat perangsang wanita potenzol germany
sex drop perangsang wanita cair
obat perangsang viagra cair
obat perangsang serbuk
jelly perangsang wanita

pasutri pria perkasa mengatakan...


PEMBESAR PAYUDARA
vakum pembesar payudara
pil pembesar payudara
cream payudara wanita
obat pemontok payudara
cream pembesar payudara wanita

PELANGSING BADAN
obat pelangsing herbal
obat pelangsing badan fatloss herbal
cream pelangsing badan
pelangsing herbal alami
obat pelangsing oles

Jamaris Melayu mengatakan...

Trik yang bermanfaat dan perlu di coba juga di blog saya. Terima kasih

Pengobatan Herbal Kista Payudara mengatakan...

Manteep sob untuk informasinya :)
http://goo.gl/Z14H3K

Amang ats mengatakan...

trims ya sob..

Posting Komentar