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


 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.
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(‘http://1.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/blogger.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url(‘http://2.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/blogger.png&#8217;);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(‘http://1.bp.blogspot.com/–gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url(‘http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png&#8217;);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(‘http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url(‘http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/facebook.png&#8217;);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 onmouseover=”this.className=’barrightbloggerc'” onmouseout=”this.className=’barrightblogger'”>
<div>
CONTENT BLOGGER HERE
</div>
</div>
<div onmouseover=”this.className=’barrighttwitterc'” onmouseout=”this.className=’barrighttwitter'”>
<div>
CONTENT TWITTER HERE
</div>
</div>
<div onmouseover=”this.className=’barrightfacebookc'” onmouseout=”this.className=’barrightfacebook'”>
<div>
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.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :
<style type=”text/css”>
.barrightblogger{
background:url(‘http://1.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/blogger.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{
background:url(‘http://2.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/blogger.png&#8217;);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(‘http://1.bp.blogspot.com/–gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/twitter.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url(‘http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/twitter.png&#8217;);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(‘http://1.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/facebook.png&#8217;);background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div onmouseover=”this.className=’barrightbloggerc'” onmouseout=”this.className=’barrightblogger'”>
<div>
<!– Include the Google Friend Connect javascript library. –>
<!– Define the div tag where the gadget will be inserted. –>
<div id=”div-5280101236238054965″ style=”width:225px;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’] = ‘#ff9900’;
skin[‘ENDCAP_TEXT_COLOR’] = ‘#333333’;
skin[‘ENDCAP_LINK_COLOR’] = ‘#0000cc’;
skin[‘ALTERNATE_BG_COLOR’] = ‘#ffffff’;
skin[‘CONTENT_BG_COLOR’] = ‘#ffffff’;
skin[‘CONTENT_LINK_COLOR’] = ‘#0000cc’;
skin[‘CONTENT_TEXT_COLOR’] = ‘#333333’;
skin[‘CONTENT_SECONDARY_LINK_COLOR’] = ‘#7777cc’;
skin[‘CONTENT_SECONDARY_TEXT_COLOR’] = ‘#666666’;
skin[‘CONTENT_HEADLINE_COLOR’] = ‘#333333’;
skin[‘NUMBER_ROWS’] = ‘5’;
google.friendconnect.container.setParentUrl(‘/’ /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: ‘div-5280101236238054965‘,
   site: ‘13497557564014853740&#039; },
  skin);
</script>
</div>
</div>
<div onmouseover=”this.className=’barrighttwitterc'” onmouseout=”this.className=’barrighttwitter'”>
<div>
<script>
new TWTR.Widget({
  version: 2,
  type: ‘profile’,
  rpp: 2,
  interval: 30000,
  width: 220,
  height: 220,
  theme: {
    shell: {
      background: ‘#333333’,
      color: ‘#ffffff’
    },
    tweets: {
      background: ‘#333333’,
      color: ‘#f3f5f0’,
      links: ‘#eb9f07’
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    behavior: ‘all’
  }
}).render().setUser(‘@rayhanzhampiet‘).start();
</script>
</div>
</div>
<div onmouseover=”this.className=’barrightfacebookc'” onmouseout=”this.className=’barrightfacebook'”>
<div>
<iframe allowtransparency=”true” frameborder=”0″ scrolling=”no”
0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320″ style=”border: none; height: 320px;
overflow: hidden; width: 240px;background: #fff;”></iframe>
</div>
</div>
5.     Kalau mau gampang sobat tinggal mengganti ID akun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudah saya tandai dengan tulisan warna merah dengan ID atau kode akun milik anda.
6.      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 halamanhttp://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman inihttp://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. Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!

2 thoughts on “Cara Membuat Widget Google Friend Connect, Twitter dan Facebook Like Box

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s