Versi Lengkap Cara Membuat Blog Valid HTML5 ~ AjatShare

Home » Template Hack » Versi Lengkap Cara Membuat Blog Valid HTML5

Versi Lengkap Cara Membuat Blog Valid HTML5

Pada posting sebelumnya saya sudah membahas Membuat Blog Jadi Valid HTML5, ternyata masih banyak sobat kita yang masih merasa kesulitan menerapkan metode/cara yang saya berikan (mungkin bahasa saya acak-acakan yach...!).

Untuk alasan tersebut di atas maka saya mencoba memposting kembali materi yang sama tapi ini yang lebih komplit yang diberi judul Versi Lengkap Cara Membuat Blog Valid HTML5.

Sebelum melangkah lebih lanjut ada baiknya kita menengok ke belakang tentang posting saya hari kemarin mengenai Panduan Membuat Blog Agar Valid HTML5-CSS3,

agar sobat semua lebih mengerti lagi. Tidak perlu panjang lebar inilah tahapannya :

Tahap Pertama :

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"

    contoh :

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

Tahap 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

<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

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

kemudian ganti dengan:

<span class='post-icons'>
<!-- email post links -->
<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 kode :

<script>Kodescript </script>

ganti dengan

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

cari kode :

<style>Kode CSS</style>

ganti dengan

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

Tahap Ketiga :
Menghapus kode yang tidak valid HTML5 dalam template
1. Hapus kode ini:

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

2. Hapus Kode ini:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + 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 ini:

<body><div></div>

4. Hapus Kode ini:

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

5. Hapus kode 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.
Untuk lebih jelasnya silahkan baca Membuat Blog Jadi Valid CSS3.

Itulah 5 (lima) tahapan Versi Lengkap Cara Membuat Blog Valid HTML5, semoga berhasil

Catatan :
Check Validasi agar template valid HTML5 hanya untuk halaman utama (homepage) saja.
Dan tidak bisa dilakukan pada template yang homepage berisi halaman penuh artikel.

Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF

Versi Lengkap Cara Membuat Blog Valid HTML5 - written by ajatshare, published at 22:03, categorized as HTML, Template Hack . And have 55 comments

Facebook Twitter Google+ Linkedin Technorati Digg