Bagaimana cara memodifikasi widget follower di blog

Tutorial kali ini kita akan memodifikasi tampilan follower widget bawaan blogger. Sebagai contoh bisa anda lihat pada gambar diatas atau pada widget follower blog saya yang ada di bawah (dibagian footer)

Langkah awal

Anda sudah menambahkan widget follower default blogger terlebih dahulu, dan biarkan  widget bawaan blogger karena nanti ada script kode yang mesti anda lihat. Browser yang harus digunakan adalah firefox.

• Klik kanan pada halaman blog anda -> Lihat kode sumber laman (view page source) -> cari judul dari widget tersebut (follower)
• Gunakan  CTRL+F  untuk memudahkan  pencarian
• Scroll (gulung ke bawah) sehingga anda menemukan kode seperti ini

<div id="

div-1ts10asif4ml8

" 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'] = "#666666";
    skin['ENDCAP_LINK_COLOR'] = "#256ead";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#256ead";
    skin['CONTENT_TEXT_COLOR'] = "#666666";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#256ead";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#666666";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "

div-1ts10asif4ml8

",
     height: 260,      site: "

02282781077935190019

",      locale: 'en' },
     skin);
  </script>
</div>

Perhatikan kode yang berwarna merah dan biru, kode-kode itu yang mesti kita ganti nanti..

Langkah kedua

Copy dan pastekan kode di bawah ini ke gadget HTML/JavaScript.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="

div-1ts10asif4ml8

" style="width:285px;border:1px solid #fff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#666666';
skin['ENDCAP_LINK_COLOR'] = '#1da7e7';
skin['ALTERNATE_BG_COLOR'] = 'transparent';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_TEXT_COLOR'] = '#666666';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999';
skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: '

div-1ts10asif4ml8

',
   site: '

02282781077935190019

' },
  skin);
</script>

Ganti kode yang berwarna merah dengan kode yang anda temukan di sumber laman (view page source), begitu juga dengan kode yang berwarna biru. Dan kode yang diblok kuning itu untuk merubah tampilan warna dari widget tersebut, silahkan sesuaikan dengan warna thema blog Anda. Angka 4 yang berwarna merah itu untuk memberikan jumlah baris photo follower kita. Angka 285 untuk mengatur lebar widget, silahkan sesuaikan dengan lebar sidebar atau footer blog Anda. Kode #fff untuk warna border luarnya, silahkan sesuaikan dengan keinginan Anda.

Original source