Sesuai dengan judul-nya Membuat Template Blogger Valid W3C - Bagian 1, postingan dari Go Blog Go ini merupakan revisi dari Postingan yang lalu yaitu
Perlu penjelasan bahwasa-nya postingan ini menekan-kan bagaimana sebuah Template Blogger khusus-nya blogspot hanya akan mempunyai Error Template 1 Error dan 1 Warning. Disini Saya menjelaskan secara tahap demi tahap bagian mana saja khusus HTML-nya yang akan dibongkar pasang jadi agar mudah dipahami nanti-nya dalam mempraktekan-nya di Blog Template masing-masing.
Mohon maaf Saya tidak akan menjelaskan Cara memperbaiki yang 1 Error dan 1 Warning, anggap saja bonus Pekerjaan Rumah buat Mojang dan Bujang betul tidak !!! kan sudah hampir semua-nya dijelaskan hehehe......Sebagai bukti silahkan Cek sendiri Mojang dan Bujang Template Go Blog Go di Validator W3C jangan heran kalau Template punya Saya sudah Passed alias Tanpa Error (lihat warna hijau bukan merah lagi).
Fasilitas utama yang digunakan untuk mengetahui Berapa jumlah Error Template Mojang dan Bujang adalah menggunakan VALIDATOR.W3.ORG perlu dijelaskan juga Saya tidak akan menjelaskan keterangan tiap-tiap baris Error (terlalu ribet,lama butuh waktu ! kecuali Mojang dan Bujang kalo mau hehehe.....).
Disini Saya menggunakan Template yang masih utuh dan belum di bongkar, kalo mau silahkan.
Mulai saja proses pengurangan Error Template-nya :
- Untuk mengedit Template Saya biasa menggunakan Editor NOTEPAD++
- Silahkan Login ke Blogger masing-masing
- Kemudian buka Situs VALIDATOR.W3.ORG
- Isi dengan URL Blog tinggal klik Check
dan setiap dilakukan pengecekan ulang jangan ditutup Validator-nya. Contoh lihat Screen Shoot dibawah ini :
TAHAP-I
Setiap Template umum-nya selalu diawali dengan Tag seperti dibawah ini pada umum-nya yang disimpan paling atas dari Template Blog
<?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 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'>Mojang dan Bujang Silahkan tinggal ganti jadi Seperti dibawah ini standard HTML5 :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>jangan lupa Tag <HTML> harus sama dengan Tag penutup-nya </HTML> dan tambahkan juga Script berikut ini :
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
simpan diatas Tag </head>, kemudian sisipkan juga Tag berikut ini:
<!-- <body><div></div> -->
dibawah Tag </head>TAHAP-II
Hapus semua Tag
<b:include name='quickedit'/>
diseluruh Template Blog gunakan Ctrl+F untuk pencarian cepat, karena Tag ini salah satu penyumbang Error terbesarTAHAP-III
Untuk Up-load Gambar yang perlu diperhatikan sebelum posting di Publish adalah meng-hapus imageanchor="1" dan border="0" yang terdapat di dalam URL Image,dan tinggal menambahkan alt="" dengan title="" sebagai contoh dibawah ini :
<div class="separator" style="clear:both;text-align:center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" imageanchor="1" style="margin-left:1em;margin-right:1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" />
</a>
</div>Jadi-nya seperti ini :
<div class="separator" style="clear:both;text-align:center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" style="margin-left:1em;margin-right:1em;" title="milla jokovic">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" alt="cewek cantik" title="milla jokovic"/>
</a>
</div>Cara ini tidak berlaku apabila Mojang dan Bujang mempunyai Postingan yang sudah di Publish terlebih dahulu, karena akan tampil Warning di Validator seperti ini : "the border attribute is obsolete. consider specifying img {border: 0;} in css instead. html5". Hal ini sulit diperbaiki Error-nya, Saya sudah mencari di Mbah Google dan mencoba sendiri memperbaiki-nya tetap saja Error-nya tampil. Solusi-nya ada tapi jadi kerja 2 kali, dengan menghapus postingan yang sudah ada kemudian di Posting kembali Error-nya hilang.
TAHAP-IV
Dalam setiap penambahan Widget di-SideBar, ini hanya contoh seperti script recent-post dibawah ini biasanya seluruh CSS beserta jQuery-nya disatukan dihalaman HTML/Javascript hal ini perlu dihindari karena akan menyebabkan Error, biasanya Validator akan mendeteksi harus ada penambahan Tag "Scope" (Tag baru namun tetap tidak berhasil walau ditambahkan juga). Jadi pisahkan saja antara CSS dan jQuery-nya, tentu Mojang dan Bujang sudah paham dimana menempatkan CSS-nya, kalau jQuery-nya disimpan di Halaman HTML/Javascript.
<div style="margin:7px 0; float: left;">
<style type="text/css">
#rp_plus_img {
height:287px;
overflow:hidden;
border:solid 0px #585858;
padding:1px 1px 14px 1px;
background-color:none;
}
#rp_plus_img ul {
list-style-type:none;
margin:0;
padding:0;
}
#rp_plus_img li {
border:0;
margin:0;
padding:0;
list-style:none;
}
#rp_plus_img li {
height:70px;
padding:1px;
list-style:none;
}
#rp_plus_img a{
color:#3366ff;
}
#rp_plus_img .news-title {
display:block;
font-weight:bold !important;
margin-bottom:5px;
font-size:11px;
}
#rp_plus_img .news-text {
display:block;
font-size:10px;
font-weight:normal !important;
color:#282828;
text-align:justify;
}
#rp_plus_img img {
float:left;
margin-right:15px;
padding:1px;
border:solid 1px #cccccc;
width:60px;
height:65px;
}
</style>
<script type="text/javascript" src="http://apa-ajaboleh.googlecode.com/files/slide_down_recent_post.js">
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
:D ajarin dung lebih detail di post berikutnya :D
ReplyDeleteCoba dulu... biar tau dimana letak setiap kesalahan-nya....
DeleteAssalamu'alaikum Wr.Wb. ini yang ane cari2 teh gening aya...template yang sesuai w3c, salam kenal sob...blog ane 11 errors 7 warning di oprek-oprek errornya malah jadi ratusan he..he..maklum newbie lg belajar. Ijin Download ya.....
ReplyDeleteSilahkan.... itu template masih asli error-nya, kalo mau coba silahkan ikuti petunjuk-nya...
Delete