Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box  - Inilah persembahan 3 in 1 floating widgetyang menurutsaya merupakan salah satu widget blogger terbaik di penghujung tahun 2011ini . 3 buah widget melayang
yang digabung dalam 1 gadgetini merupakan sequel jilid 2 dari postingsaya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadgetini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Box sekaligus !! Demo penerapan widget melayang (floating widget)ini bisasobat lihat disamping sidebar kanan blogini . Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Likeini akankita bedah bersama (hiks..!) dalam tips blogging kaliini .

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1.   Login ke dashboard bloggeranda , pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
2.       Copy script master widget dibawahini dan paste pada gadget.
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSPs3TbysZEtWomLswjrZYvOf_Paoa6d7H8Z88Q_xdcLOQaF5dECaGf2tOJKxEkoqnS6uHW-2jsBQwFwfdLGHoxtftvPqMGFk_SAfRPnlnCiM_GkShiPHBiMRYhRV8GqI8tz3sXJjFqsD/');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/AVvXsEgfYmSPhLuhrpEjeEeK1Lzbmpbvv738uozPKlZyM2mmAeMPgLXPjM76w_BVFixYpMr_Z2uJ6WMX0m-3kjbJ6s-OgdWgsaUfocDEOYZcW6cbyW9iCwKeC8Nwc56io8UxLe4gerJdR6v36tC_/');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/AVvXsEiFkCkedX2tb8s_PSwQIpz4ETJf3tdL8x7mfKM04YY3XMP8TDc-lP2ZnIbwaMejXw5OFrZeor8b0Cd6M9p6_UVpAXAfyljQGTnKyhsJGUWjBzNcizW6ZNQq9rPVW9pv8ewkyX6lzckUMayM/');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/AVvXsEinxdGnYUWwzfW7KrIK-USB7KasqMCdYhqsD-8fb75Ra2pdw_uCfV0GBaejooKx3mtpM58FBl61Ts5679bxIzU0zaNhbeUonEsUslvHsMVi60nuwH1wAkdlLkHpmaBsTD5PKKefZ9YzSjxK/');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/AVvXsEhA6h7A1gV7rI8kNxewf7PZst8xQwwRqw-LS4-p4wGXpYjDGYZTY1BPs_WDOdYbrZT01MUN2hokyhUremzCHqLgvCX7xaCTLO_1GO9Kpd7_2D-VHdfKDbrvN0CWrLZCOF-yoYqNLWMYGm4q/');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/AVvXsEhEGxGYAc1c8GqeK8uheURbc9UFll6om2oTxeLFgN835qodd7eizh2jKIPh4dhNreV5aynwnB9Fh4hutER1oBfdMphGXUlgvAPValuWuIW4G4F-RrsQHhuKu0YlN_DJVEhGaOuDOZr3sHzh/');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 Connectanda .
  • Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitteranda .
  • Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Boxanda .
4.      Bentuk akhir dari kode scriptini ( Final Code ) akan menjadi seperti script widget miliksaya dibawahini :
<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSPs3TbysZEtWomLswjrZYvOf_Paoa6d7H8Z88Q_xdcLOQaF5dECaGf2tOJKxEkoqnS6uHW-2jsBQwFwfdLGHoxtftvPqMGFk_SAfRPnlnCiM_GkShiPHBiMRYhRV8GqI8tz3sXJjFqsD/');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/AVvXsEgfYmSPhLuhrpEjeEeK1Lzbmpbvv738uozPKlZyM2mmAeMPgLXPjM76w_BVFixYpMr_Z2uJ6WMX0m-3kjbJ6s-OgdWgsaUfocDEOYZcW6cbyW9iCwKeC8Nwc56io8UxLe4gerJdR6v36tC_/');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/AVvXsEiFkCkedX2tb8s_PSwQIpz4ETJf3tdL8x7mfKM04YY3XMP8TDc-lP2ZnIbwaMejXw5OFrZeor8b0Cd6M9p6_UVpAXAfyljQGTnKyhsJGUWjBzNcizW6ZNQq9rPVW9pv8ewkyX6lzckUMayM/');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/AVvXsEinxdGnYUWwzfW7KrIK-USB7KasqMCdYhqsD-8fb75Ra2pdw_uCfV0GBaejooKx3mtpM58FBl61Ts5679bxIzU0zaNhbeUonEsUslvHsMVi60nuwH1wAkdlLkHpmaBsTD5PKKefZ9YzSjxK/');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/AVvXsEhA6h7A1gV7rI8kNxewf7PZst8xQwwRqw-LS4-p4wGXpYjDGYZTY1BPs_WDOdYbrZT01MUN2hokyhUremzCHqLgvCX7xaCTLO_1GO9Kpd7_2D-VHdfKDbrvN0CWrLZCOF-yoYqNLWMYGm4q/');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/AVvXsEhEGxGYAc1c8GqeK8uheURbc9UFll6om2oTxeLFgN835qodd7eizh2jKIPh4dhNreV5aynwnB9Fh4hutER1oBfdMphGXUlgvAPValuWuIW4G4F-RrsQHhuKu0YlN_DJVEhGaOuDOZr3sHzh/');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">
<!-- Include the Google Friend Connect javascript library. -->
<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-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 class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<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 class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Share-With-Irfan-Blogs/322414587773378&amp;width=24
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 gampangsobat tinggal mengganti ID akun Google Friend Connect, Twitter dan Facebook Like miliksaya yang sudah saya tandai dengan tulisan warna merah dengan IDatau kode akun milikanda .
6.      Jikasudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.
Buatyang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikutini tutorialnya :
1.       Login ke Google Friend Connect menggunakan akun blogger/gmailanda .
2.       Klik nama bloganda pada sidebar kiri dan pilih Add the member gadget.
3.     Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawahini . Lakukan kustomisasi lebar gadget, jumlah baris followeryang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalamanini .
 4.        Jika kustomisasisudah selesai, klik tulisan Generate code pada langkah ke-3 Create the HTML code, maka kode HTML gadget follower / Google Friend Connect milikanda sudah selesai dan siap dicopyatau disimpan di notepad.
Untuk pengaturan widget update status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Box dapatsobat membuatnya dihalamanini http://www.facebook.com/pages/create.php. Mohon maafkalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan anesudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerahkalau ternyatasobat gagal memasang dan melakukan pengaturan pada widget
ini . Blogger sejatitidak mengenal kata MENYERAH kecualianda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!