4 Cara Membuat Widget Follower Google, FB, Dan Twitter Melayang Di Blog (3 in 1)

Cara MemBeri Widget Follower Google,FB,Twitter
Step :
1. Login Blogger
2. Klik Tata Letak
3. Klik Add GADGET
4. ADD HTML/JavaScript
5. Copy Kode Berikut Ini :

<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitO8R1gDKRIdYoYk9X0mBHjXj1wWrhH2ngk8u65-5-JlyGsjFgyDjJHt0YlcPFirPQYT9sbbsOFNULM5cSCDIpJODijH_gMCrpPUwnuuxDHYB2t_sdzL5Njd8LUtOG-Py2EdrIAGCh8-ro/');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/AVvXsEi3mLbOAwhz_hho07R-5nOw_XClIsW5M69uXqEJwfpAsSzfA6KKnBDX928fqr80OFVLTkPA2EpXxSUeWFQ1n9iXyysGG8QRQ_RYhzgym8F2nRMWHeLDcdEzRt6aUcI4kQm7-pq-mq5-sPTz/');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/AVvXsEiUm7DsCfxls1pI3sqG6cSUxgr7a7FdX7GsMuo3Xg_dLxnjGo4pZwghIKXG7majQAsUSx7q9LqUbNXInkvlpvDknNHGl2Q5NFowghDyrG-cLURA4LKze4Q-p8_uRK5SxQ0uWQqkLj3WeGso/');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/AVvXsEiAuZQhnAOIkLF-X4U_qwFhYl7RVp2APG2Fxcsj_uADPNnoZghgMOvCuFJta48Oe93GJx7cM1TGpjcNoMNVfM997fUW80chUOZqg-Jj3Fj6HdTMdnTMNo3Cq7vWrxFpEj0vXfEAyK2bN4Rx/');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/AVvXsEiR7KSk8G8iTqkIQHF3dWwLghvdEU7P7ZEWnd0YQZJ1AWvNEOZfeS_kooTRrzZUwXD5nceH5OtEBO2lUh0dprI0BHqCZoAyUDhbVg3eIdhIUGHly3t_-Z-lxJv5ZBZaCudVxefXVNtCGJ4i/');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/AVvXsEjq79oONcStthAwBFvF6EhNIN8fC0R-1f86wHvrkTXJNWRnUea1yLeZijW-D0DkGZtY_d2eLpnHjw4GL5rwEjtmAoDabazqD8KlpukXOERat91k71Iyaf7JOYfpTYnuBJb9bosdnQKrI80T/');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-5705219719496776630" 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-9151405012948549040',
   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('@davidprasetya').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/TheGreenCool&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>

6. Selesai
 Note : 
-Ganti Kode Yang Berwarna Biru Dengan Kode ID Blogger Sobat
-Ganti Kode Yang Berwarna Kuning Dengan Kode Twitter Sobat
-Ganti Kode Yang Berwarna Merah Ganti Dengan Kode FB Sobat (Bukan Akun Tapi Halaman FB)

Sumber : http://www.rayhanzhampiet.com/2011/12/widget-google-friend-connect-twitter.html

Klo Mau "COPAS" Kasih Sumber Seperti DI atas !!!!

Artikel Terkait :