Cara Membuat Widged Followers Google Friend Connect, Twitter, Facebook Likebox

kali ini saya akan berbagi cara memasang widged 3 in 1 yaitu blog,twitter,fb di pasang ke blog sobat.
 Inilah persembahan 3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di penghujung tahun 2011 ini. 3 buah widget melayang
yang digabung dalam 1 gadget ini merupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Boxsekaligus !! Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like ini akan kita bedah bersama (hiks..!) 
dalam tips blogging kali ini.


 Tips dan Trik NgeBlog Kertas Kecil Kita ini.


oke langsung saja kita ke tkp:

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27JRxIPbEc_fvxkj-ZHZ5QHIFo1pHM5EzOgooNcvBFKDP4K_ey45UdMbklzULBwJBobN6Je718VandzEVL5rIWgnbmt7gF5F1MrhfS_RkzVZ6JqFv39VXnCVbJraVMUdWmCF4c1ayvgr8/');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/AVvXsEg4PH6ZoH9j_uAEBvLO0SXt0B42euXIvVqTcj1JkNhvT2llgzwvDNmliEYOpHdnneZi7Fc3mqpdvLaZ9lY3mBsLDaf3A8qjfugBktFsuAs2oWXYDGCVMptZ-FRBQwR7XsRRZ6VA9x-y5Mjj/');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/AVvXsEg_bEDq4eqGkpBEefNzrZNFQo5fBdaWoJsRkXdsh1sbBq_g_o_zVgkgD_9y_znD6oj9G6bRcL_rjIVBuPUOOlYZHZPEH9F6AQRjOqmImy0pNR8DMDbSO9vnDXSA86c03Shyphenhyphenn5KIeJJ2JJ-H/');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/AVvXsEgknnoslpkHexYFRgJDOaHxU1_IE7DqH5DLBndA-0Mb_K08CVxLNTSY7XerdkDSRS13awfLY8EMPh3dhC63EhUmO42VTdpMD6llpm1lXyneFXhpLm670i0soc-FNGAw0kKgyPYZaa8hgY2l/');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/AVvXsEha_rYAADzxRb6hmXwUzqTGIVhmx4Y8eFXjWVZuqaJTsY9XU0dTt6MHECdASmHedaUEjyeG08CGFJom3xPyQcAx2rfEa4-NAp63fpuWcD7jPo0-HnvtxsDCPztq6-GwiefmF3z52M6unmmM/');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/AVvXsEjBzJSYulYqdgBMceGczTujX7LSs1NETr-5f6DmCdtln9A6PTr12iChowv9vzCT6yaIOhR2DhIhiIBpqgdRKvQHJGAYeUZTI_mWc6aqdz2erNKJ6Oe8YaC1vv3no_jvrBSYt7yFln0qrldO/');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>

keterangan

 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.

pertama-tama kita harus membuat tabel plugin blog,twitter, maw pun fb

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

PENGGEMAR BLOG

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.

PENGGEMAR FACEBOOK

cara memasang Plugin sosial Facebook diblog

kali ini saya akan berbagi cara memasang pluigin sosial facebook di blog blogger tentunya..
dengan kata lain memasang atau menampilkan pengunjung fb devolever ke dalam fb
langsung saya ..

Suatu hal yang sebenarnya mudah akan terasa sangat sulit bagi orang yang belum mengetahui dan memahaminya. Dan bahkan hal seperti ini pun juga pernah terjadi pada diri saya

sama dengan cara memasang like box fb,

• • Comments Facepile  Like BoxLike ButtonLive StreamLogin ButtonRecommendations BoxRegistrationSend Button Subscribe Button

Terimakasih bila Anda tetap menyertakan dan mencantumkan URL lengkap sumber artikel ini.  

Buka halaman pengembang Facebook, dalam hal ini adalah dengan membuka URL https://developers.facebook.com/docs/reference/plugins/like-box/

buat lah developers blog anda yang akan di pasang di blog

seperti gambar di bawah ini:

Masukkan URL Halaman Facebook atau Fans Page yang Anda kelola kemudian tentukan setelan untuk tampilan like box. Dalam hal ini misalnya: mengatur ukuran lebar dan tinggi, warna, maupun elemen yang akan ditampilkan pada like box. Dan untuk lebih jelasnya perhatikan gambar di bawah ini.
Terimakasih bila Anda tetap menyertakan dan mencantumkan URL lengkap sumber artikel ini. 

catatan:

url isi dengan delelopers fb sobat

width isi dengan ukuran panjang yang di inginkan 

Height isi dengan ukuran tinggi yang di inginkan

untuk Show Faces, sebaiknya di centang

 Show stream,Header boleh di centang 

selanjutnya klik get kode:

pilih kode iframe yang terletak di bagian kiri nomor 3