Cara Membuat Blog Valid HTML5 Terbaru

Cara Membuat Blog Valid HTML5 Terbaru

salam kenal dari saya pada kesempatan kali ini saya ingin berbagi trik Cara Membuat Blog Valid HTML5 Terbaru., tentunya kalian semua pengen kan blog kalian valid html5 jika kalian benar2 ingin blog kalian valid html5 ikutu trik dibawah ini, di postingan ini ada beberapa cara agar blog anda valid html5 langsung saja:

Langkah Awal :

Mengedit HTML di dalam Post,
Agar gambar (image) bisa dibaca oleh search engine robots maka harus dilakukan perubahan

1. Pada bagian gambar (image) sebaiknya gunakan format .png
Bungkus kode image dan berikan atrribut Tag />
dengan menambahkan tag title="Titel Gambar" dan img alt="Kode Gambar"

<a href="URL Anda"><img alt="Titel Gambar" src="http://ajatshare.blogspot.com/blog-valid-html5.png" alt="Kode Gambar"/></a>

2. Hilangkan/hapus kode imageanchor="1" pada tag img.
Hilangkan/hapus kode border="0" pada tag img.

Langkah Kedua :

Mengganti kode template lama
Sebelum melakukan perubahan pada template, backup dulu template anda beserta widgetnya.
Hal ini dilakukan agar tidak terjadi kesalahan pada saat di check oleh validator.

1. Ganti kode :

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection'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>

ð ganti dengan

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML><head><meta charset='utf-8'/>

2. Ganti kode <b:include name='nextprev'/> ganti dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'>  <b:include name='nextprev'/> </b:if>

3. Ganti kode :

</html> dengan </HTML>

4. Ganti semua garis yang ada dalam kode css

/*-----Header------*/ menjadi seperti /* Header */

5. Cari kode <center> ganti dengan kode di bawah ini

<div style='text-align:center;'>

dan pada penutup elemennya </center> ganti dengan </div>

6. Cari kode: onClick ganti dengan onclick (huruf C ditengah menjadi huruf kecil)

7. cari kode

<span class='post-icons'>

<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>

<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>

kemudian ganti dengan:

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'></b:if>
</span>
</div>

8. Jika dicek terjadi kesalahan duplikat ID,

pada kode css : "#" ganti dengan "."
contoh : #artigo ganti dengan .artigo

pada kode html : <div id='artigo'> ganti dengan <div class='artigo'>

9. Mengganti kode pembuka dan penutup script dan style cari 2 kode script <script> dan </script>

ganti dengan kode di bawah ini

<script type='text/javascript'>Kode script</script>

lalu cari juga kode <style>Kode CSS</style> ganti dengan kode di bawah ini

<style type='text/css'>Kode CSS</style>

Langkah Ketiga :

Menghapus kode yang tidak valid HTML5 dalam template

1. Hapus kode di bawah ini

<div class='post-share-buttons goog-inline-block'>
kode lain...
</div>

2. Hapus Kode di bawah ini

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
      <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com /img/icon18_edit_allbkg.gif' width='18'/>
      </a>
     </span>
   </b:if>
</b:includable>

3. Hapus Kode di bawah ini

<body><div></div>

4. Hapus Kode di bawah ini

<b:include name='quickedit'/>
<b:include data='blog' name='all-head-content'/>

5. Hapus kode di bawah ini

<a expr:name='data:post.id'/>

Tahap Keempat :

Hindari penggunaan widget berikut ini

1. Hindari Tag <center> jika pada Tahap Kedua poin (5) masih error.
2. Hindari pemasangan widget :
   - Google+ Followers
   - Pengikut
   - Share Button
   - Statistic (Penghitung jumlah pengunjung)

Tahap Kelima :

Jika masih ditemukan error setelah dilakukan empat tahapan di atas
Coba sekarang kita membungkus kode CSS nya.

1. Download Lengkap Template sebelum melakukan Trik ini

2. Coba cari kode ini <b:skin><![CDATA[ selanjutnya Cut (Ctrl + X) semua kode CSS di bawah nya ,
ingat hanya kode css nya sampai pada kode ]]></b:skin> lalu paste pada NOTEPAD
Sehingga nantinya setelah kode css nya kita pindahkan pada NOTEPAD akan menyisakan kode berikut

<b:skin><![CDATA[ ]]></b:skin>
Ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode berikut ini :

<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin>

selanjutnya tepat dibawah nya pasang kode ini :

<style type='text/css'>
.....masukan kode css disini.....
</style>

Sehingga nantinya kode menjadi seperti ini :

3. Masih ingat dengan kode css yang di paste di notepad tadi silahkan copy dan Paste pada kata
.....masukan kode css disini.....
4. Lakukan preview dahulu jika ternyata tidak ada Error Save template

Pada tahap ini sudah banyak kode error yang sudah teratasi silahkan cek kembali template sobat di http://jigsaw.w3.org/css-validator/

sekian dari saya semoga trik Cara Membuat Blog Valid HTML5 Terbaru bermanfaat buat temen2 semua. sekian dari saya.

Cara Membuat Blog Valid HTML5 Terbaru

0 komentar:

Posting Komentar

Entri Populer

Link

Labels