Widget Melayang/Floating Follower Google Friend Connect Twitter dan Facebook Like Box ( 3in1 Widget)

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
2. Copy script master widget dibawah ini dan paste pada gadget.

 <style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjdqIy5qn2RWtsiXpNRip7hDnynldNgJ3rLUXFG6Y4hP3nAjvqaWmHXPzCGfRrcOMudyDg2oxjrR0DIcDLs-Yeg23eglglTdjCeOht8C5_KSNqq85Ax-mUJSI1J2ERB6831-kgDVvyHSZ/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9J0kc6DL7Y1QbQYWq9S8z3vV2IZyiXT_e5oTnUsHIwSzdXHaQ6QFJJG2BvF46CYW2MmNO0YgCy2bIxvWaT8ZbRSrFd-BfXHx4kgzvC-Sg6-iuxgMGPbmFHM6UwR1tK8QPfaRo__CM1DGG/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4N5uOqIekq2FkFQuuB8rjb5O6aee6QuFeMF3xpd81K7_81ybisM0bDHo4mZ14PDWCylx_sW0gouYPVLxy7PFIEvFh6Ny0ez8-O7aw7DRDA0WyubWoGw38ZzlVgKGVGKi4ScNwjY-ed9r/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinBtUXTv5HUb-FnSKSG5GzUKlArNVgwhWHxRIuHI6Px2aq23Po_DhWpzLhyphenhyphenh_8O7_R3Rj2MkklcTeqUVnrfxQXnxTrO5QHYOrc28yflgfIXK3TGuhOwEm1sBlENBEv3TcAbPrwRp38OCDg/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekV_EbEy54UKrLL_OKllngblA1GUdTwUp5LsTKHiNcSnKAffYX5ZRU_l1U1LhUS_PSG4uYwDPKGEvAz9G815K1lCFwDO4fe56c1bXnxXyjIA9Lb8olbAuDa3ZsT2CbWwJp_cRyjEnyw1-/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz1YaqBC4eT1Ay2-GMOvV1CwvSmuPxtKqbnQ_Qm4ftujbwx17WtjbNQ6zRY0huiNSWaEtN8Kq3OsWHRt1T7EAB2Mn9tD8kwqC2HmCLgU8vSizQSlBnKm31CaDExDED0N7nKrXRBrKcWgEX/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">

CONTENT BLOGGER HERE

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">

CONTENT FACEBOOK HERE

</div>
</div>

  3. Kustomisasi widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4. Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

 Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikut ini tutorialnya :

 1. Login ke Google Friend Connect menggunakan akun blogger/gmail anda.
2. Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3. Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini.

4. Jika kustomisasi sudah selesai, klik tulisan Generate code pada langkah ke-3Create the HTML code, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap dicopy atau disimpan di notepad.

*Untuk pengaturan widget update status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets,
*sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php.

Mohon maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata sobat gagal memasang dan melakukan pengaturan pada widget
ini.