Author : UnknownTidak ada komentar
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 Widget2. Ubah 'deklarasi DOCTYPE, cari kode dibawah
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 :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">hapus semua kode diatas dan ganti dengan kode berikut
<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>setelah itu ubah kode </html> menjadi </HTML>
<HTML>
<head>
<meta charset='utf-8'/>
3. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:
/* ----------------------hasilnya menjadi
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug
-------------------------*/
/* Blogger Template Style4. Hapus meta tag <b:include data=’blog’ name=’all-head-content’/>
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Blogger Gubug */
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'>hapus dan ganti dengan kode berikut
<!-- 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>
<span class='post-icons'>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:
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
<script src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>ubahlah menjadi
<script src="https://bloggergubug.googlecode.com/files/coba.css"></script>
<script type="text/javascript" src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>9. Menyembunyikan page navigation di halaman utama, cari kode <b:include name='nextprev'/> ganti dengan kode berikut
<script type="text/css" src="https://bloggergubug.googlecode.com/files/coba.css"></script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>10. Menambahkan atribut Alt pada semua gambar, contoh
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksPPdTzNRNE7LKx50bKlwk2NhJncZWcu8cdLpaduC8GBPsu82ay4x7YDztkcG9iwPK8drnzByVW-6_OM0aJWZc2EDzhyphenhyphendpIVwxHwfvVsj5vb-vk1L2L5DctO3Yz0FK7phPCAghP5XkUOU/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 == "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'>14. Taruh Script dibawah dibawah tepat dibawah <head>
Widget Yang Mau DiSembunyikan
</b:if>
<!--[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;">ubah menjadi
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksPPdTzNRNE7LKx50bKlwk2NhJncZWcu8cdLpaduC8GBPsu82ay4x7YDztkcG9iwPK8drnzByVW-6_OM0aJWZc2EDzhyphenhyphendpIVwxHwfvVsj5vb-vk1L2L5DctO3Yz0FK7phPCAghP5XkUOU/s1600/BloggerGubug.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksPPdTzNRNE7LKx50bKlwk2NhJncZWcu8cdLpaduC8GBPsu82ay4x7YDztkcG9iwPK8drnzByVW-6_OM0aJWZc2EDzhyphenhyphendpIVwxHwfvVsj5vb-vk1L2L5DctO3Yz0FK7phPCAghP5XkUOU/s1600/BloggerGubug.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">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.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksPPdTzNRNE7LKx50bKlwk2NhJncZWcu8cdLpaduC8GBPsu82ay4x7YDztkcG9iwPK8drnzByVW-6_OM0aJWZc2EDzhyphenhyphendpIVwxHwfvVsj5vb-vk1L2L5DctO3Yz0FK7phPCAghP5XkUOU/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/AVvXsEiksPPdTzNRNE7LKx50bKlwk2NhJncZWcu8cdLpaduC8GBPsu82ay4x7YDztkcG9iwPK8drnzByVW-6_OM0aJWZc2EDzhyphenhyphendpIVwxHwfvVsj5vb-vk1L2L5DctO3Yz0FK7phPCAghP5XkUOU/s1600/BloggerGubug.jpg" /></a></div>
<div style="text-align: center;">Isi Widget</div>
tag cara mengakftifkan kode xhtml pada blog | trik blog valid xhtml | cara membuat blog valid kode xhtml dan html5| cara membuat blog ringan
Read more:
Posted On : Rabu, 16 April 2014Time : 16.10