Cara Modifikasi Widget Google friend connect

(isi iklan)

Wedget google friend connect sudah di sediakan pada semua theme blogger akan tetapi tampilanya hanya setandar saja,Ya tentu saja agak kurang menarik menurut pendapat sebagian user yang telah bergabung di blooger,Nah untuk memodifikasi tampilan google friend connect ( Join This Site ) ini sangatlah mudah dan tampilan warna serta ukuran wedget bisa di sesuaikan dengan tempalte anda sendiri,Hasil setelah di rubah lebih kurang seperti gambar di bawah ini.

Coba anda bandingkan dengan wedget standar blogger sebelum di modifikasi,Tentunya lebih menarik setelah di adakan modifikasi,Itu menurut saya pribadi,Meurut anda sendiri bagai mana..?
Apakah anda mau memodifikasinya seperti apa yang saya lakukan pada blog saya ini..?

Cara ini saya gunakan untuk Hidden tampilan versi mobile, karena dengan di ganti seperti ini baru bisa di hiden pada versi mobile,karena jika menggunakan bawaan dari blogger tidak bisa di hidden untuk versi mobile. ok lanjut simak.

Silahkan ikuti tutorialnya sebagai berikut :

- Silahkan login ke akun blogger kalian.
- Lalu pasang wedget ( Pengikut )/( Followers ).
- Selanjutnya klik kanan pada blog anda lalu pilih ( View Page Source ) atau pakai tombol ( Ctrl + U ) pada keybord anda seperti gambar di bawah ini.

- Maka akan muncul jendela open source blog anda dan lihat ID Friend conect blog anda yang anda pasang tadi.

- Tambahkan wedget HTML/Javascript.
- Selanjutnya Copy script priend conect di bawah ini  dan ganti ID yang saya kasih tanda merah dengan ID friends connect anda.

<div class='widget-content'>
<!-- Include the Google Friend Connect javascript library. -->
<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-1u4sh2dhimfom" style="width:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#1A74BA';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#1A74BA';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#3186C9';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{id: "div-1u4sh2dhimfom",
site: '10490980666786481435' },
skin);
</script>
</div>
</div>

- Ganti kode yang berwarna merah dengan kode Unik milik anda sendiri yang telah di page source tadi.

- Setelah Script HTML/Javascript sudah anda SAVE,Silahkan hapus kembali wedget PENGIKUT / Follower yang tadi di pasang pertama kali ( Friend connect Setandarnya )

Sampai di sini tutorial ini,Coba anda bandingkan tampilanya dengan wedget standarnya,Jika masih belum juga paham dengan tutorial ini silahkan berikan comment anda siapa tau saya bisa bantu lebih lanjut tentang modivikasi wedget friend connect.

Salam bloggers...

Tweet

Judul	Cara Modifikasi Widget Google friend connect
Deskripsi	Wedget google friend connect  sudah di sediakan pada semua theme blogger akan tetapi tampilanya hanya setandar saja,Ya tentu saja agak kuran...
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER