Modifikasi Tampilan Widget Followers - Menambahkan widget Followers GFC (Google Friend Connect) akan memberikan keuntungan terhadap blog kita, diantara keuntungannya adalah Link artikel kita akan muncul pada dashboard pengikut / followers. Akan tetapi terkadang tampilan widget ini tidak sesuai dengan apa yang kita inginkan.

Dengan melakukan hal ini, bukan saja merubah tampilan widget followers, tapi juga akan membuat blog valid HTML5. Syaratnya, setelah semua langkah selesai, hapus kode <b:include name='quickedit'/>

Dibawah ini screenshoot hasil modifikasi dan valid HTML5.


Langkah 1 : Tambahkan widget Followers (lewati langkah ini kalau sudah ada)
Untuk menambahkannya klik Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Pengikut

Langkah 2 : Buka blog sobat.
Klik liat sumber laman / view page source

Langkah 3 : Cari kata kunci renderMembersGadget biar cepet Ctrl + U dan lihat kode dibawahnya.
Perhatikan pada kode id dan site. seperti pada gambar di bawah ini:

Langkah 4 : Buat widget baru HTML/JavaScript, simpan kode ini :

<div style='margin-bottom:6px'>
<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-5689215067457761050" style="width:300px;border:1px solid #95a5a6;border-radius:5px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#95a5a6';
skin['ENDCAP_BG_COLOR'] = '#95a5a6';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#dddddd';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#bdc3c7';
skin['CONTENT_LINK_COLOR'] = '#ffffff';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#3186C9';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#ffffff';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-5689215067457761050',
   site: '14374121295893057973' },
  skin);</script>

Tugas sobat adalah mengganti 2 kode ID dan 1 site, dengan kode yang didapat dari page source (Langkah3).

Langkah 4 : Hapus widget Followers bawaan Blogger (ihat Langkah 1)

Langkah 5 : Hapus kode <b:include name='quickedit'/> supaya valid HTML5. Abaikan jika sobat males ber-valid2 ria

Sampai di sini, sobat sudah membuat tampilan yang berbeda dari biasanya dan widget sudah valid HTML 5.

Modifikasi Tampilan Widget Followers

Untuk memodifikasi sesuai keinginan soobat, buka kembali widget yang tadi dibuat (Langkah 4), edit warna dan pengaturannya. Untuk memudahkan editing lihat panduan gambar dan keterangannya :



1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR (Background atas / contoh gambar warna abu-abu)
3. ENDCAP_TEXT_COLOR (tulisan : With Google Friend Connect)
4. BORDER_COLOR (garis dibawah blok abu)
5. CONTENT_HEADLINE_COLOR (Tulisan Member 137)
6. CONTENT_LINK_COLOR (tulisan More dan Sign in)
7. Garis pinggir, ganti kode warna #Terserah
8. FACE_SIZE (ukuran avatar)
9. CONTENT_BG_COLOR (background bawah)
10. CONTENT_TEXT_COLOR (tulisan Already a member?)

Kode skin['NUMBER_ROWS'] = '4'; adalah berapa baris avatar ditampilkan. Ganti angka 4 sesuai keinginan. Sesuaikan juga lebar widget dengan mengganti kode 300px.

• Sumber : http://blog.kangismet.net/2013/08/modifikasi-tampilan-widget-followers-gfc.html