Tutorial Mengubah Tampilan Pada Widget Follower (Google Friend Connect)

Tutorial:

1. Login ke Dashboard blogger.

2. Jika anda tiada widget Follower (Google Friend Connect), untuk meletakkan widget tersebut ikut langkah dibawah:

   i)   Klik "Layout" .

   ii)  Klik "Add a Gadget" .

   iii)  Klik "More Gadget" .

   iv)  Pilih "Followers" 

Pada yang sudah sedia ada widget tersebut boleh teruskan ke langkah seterusnya.

3. Buka Halaman blog anda. Pada halaman blog anda, klik kanan pada tetikus dan pilih "View page source".

4. Tekan Ctrl + F dan cari kata kunci " renderMembersGadget " . Tujuan pada langkah ini adalah untuk mendapatkan "ID dan Site Google Friend Connect" bagi widget 'Follower' anda.

5. Buka dashboard blog anda , klik butang " More Options " dan klik " Layout".

6. Pada halaman Layout, klik " Add a Gadget" pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

7. Cari HTML/Javascript dan klik butang tambah.

8.  Copy (CTRL+C) kod javascript dibawah:

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-60ejmqsiuuh5" style="width:300px;border:1px solid #008E00;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#008E00';
skin['ENDCAP_BG_COLOR'] = '#00CC00';
skin['ENDCAP_TEXT_COLOR'] = '#BFFEBF';
skin['ENDCAP_LINK_COLOR'] = '#80FE80';
skin['CONTENT_BG_COLOR'] = '#99FE80';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-60ejmqsiuuh5',
   site: '08321349149898184694'},
  skin);
</script>

Keterangan:

• div-60ejmqsiuuh5  -  Gantikan dengan 'ID Google Friend Connect' Anda.
• 08321349149898184694 -  Gantikan dengan 'Site Google Friend Connect' Anda.

Untuk mengubah tampilan warna , sila ikut petunjuk dibawah . (Dapatkan kod warna disini):

1 - ENDCAP_LINK_COLOR (warna butang link pada header)

2 - ENDCAP_BG_COLOR (warna latarbelakang bagi header)

3 - BORDER_COLOR (warna border pada bahagian header)

4 - CONTENT_LINK_COLOR (warna tulisan link "More>>" dan "Sign in")

5 - FACE_SIZE (Saiz Avatar)

6 - CONTENT_BG_COLOR (warna latarbelakang content)

7- CONTENT_TEXT_COLOR (warna tulisan "Already a member? )

8 - #008E00 (warna border pada keseluruhan widget)

9 - CONTENT_HEADLINE_COLOR (Warna tulisan "Member(598)" )

10 - ENDCAP_TEXT_COLOR (warna tulisan "With Google Friend Connect")

9. Paste (CTRL+V) pada ruang Content.

10. Seterusnya klik " Save " dan lihat la hasilnya