Memasang 3 Floating [Blogger, Twitter, Facebook] di blog

Hi sahabat pecinta blogger kali ini saya ingin berbagi ilmu tentang Memasang 3 Floating [Blogger, Twitter, Facebook] di blog postingan ini berdasarkan atas permintaan sahabat kita Darma Jaya.
Floating ini banyak manfaat nya salah satu manfaat  nya adalah dapat menghemat tempat di blog sobat dengan memasang floating ini blog sobat akan terlihat lebih rapi
ok langsung aja cara membuat nya
1. Login ke Blogger
2. Masuk ke menu Layout
3. Klik add a gadget
4. pilih HTML/Java Script
5. Masukkan kode di bawah ini
6. lalu simpan
 

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFyEz1Gw07g02Za1BDCO5Oeu6n_VuQGQ6ZeLN6JoM737WboWhJtzPpdJSI_YEgS1TUfbV-42Wga1K72J8eq4G4w1m8lYl6icQ3A_LoFKKKMabjOszfKybvpuJEvn_qSK2C8u88ZfIuCmkR/');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/AVvXsEim6swdcei8r4bZ9jjVErWDrkwWMcqq5jBa69t9HgMC0ivWz1ue-yAy7h7rnMQaZlbKG1fY-d2ccl9phP1rFQHUQXVX6qiD6Df41BeLp1QGWcMkKLc1MgXpGlPHGKWqALdfb1vWWh1VyJ-X/');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/AVvXsEjyn0McL2y5g3AACEBJd2xH2S_BwkwKedQ2fgLbl0LcP7iIwdtRSUWsS9W0UVo1G7r9aPmVg-BCVQ193ZZlnBtJfn25UrA7Ppk27RT_4p9jKESNoQHWnupGz4WWy3MozBHy_GYj9oz0ecSF/');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/AVvXsEjVSrmWXPOcqZRddxk06IsSGrVDBAHMCr-mVO3XQP0YZG3cBhPtc5WaVm5HnDThYmrLXu-gqVfUsuGUnxmmX7lqGWzaV_vYa0GpcWhzX0mUejSqs5LwICVr6ekHZlKXqzy-ub7Yc6KZrDiK/');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/AVvXsEgBJPEW5CKZEnEz4nAgVOlJnSpFMvEprxW9jpbulIr69zK4hnenzx9QRPZR9GTgM9puZbdYTQgHnp9rKu2XRPznKnvy0mupcwIOdGAUepR7cZ-IEs1fsQxIqtom3lMTuL9WmmIBeTLq2dpL/');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/AVvXsEgiqj3264td1vFlN29EK1OqRuIos4Puqak0iEb9TQsO9li0hgVLh7pBesmnsNU9X6-5G63kLxkBhmKal3V4jdb08gd65Lr_UHWpuOyqCD1aAFLYoBMd2bDrMt3kT4vPofvbl4PSdex1qKOO/');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-2381330716883891486" style="width:276px;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'] = '#e0ecff';
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'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-2381330716883891486',
   site: '04937768980873870125' },
  skin);
</script>


<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: 'auto',

  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('CheatsSoul').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/Cheats-Soul/186256631429562&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><span><a href="http://cheatssoul.blogspot.com/2012/02/memasang-3-floating-blogger-twitter.html" target="_blank">+ Get This</a></span>

</div>
</div>

KETERANGAN :
- Rubah kode yang berwarna biru dengan kode friend connect blog sobat
- Rubah kode yang berwarna merah dengan kode twitter update untuk cara mendapatkan kodenya silahkan sobat KLIK DISINI 
- Rubah kode yang berwana pink dengan url facebook yang ingin di tampilkan

Apabila sobat ingin menampilkan hanya floating facebook like seperti di blog saya silahkan sobat copy kode di bawah ini lalu klik simpan

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFdjjUCxVmbFJU5guLdnwno5ERethHrF36m6diOGu2FPTzmXgqtfpdcFSwMXIum-H4T9Bk53eiIoX3Lecn9xWBfmqvuhUn8bK1zoBm0peXMWN7Wik-qNLrnQq630Vil7CVI7E3HKN3oIE/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 260px;padding: 0 5px 0 40px;width: 240px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Cheats-Soul/186256631429562&amp;width=247&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://cheatssoul.blogspot.com/2012/02/memasang-3-floating-blogger-twitter.html" target="_blank">+ Get This</a></span></div></div>

KETERANGAN :
- Rubah kode yang berwarna merah dengan url facebook like sobat

Semoga berhasil, jangan lupa tinggalkan komentarnya..