Widget Followers Blogspot yang Valid HTML

Fungsi widget followers adalah agar pengunjung maupun blogger lain bisa mengikuti blog kita, setiap postingan terbaru akan terdeteksi atau tampil di dasbor blog mereka, sehingga mereka dapat dengan mudah mengetahui tiap update postingan blog yang diikutinya. Memang widget ini sudah ada di menu standar blogspot, tapi saya ingin memodifikasinya agar valid dengan HTML, serta ukuran atau jumlah foto follower yang tampil di muka widget bisa diatur sesuai dengan keinginginan. Adapun langkah-langkahnya sebagai berikut.

1.  Pastikan sudah memiliki atau sudah memasang widget followers (pengikut) di sidebar blog, dan beri tanda pembeda. Misalnya diberi judul "Sobat Blog".

2. Buka halaman postingan blog anda dan siapkan notepad, kemudian pada halaman blog tekan Ctrl+U untuk mendapatkan kode widget followers yang akan dicari. Contoh tampilan dalam screen shoot sebagai berikut.

*Klik gambar untuk melihat tampilan yang lebih jelas.

Maksud dari kode yang dicari seperti contoh pada gambar di atas, adalah misalnya kode-kode yang seperti di bawah ini.

<div id="ID dari blog anda"style="width:100%; "></div>

<script type="text/javascript">

    var skin ={}

;

    skin['FACE_SIZE'] = '32';

    skin['HEIGHT'] = "170";

    skin['TITLE'] = "";

    skin['BORDER_COLOR'] = "transparent";

    skin['ENDCAP_BG_COLOR'] = "transparent";

    skin['ENDCAP_TEXT_COLOR'] = "#000";

    skin['ENDCAP_LINK_COLOR'] = "#000";

    skin['ALTERNATE_BG_COLOR'] = "transparent";

    skin['CONTENT_BG_COLOR'] = "transparent";

    skin['CONTENT_LINK_COLOR'] = "#000";

    skin['CONTENT_TEXT_COLOR'] = "#000";

    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFF";

    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000";

    skin['CONTENT_HEADLINE_COLOR'] = "#000";

    skin['FONT_FACE'] = "Verdana";

    google.friendconnect.container.setParentUrl("/");

google.friendconnect.container["renderMembersGadget"]({id:"div-1gqddxja18gja",     height:170,     site:"ID dari blog anda",     locale:'in'}

,skin);

</script>

*Catatan :

Jika ada beberapa kode yang berbeda, misalnya pada keterangan kode gambar (#000) maupun pada nominal (170). Hal tersebut karena pada warna dan ukuran tampilan widget followers di blog ini sudah  termodifikasi. Sehingga warna maupun ukuran, nantinya bisa anda atur sendiri sesuai keinginan.

3. Copy kode widget followers yang sudah anda dapatkan, seperti kode pada poin ke-2. Kemudian paste ke dalam notepad. Sedangkan untuk tulisan yang berwana biru, silahkan diganti sesuai dengan ID pada blog anda. Dicontohkan seperti pada gambar yang ditutup oleh warna merah.

4. Masuk ke laman Rancangan, lalu klik Add Gadget (tambah gadget) dan pilih yang HTML/JavaScript. Kemudian kode yang tadi sudah anda simpan di notepad, maka copas ke dalam kolom di gadget ini.

5. Taruh kode berikut ini (berwarna hijau), tepat di atas kode-kode yang pada poin ke-2.

<div class="widget-content">

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">

</script>

*Kira-kira tampilannya jadi seperti ini.

<div class="widget-content">
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">

</script><div id="ID dari blog anda"style="width:100%; "></div>

<script type="text/javascript">

    var skin ={}

;

    skin['FACE_SIZE'] = '32';

    skin['HEIGHT'] = "170";

    skin['TITLE'] = "";

    skin['BORDER_COLOR'] = "transparent";

    skin['ENDCAP_BG_COLOR'] = "transparent";

    skin['ENDCAP_TEXT_COLOR'] = "#000";

    skin['ENDCAP_LINK_COLOR'] = "#000";

    skin['ALTERNATE_BG_COLOR'] = "transparent";

    skin['CONTENT_BG_COLOR'] = "transparent";

    skin['CONTENT_LINK_COLOR'] = "#000";

    skin['CONTENT_TEXT_COLOR'] = "#000";

    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFF";

    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000";

    skin['CONTENT_HEADLINE_COLOR'] = "#000";

    skin['FONT_FACE'] = "Verdana";

    google.friendconnect.container.setParentUrl("/");

google.friendconnect.container["renderMembersGadget"]({id:"div-1gqddxja18gja",     height:170,     site:"ID dari blog anda",     locale:'in'}

,skin);

</script>

Setelah itu, jangan lupa tekan tombol Simpan.

6.  Sudah dilakukan? Yup, langkah selanjutnya adalah menghapus widget followers bawaan standar blogspot. Yakni widget yang tadi dibahas pada poin pertama (ke-1). Awas, jangan sampai salah hapus!

7. Posisi anda masih di laman Rancangan? Maka langkah selanjutnya adalah mengklik menu Edit HTML. Beri tanda centang pada kotak kecil Expand Template Widget.

8. Cari kode ini <b:include name='quickedit'/> dan hapus. Kemudian tekan tombol Simpan Template. Maka silahkan anda lihat hasilnya, apakah sudah berhasil membuat widget yang dimaksud?

Nah, sebagai penutup. Untuk memperjelas maksud dari tujuan postingan kali ini, ada baiknya anda juga memperhatikan postingan saya kemarin, membahas mengenai validasi markup HTML. Pintunya lewat sini. Serta bisa langsung cek disitu mengenai perubahan/penurunan nominal HTML yang error, sebelum dan setelah melakukan cara ini.