Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

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/AVvXsEjYna0udrGVfm3D99UhmUSgVc37lHOmT-3uBdp3ETeZF_oJohY6mPgyh9Z7gCIOkYyNE_7V39Uff1tDvvt78e91XSRhEC_YVVqlsXdpREK-48tfY7EdqGYG50rQkXT0hLymJYWzkMdCvU7N/');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/AVvXsEgPI5DeF8qCmwr1bhe9KbJoYGDEK2gFkiEICcUN4IAO7W3luWBb8atgmDffHnJsHHShU7KQqGiKQ4aG3BfDzBTtNqJGDG_hs2w3UYAXlx23AFOIdQmTPL5bK6MLg0jV-0keoUUruOoV4o-5/');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/AVvXsEgGgvwXOfrgIhgTtxrXQj3faUlQ94_rlnNrln59JCdmT2N7DwlvxE9nEjTfNAu1gtxUBSADZT-WeO2pzSVVSGA-rg_z38z1M-mF5_jhno6KThtypthfc8mQXe1nwe0s34-tQQrPmV7aYJ4E/');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/AVvXsEje6G-WFMIHOMu-sXZdbmOr1z6-mjybvQZlSewHSCeeon9Mm-sjSvILR0hh8bCfJudZAP5epZnYqtE1i44jG73dkz6vqwN1V3hABtRchsD0MyN0qG6ME6rno6l7dtcSVUvCDvu4NdMAmhwu/');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/AVvXsEizjj1flN3mx0qnQQDPLKDRc-KrHWhcA_iWufYLjXqmfvzqw9ieG0yknWIWCOZYHie4l1KIoaCJUaI2hBiutLfNUFHztlLH-Xa4gkGEN25PpjtPWYDpODF-20_fvhc_MVA_hyphenhyphen9ew5a74cIu/');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/AVvXsEg2ii7AyC3kaKczJ-vahWHSa4sf_1RAV24tMC6fEqhdKQGRh1AppulmaTvvKAqxgF4ELjUj1Rz3I_SrXodog5DgtXaFArp7tS43lE5XjId4GzTly5AQUvV5ojUcJUJ4B18fViB_DoFKMR2e/');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.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :


<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYna0udrGVfm3D99UhmUSgVc37lHOmT-3uBdp3ETeZF_oJohY6mPgyh9Z7gCIOkYyNE_7V39Uff1tDvvt78e91XSRhEC_YVVqlsXdpREK-48tfY7EdqGYG50rQkXT0hLymJYWzkMdCvU7N/');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/AVvXsEgPI5DeF8qCmwr1bhe9KbJoYGDEK2gFkiEICcUN4IAO7W3luWBb8atgmDffHnJsHHShU7KQqGiKQ4aG3BfDzBTtNqJGDG_hs2w3UYAXlx23AFOIdQmTPL5bK6MLg0jV-0keoUUruOoV4o-5/');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/AVvXsEgGgvwXOfrgIhgTtxrXQj3faUlQ94_rlnNrln59JCdmT2N7DwlvxE9nEjTfNAu1gtxUBSADZT-WeO2pzSVVSGA-rg_z38z1M-mF5_jhno6KThtypthfc8mQXe1nwe0s34-tQQrPmV7aYJ4E/');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/AVvXsEje6G-WFMIHOMu-sXZdbmOr1z6-mjybvQZlSewHSCeeon9Mm-sjSvILR0hh8bCfJudZAP5epZnYqtE1i44jG73dkz6vqwN1V3hABtRchsD0MyN0qG6ME6rno6l7dtcSVUvCDvu4NdMAmhwu/');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/AVvXsEizjj1flN3mx0qnQQDPLKDRc-KrHWhcA_iWufYLjXqmfvzqw9ieG0yknWIWCOZYHie4l1KIoaCJUaI2hBiutLfNUFHztlLH-Xa4gkGEN25PpjtPWYDpODF-20_fvhc_MVA_hyphenhyphen9ew5a74cIu/');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/AVvXsEg2ii7AyC3kaKczJ-vahWHSa4sf_1RAV24tMC6fEqhdKQGRh1AppulmaTvvKAqxgF4ELjUj1Rz3I_SrXodog5DgtXaFArp7tS43lE5XjId4GzTly5AQUvV5ojUcJUJ4B18fViB_DoFKMR2e/');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-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-3587425820990824703',
   site: '12625880981379543615' },
  skin);
</script>


</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('KertasKecilKita').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">




<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&width=250&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowtransparency="true"></iframe>


</div>
</div>




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


catatan : Bila anda masih bingung atau kesulitan untuk mengetahui kode ID Google Friend Connect (GFC), Facebook Like Box, dan Twiter Update berikut ini tutorialnya :
 Cara Menambahkan Google Friend Connect Pada Blog
 Cara Menambahkan Facebook Likd Box Connect Pada Blog
 Cara Menambahkan Twitter Update Pada Blog


TERIMA KASIH
SEMOGA BERMANFAAT