Cara membuat dan modifikasi widget Pengikut (Join this site) diblog Terbaru

Setelah kemarin saya telah posting Cara membuat Tombol Join this Site diblog Tanpa foto Terbaru, pada kesempatan sekarang saya mau sharing membuat widget dengan script sekaligus bisa sobat modifikasi merubah warna pada widget pengikut tersebut. Mungkin sobat - sobat sudah pada tahu ya fungsi dari widget pengikut ini, dan sobat juga bisa langsung memasangnya karena blogspot sudah menyediakan widget tersebut.

Namun pada widget yang saya akan berikan ini sedikit berbeda dari widget pengikut bawaan dari blogspotnya, dengan widget dari saya ini sobat bisa memodifikasinya sesuai selera atau sesuai gaya warna template yang sobat pakai. Selain itu juga sobat bisa menggabungkan antara widget pengikut ini dengan widget lainnya. Bila sobat tertarik untuk mencobanya mari kita simak tutorialnya.

Contoh tampilan Widget Pengikut

Cara memasang widget pengikut pada blog

• Seperti biasa sobat login dulu dengan akun blogger sobat
• Kemudian sobat buat dulu widget Pengikut default atau bawaan dari blogspot, karena nantinya untuk melihat kode Id dan Site blog sobat.
• Caranya : masuk dashboard blogger sobat lalu pilih Tata letak > Tambahkan Gadget > Gadget Lainnya > Pengikut dan klik Simpan.
• Langkah selanjutnya Buka blog sobat dan pada halaman Home page sobat tekan Ctrl + U (fungsinya untuk membuka Halaman inspect element pada blog sobat)
• Selanjutnya didalam halaman opensource tersebut cari kode renderMembersGadget, untuk memudahkan pencarian tekan Ctrl + F.

Perhatikan pada contoh Gambar dibawah ini, yang saya beri kotak warna merah itu adalah kode Id dan Site.

Mancari kode Id dan Site blog

• Langkah berikutnya sobat buat lagi widget baru dengan mode HTML/Javascript.
• Selanjutnya sobat copy kode script dibawah ini dan pastekan di HTML/Javascript tersebut.

<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-12vq2www79uh2" style="300px;border:1px solid #A2A2A2; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Pengikut";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "#00ad00";
    skin['ENDCAP_TEXT_COLOR'] = "#FFFFFF";
    skin['ENDCAP_LINK_COLOR'] = "##FFFFFF";
    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-12vq2www79uh2",
     height: 260,
   
   
   
     site: "17524939798082790426",
   
     locale: 'in' },
     skin);
  </script>

Keterangan : Yang diberi tanda warna merah sobat ganti dengan kode Id dan Site sobat. (Sebelum menyimpan Widget baru, sobat hapus dulu widget pengikut bawaan blogspot yang tadi dipasang.)

 

Memodifikasi Tampilan Widget Pengikut

Setelah sobat berhasil membuat widget Pengikut dengan mode HTML, sobat bisa memodifikasi sesuai warna kesukaan sobat atau sesuai warna template yang sobat pakai supaya terlihat elegant.
Untuk memudahkan memodifikasi Widget pengikut sobat bisa lihat Panduan dan keterangannya dibawah ini.

Keterangan Tampilan Pengikut

A. ENDCAP_LINK_COLOR
B. ENDCAP_BG_COLOR (Background atas / contoh gambar warna HIJAU)
C. ENDCAP_TEXT_COLOR (tulisan With Google Friend Connect)
D. CONTENT_HEADLINE_COLOR (Tulisan Member)
E. FACE_SIZE (ukuran avatar)
F. CONTENT_BG_COLOR (background bawah)
G. CONTENT_TEXT_COLOR (tulisan Already a member?)
H. CONTENT_LINK_COLOR (tulisan Sign in)
I. Ganti kode #A2A2A2 (Yang diberi tanda warna kuning pada script diatas)

Tambahan : bila sobat perlu kode warna HTML buat modifikasi widget pengikut tersebut silahkan klik Disini

Demikian postingan saya Cara membuat dan modifikasi widget Pengikut (Join this site) diblog Terbaru, Semoga dapat membantu dan bermanfaat buat sobat - sobat Googeling. Bila ada yang mau ditanyakan atau mau kasih sarannya, silahkan tinggalkan komentar dibawah.