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

Asalamualaikum.Wr.Wb. - Setelah saya Update tentang Cara pasang Tv Online di Blog.Kali ini saya akan share lagi tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget CBox, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget 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.

Script Code:

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy4GASYs9YA4o-2IGRQHpsJ2hw8xksTpGc676Xh44t3ZoZqi2sLhKhSd9ho0H7tOJEkaCNmHbCJPGM3Y6758kC0cUOmBHW2uz_eJTxQ6KOU1vRt_HX-Ynq1be4-GdFXtiWO3RXw4Sa4a-/');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/AVvXsEh_aTRZTXP26e12oncT3xNLKX5bm4HxKujNJLmjgyWBZSih2QE3Uov6vKyT8-Ut1wqV9MDVF1DKkLQdEwucNGVhL_w6YmMWGkxCm2lCqyTIBM94jNStqPakV2GgoAz3UQ0rCy2LdqqHObjV/');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/AVvXsEgm4w_fBpGFiiXKiSly5t-mV1xpZr2o87Pl1tC_Sati0nvTKjFwLGHUELFEh42lQ6LpzE9GKl6x_CMZDSeANJKhUFIGajs5YUn9_cQkalxJG_T9BEQu4yeT5wGmjTrQiQy73UqtqvY3s9-n/');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/AVvXsEglCbZ8ketSWXU2hT4ecBSQ-K1hfn8KJsyTjL73Ots0u0ORQly4AGOKHFgoAeXjsbQfF_I3ETkv30MO3-H8LnM9EWucPkZk_hj4-iLCBjjCpL4McTfvXGPoslQK9fSyrNrzlpSqtZiqPgAQ/');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/AVvXsEg7bwELaJCxhK-TNT6pCEIGQNL95bwVWjmz9N4Pt7G1KJWZPNLlhmT7xTYsnZJPNdh31fKxu3aQdWZP6hmPIHLX1ZMzmstbO3pulS-gbE19TUZQKyPLvTA6G6o_2S16TaaFq-QApuFPdIWb/');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/AVvXsEgbAxz2t2CUcGZhq8fB6VIrbhnAWg2PvgywIoLmefkvO3pzLaF8VWkm-MJqF6e4CZQyNiLgrZkJ9DaQbVs83nF4VS8RaE9sdzf7t5_0XXDnx4wz3uf0b9eJOlfNESS17XCzOSTgKlR_bDDd/');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 CBOX 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 CBOX HERE dengan kode HTML CBox 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.

Maka Akan jadi Seperti Ini

Script Code:

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy4GASYs9YA4o-2IGRQHpsJ2hw8xksTpGc676Xh44t3ZoZqi2sLhKhSd9ho0H7tOJEkaCNmHbCJPGM3Y6758kC0cUOmBHW2uz_eJTxQ6KOU1vRt_HX-Ynq1be4-GdFXtiWO3RXw4Sa4a-/');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/AVvXsEh_aTRZTXP26e12oncT3xNLKX5bm4HxKujNJLmjgyWBZSih2QE3Uov6vKyT8-Ut1wqV9MDVF1DKkLQdEwucNGVhL_w6YmMWGkxCm2lCqyTIBM94jNStqPakV2GgoAz3UQ0rCy2LdqqHObjV/');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/AVvXsEgm4w_fBpGFiiXKiSly5t-mV1xpZr2o87Pl1tC_Sati0nvTKjFwLGHUELFEh42lQ6LpzE9GKl6x_CMZDSeANJKhUFIGajs5YUn9_cQkalxJG_T9BEQu4yeT5wGmjTrQiQy73UqtqvY3s9-n/');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/AVvXsEglCbZ8ketSWXU2hT4ecBSQ-K1hfn8KJsyTjL73Ots0u0ORQly4AGOKHFgoAeXjsbQfF_I3ETkv30MO3-H8LnM9EWucPkZk_hj4-iLCBjjCpL4McTfvXGPoslQK9fSyrNrzlpSqtZiqPgAQ/');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/AVvXsEg7bwELaJCxhK-TNT6pCEIGQNL95bwVWjmz9N4Pt7G1KJWZPNLlhmT7xTYsnZJPNdh31fKxu3aQdWZP6hmPIHLX1ZMzmstbO3pulS-gbE19TUZQKyPLvTA6G6o_2S16TaaFq-QApuFPdIWb/');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/AVvXsEgbAxz2t2CUcGZhq8fB6VIrbhnAWg2PvgywIoLmefkvO3pzLaF8VWkm-MJqF6e4CZQyNiLgrZkJ9DaQbVs83nF4VS8RaE9sdzf7t5_0XXDnx4wz3uf0b9eJOlfNESS17XCzOSTgKlR_bDDd/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:230px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=673800&amp;boxtag=pw5tjv&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-673800" style="border:#000000 1px solid;" id="cboxmain7-673800"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=673800&amp;boxtag=pw5tjv&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-673800" style="border:#000000 1px solid;border-top:0px" id="cboxform7-673800"></iframe></div>
</div>
<!-- END CBOX -->

</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

<a class="twitter-timeline"  href="https://twitter.com/agungforc" data-widget-id="278384790602915840">Tweets by @agungforc</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/KumpulanKataKataGombalGoneToTheSky2012&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe>

</div>
</div>

Keterangan:

- Facebook FP Like:
Ganti Tulisan Berwana Biru dgn alamat link FanPages anda