PURWOREJO BLOGGER COMMUNITY: Membuat Template Blogger Valid XHTML 1.0

Membuat Template Blogger Valid XHTML 1.0 - Belajar Bareng Yuk Gimana caranya agar template blogger kita Valid XHTML di W3C. Sebelum melangkah jauh ada yang perlu kita ketahui bersama bahwa Valid XHTML hanya di halaman depan alias di mode Home bukan di Sub Halaman karna kita tahu bahwa widget di Blogger juga bermasalah seperti komentar, image, script iklan yang menggunakan php, jquery, Followers bawaan blogger yang penempatannya tidak benar dan masih banyak lagi.

Sebagai langkah percobaan mari kita gunakan template Minima setelah itu coba buka di New Tab http://validator.w3.org/, ketikkan alamat URL blog sobat di kolom address setelah itu klik tombol Check. setelah terlihat hasil eror "Errors found while checking this document as XHTML 1.0 Transitional!" jangan di tutup dahulu

hmmm.. berapa Result error-nya...?? banyak ya...?? kita kurangi satu persatu yuk biar berkurang jumlah errornya.

1. Hapus Widget Penyebab Error

Masuk ke widget element laman hapus Widget Followers, Tenang aja nanti kita buat Widget Followers ini menjadi Valid tapi untuk sekarang silahkan hapus dulu saja, dan jangan lupa rubah juga arsip Blog Menjadi Flat list. Jangan lupa di save dan kembali lagi ke http://validator.w3.org/ yang sudah di berikan url sobat kemudian refresh lihat hasilnya apakah berkurang?

2. Rubah DOCTYPE

Cari kode di bawah ini

<?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 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'>
Lalu ganti dengan :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' 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'>

Cari kode berikut: <b:include data='blog' name='all-head-content'/>

Hapus seluruh kode di atas dan ganti dengan kode di bawah ini:


<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/IDBLOGGERANDA' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGANDA' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGANDA/posts/default' rel='service.post' title='NAMABLOGANDA - Atom' type='application/atom xml'/>
<link href='http://www.URLANDA.blogspot.com/feeds/posts/default' rel='alternate' title='NAMABLOGANDA - Atom' type='application/atom xml'/>


Jangan lupa di save dan kembali lagi ke http://validator.w3.org/ yang sudah di berikan url sobat kemudian refresh lihat hasilnya apakah berkurang?

3. comment declaration dihapus aja

Ini adalah koment yang ada di css sobat harus menghapusnya tanda yang seperti ini yang ada di css
-----------------------------------------------
Hapus seluruh tandanya tapi jangan di hapus sang pembuat template contoh:

/*
-----------------------------------------------

Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Hapus ----------------------------------------------- Maka hasilnya seperti di bawah
/*
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
*/

Lalu kebawah lagi cari tanda yang sama dan hapus, setelah semua di hapus jangan lupa save template kemudian kembali lagi ke http://validator.w3.org/ refresh dan lihat apakah erornya berkurang.

4. Expand Widget Template

Sekarang silahkan di centang Expand Widget Templates Lalu masukan kode di bawah tepat di bawah </head> INI untuk menghilangkan navigasi bar


jangan lupa di save template
Nanti sobat temukan perintah apakah kita mau menghapus widget atau mempertahankan jangan di pertahankan hapus saja, lalu pergi lagi ke http://validator.w3.org/ refresh dan lihat apakah erornya berkurang?

5. Hapus QuickEdit

Hapus kode yang ada di bawah di dalam html pokonya kalau ketemu kode ini hapus!!

<b:include name='quickedit'/>
kembali lagi ke situs http://validator.w3.org/ refresh dan lihat hasil erornya apakah berkurang

6. Hapus Post Icon

Sekarang temukan kode di bawah:
<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>

Kalau sudah ketemu hapus seluruh kode di atas dan ganti dengan kode di bawah:
<span class='post-icons'>

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

</span>

</div>

Nb1: Perlu diperhatikan pada gambar dengan menambahkan
“alt” pada image yang bertujuan untuk bisa dibaca oleh
robot search engine. Pada kode image,
berikanlah penutup Tag berupa atrribut /> contoh :

<a href="URL Anda"><img alt="Keterangan Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdW1BavLxgzKB5SAQQFVy52tqKJEAXxEXtTKHBCYFYA3oA_PS5_91riwep6E5qNKOjJvNz0jWgwREtvA5VrFd7TZOZzSoejBk78tEYg5uaK_nqK-GWHJsXaoWOhyphenhyphenO5OEr12D-IB_CHrouj/s1600/Walman+Logo+Carakom.png"/></a>

Nb2:Trik berikut ini untuk menghilang Navigasi Nextprev dan
Older Post pada halaman index homepage yang masih mengandung
error dengan cara mencari kode ini :

<b:include name='nextprev'/>

Kemudian ubahlah menjadi :

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:include name='nextprev'/>
</b:if>

Save template dan kembali lagi ke http://validator.w3.org/ jangan lupa di refresh maka hasilnya adalah

This document was successfully checked as XHTML 1.0 Transitional!

Nah, di point pertama kita tadi menghapus widget Followers sekarang kita buat widget followers agar Valid XHTML 1.0 Untuk membuatnya langkahnya adalah sebagai berikut:

Langkah pertama:
Apabila sobat sudah mempunyai widget followers silahkan lanjutkan ke langkah ke dua.
1.Tahapan yang pertama adalah sobat harus ke element laman
2.Kemudian klik add gadget
3.Pilih widget followers dan beri judul yang unik misal:sahabatku, pengikut dll
4.Lalu save...
Langkah ke dua:
Sekarang tugas sobat adalah menyiapkan notepad untuk mengkopi kode folowers yang ada di html caranya mudah sobat lihat tampilan blog sobat yang sudah ada widget followers nya kemudian tekan ctrl+u untuk melihat kode followers tersebut nah.. gambaran kode followers yang harus di kopi ke notepad adalah seperti ini:

<div id="div id yang sobat miliki" style="width: 100%;"> </div><script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";

skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";

skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";
skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";

skin['FONT_FACE'] = "Arial";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-6tnycwz8kpmc",
height: 260,
site: "ID dari blog sobat",
locale: 'en' },
skin);
</script>

Kalau sudah ketemu kodenya seperti di atas silahkan kopi kode tersebut ke dalam notepad, untuk yang berwarna merah itu adalah id yang sobat miliki
Langkah ketiga:
Sekarang kita sudah memiliki kode widget followers tersebut yang sudah di simpan di notepad, di sini saya akan menerangkan sedikit kenapa widget followers eror di W3C? karena penempatan bahasa type dari java script. Nah.. sekarang kita akan mengambil java script dari friend connect.Langkahnya adalah:

1.Masuk element laman pilh add gadget
2.Pilih html/javacsript
3.Kemudian masukan kode yang sudah sobat kopi ke notepad kedalam html/javascript beri nama untuk widgetnya yang berbeda agar tidak bingung membedakannya.
4.lalu tambahkan kode di bawah di atas <div id="div id yang sobat miliki" style="width: 100%;">
jadi gambaranya seperti berikut:

<div class="widget-content">
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script>
<div id="div id yang sobat miliki" style="width: 100%;"> </div>

<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";

skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";

skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "Arial";
google.friendconnect.container.setParentUrl("/");

google.friendconnect.container["renderMembersGadget"](
{id: "div-6tnycwz8kpmc",
height: 260,
site: "ID dari blog sobat",
locale: 'en' },

skin);
</script>

5.JANGAN LUPA DI SAVE !!!

Keterangan:
Kode yang berwarna biru adalah kode yang harus di tambahkan silahkan di perhatikan saya memberikan type di javascript tersebut.
Langkah ke empat:
Nah...apabila sudah di save sekarang sobat mempunyai dua widget followers yang berbeda yang pertama adalah widget dengan bawaan blogger yang kedua widget yang berhasil di buat di html/javascript, sekarang tugas sobat adalah menghapus widget bawaan blogger sehingga hanya ada satu widget di sana.
Langkah ke lima:

wkwkwkwk panjang ya? tenang jangan putus asa, sekarang kita akan membuat valid di W3C caranya adalah:
1. Masuk ke edit html
2. Centang Expand Widget Templates
3. Hapus kode <b:include name='quickedit'/>
5. Save dan lihat hasilnya

Sesudah di save sobat silahkan cek di http://validator.w3.org/ apakah ada komentar tentang eror di widget tersebut.

Kenapa harus valid? karena crawl akan lebih ramah dan peramban juga, dengan keramahan crawl serta peramban maka SEO pun akan bersahabat dimana dia akan berpijak tanpa beban dan di mana dia akan menjalar di valid XHTML 1.0 Transitional blogger template...Langkah selanjutnya anda yang menentukan, semoga bermanfaat

Blog Archive

Label

Label

Popular Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Mengenai Saya : https://m.facebook.com/GERMO-NDESO-113912910343815/

Iklan Bawah Artikel

Postingan Populer

Membuat Template Blogger Valid XHTML 1.0