Tutorial Custom Widget Follower ( Google Friend Connect )

Assalamualaikum dan salam sejahtera.

Setiap blogger mempunyai citarasa tersendiri. Ada blogger yang suka menghias blognya sehingga menjadi begitu banyak widget menarik dan widget yang tidak perlu. Ada juga blogger yang tidak suka widget yang terlampau banyak. Seperti angah sendiri , angah suka bila blog angah tidak berserabut dengan widget-widget pelik.

Apa yang penting ialah bila pembaca rasa selesa ,jadi , angah telah membuat satu perubahan kecil iaitu pada widget Follower Google Friend Connect. Angah telah mengecilkan saiznya. Kalau sebelum ini , angah mncuba godek-godek kod dlm html tapi tak berjaya juga , alhamdulillah ,akhirnya berjaya juga.

Cara-caranya :-

1.  Pastikan anda ada meletak wdget Follower di blog anda. Copy kod di bawah ini , dan masukkan ke dalam Add Gadget / HTML/Javascript.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><div id="div-185zgcjgylt4r" style="width:260px; "></div><script type="text/javascript">var skin = {};skin['FACE_SIZE'] = '32';skin['HEIGHT'] = '100';skin['BORDER_COLOR'] = 'transparent';skin['ENDCAP_BG_COLOR'] = 'transparent';skin['ENDCAP_TEXT_COLOR'] = '#000000';skin['ENDCAP_LINK_COLOR'] = '#000000';skin['CONTENT_BG_COLOR'] = 'transparent';skin['CONTENT_LINK_COLOR'] = '#000000';skin['CONTENT_TEXT_COLOR'] = '#000000';skin['CONTENT_HEADLINE_COLOR'] = '#000000';skin['NUMBER_ROWS'] = '4';google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);google.friendconnect.container.renderMembersGadget( { id: 'div-185zgcjgylt4r',   site: '03512417411061533210'},  skin);</script>

2. Ubah perkataan yang bewarna merah dengan kod blog anda sendiri. Buka page source blog anda , kemudian cari kod ini :-

google.friendconnect.container.setParentUrl

Kod anda yang anda perlukan akan berada di bawah kod yang telah anda cari di atas.

3. Setelah anda menukar kod yang berwarna merah dengan kod blog anda , save dan lihat preview.

4. Anda boleh mengubah setting  yang berwarna biru mengikut kemahuan anda.

skin['FACE_SIZE'] = '32';skin['HEIGHT'] = '100';
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '4';

5. Sekarang , anda mempunyai dua widget follower. Jadi , anda boleh delete widget follower yang lama , dan gantikan dengan yang baru.

In shaa Allah , segala-galanya akan berhasil. Angah telah mencuba , dan berjaya , kalau angah dah berjaya , tentu anda juga akan berjaya! In shaa Allah. Bila widget Follower ini menjadi lebih kecil , angah dapat banyak juga ruang untuk widget-widget lain diletakkan 

 

 Sekian.