Widget Follower Valid di W3C

Setelah memposting tentang kotak pencarian yang valid di W3C dengan bergaya CSS3 Oke sekarang waktunya membuat valid widget blogger satu-persatu, saya akan lanjut dengan widget followers, tahapanya agak rumit, tapi apabila sobat berkenan membuat widget followers menjadi valid di w3c silahkan di ikuti dan juga mohon koreksinya apabila ada kesalahan, karena saya yakin sobat sudah mengetahui ini.
Widget followers adalah widget yang penting untuk blogger pengguna blogspot agar pengunjung bisa mengikuti blog kita, pengeditannya agar valid di W3C agak rumit karena harus bolak-balik tapi tidak serumit, game, subcribe, twitpic, profil dan blogroll yang tidak hanya penghapusan quickedit, saya bukan berbasa-basi di sini apabila mau buktinya sobat bisa mengklik salah satu link di bawah dan lihat erornya di W3C.
Widget followers yang valid di XHTML 1.0
Widget followers yang valid di HTML5
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 BRO !!!
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.Saya jamin tidak eror itu untuk xhtml 1.0 trantitional atau strict akan tetapi untuk html5 ada tambahan sedikit
Untuk html5:
Perhatikan pengakhiran &amp;.
Yups...sekarang widget sudah valid di W3C apabila ada kesalahan silahkan di ikuti langkah tutorial ini pelan-pelan, untuk para pengguna blogspot jangan bersifat ragu untuk masalah validasi dengan kata lain keep on blogspot dan jangan berkecil hati dengan platform ini.

Tweet