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'>
<!-- navigation -->
<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='"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 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.
Gan sebagai pengganti code 'center' apa ya?? saya sering mendapatkan error pada kode tersebut thank's
ReplyDeleteDi atas sudah dijelaskan pada bagian Tahap Kedua poin 5.
Deletegan, saya sudah mencoba cara diatas untuk membuat blog saya jadi valid html 5, namun setelah saya cek di w3c ternyata blog saya masih memiliki 2 eror 1 warning, pemberitahuan w3c seperti ini
ReplyDeleteError 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?
Untuk memaksimalkan mengujian validasi, sementara hilangkan dulu semua widget yg ada.
Deletepunya saya tetap tidak valid2 juga nih mas .. bingung saya :')
ReplyDeleteCoba aja dulu cara tsb diatas biasanya bisa mengurangi error yang ada terutama pada script gambar hapus kode boreder="0" ganti dengan alt="Title"
Deletemakasih gan template ane erornya jadi berkurang banyak
ReplyDeletetinggal 31 doang
saya ucapin selamat dech klo sudah berhasil.
Deleteijin copy script dan mencobanya boss
ReplyDeletejgn lupa luangkan waktu mampir di comtelweb.blogspot.com
silahkan sob...siap berkunjung...!
Deletemas, blog saya masih banyak yg eror, padahal saya suda coba cara diatas...
ReplyDeletemohon pencerahannya
mantap tutorialnya gan....kalau bisa sharing terus
ReplyDeletesama2, salam kenal kembali...!
ReplyDeletemisi gan,ane udah coba cara diatas,tapi masih banyak yang error gan,contoh yang sering muncul gini :
ReplyDeleteLine 20, Column 128: & did not start a character reference. (& probably should have been escaped as &.)
Untuk mengatasi error pada & coba ganti &, tapi kalau terlalu banyak errornya coba kode HTML nya di konversi terlebih dahulu.
DeleteMantab pak, punya saya langsung tinggal 13 error...
ReplyDeleteMakasih
Sama2 mas, masih pagi udah jalan-jalan......
Deletethanks, salam.. kunjungan perdana :)
ReplyDeleteaduh bosss makin tambah ngliyeng ni pusing.. di suguhin artikel seperti ini.. hehehe.. soalnya aku bener2 newbie ni.. aq borkmark dulu deh artikelnya.. pokoknya trimakasih deh ilmunya..
ReplyDeletesaya sudah pratekkan semuanya tapi masih banyak error terutama kode ">"
ReplyDeletejadi minta bagaimana cara mengatasi kode tersebut thanks sebelumnya
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.
ReplyDeleteKenapa 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 berbagi. :)
kalau cara memberi alt image pada gambar header bagaimana...????
ReplyDeletehttp://masrud.web.id/
thanks gan info yang sangat bermanfaat,salam kenal
ReplyDeletetrimakasih atas infoya gan
ReplyDeleteKeren mas, oh ia tolong share dong cara buat social widget seperti punya mas disidebar tuh, keren banget :)
ReplyDeletemanteeb broo ,, ane dah valid :D
ReplyDeleteBetul bgt..sebelumnya kode centre ane bermasalah...
ReplyDeleteMakasih mas Ajat, Alhamdulillah sudah berkurang erornya..
ReplyDeleteVisit and follow back my blog mas http://ikhsanefendy-31.blogspot.com/
Pengen ngubah ke html5 sih bro... tapi sayang nya blog ane barusan aja lepas dari kurungan sandbox... hikss
ReplyDeletemasih belom brani ngapa2in dolo... semoga secepatnya bisa ikutin tips ente ini...
ijin bookmark bro :)
Mantap
ReplyDeletemasih ada 3 warning lagi nih, bingung benerinnya gk ngerti :(
ReplyDeletekalau mau buat yang benar-benar valid itu sulit banget ya gan...
ReplyDeleteMantap Mas Ajat artikelnya
ReplyDeleteAne dah beberapa kali coba untuk mengubah ke HTML5 tapi masih aja selalu gagal... hihkksss
ReplyDeleteThanks om..
ReplyDeletewalaupun ngak sempurna sih alias masih 1 eror 1 warning... hehehehe
Thanks brow... dari 100 eror jadi tinggal 1 eror doang.... ahai...... :D
ReplyDeleteKalau boleh tahu apakah benar memakai gambar dengan format .png membuat gambar valid HTML5 ? Saya jadi bingung sebab ada yang bilang kalau gambar dengan format PNG itu tidak bagus buat blog. Yang mana yang benar ?
ReplyDeletekeren gan langsung praktek deh
ReplyDelete