Latest Games :

Free Template »

Bookmark and Share
Home » » Cara Buat Floating Share Buttons

Cara Buat Floating Share Buttons

Jumat, 18 Januari 2013 | 5komentar


Cara Buat Floating Share Buttons


Floating Share Buttons atau Tombol berbagi melayang merupakan widget blog yang sangat populer saat ini. Widget Floating Share Buttons ini banyak di pasang oleh blog atau website terkenal seperti simplebloggertutorials.com, mybloggertricks.com, bloggersentral.com, dll. Kalau blog saya ini memasang tombol berbagi melayang, bukan berarti saya meniru blog-blog yang saya sebutkan tadi, semua itu kebetulan saja. Saya sangat suka dengan Floating Share Buttons ini, karena disamping memperindah tampilan blog kita, juga dapat mempromosikan blog kita ke situs situs jejaring sosial seperti Facebook, Twitter, dan Google +. Untuk memasang widget yang keren ini, sobat blogger tidak perlu Edit Template. Gampangnya, ikuti saja langkah di bawah ini!

Cara Pasang Floating Share Buttons di blog :
  • Sign In di Blogger kemudian klik Design
  • Kli Add A Gadget
  • Pilih HTML/JavaScript.
  • Copy paste kode di bawah ini pada kolom yang tersedia
<style> 
/*-------LB Floating Sharing Widget------------*/
#floatdiv { 
  position:fixed; 
bottom:15%; 
margin-left:-70px; 
z-index:10; 
float:left; 
padding-bottom:2px;
}
#lbsidebar { 
        background:#fff; 
        border-top:1px solid #ddd; 
        border-left:1px solid #ddd; 
        border-bottom:1px solid #ddd; 
        border-radius:5px; 
       -moz-border-radius:5px; 
       -webkit-border-radius:5px; 
        padding-left:5px; 
        width:60px; 
        margin:0 0 0 5px; 
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} 
</style>


<div id="floatdiv"> 
<div id="lbsidebar"> 
    <table cellpadding="1px" cellspacing="0">

    <tr> 
    <td style="padding:5px 0px 0px 0;"> 
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="lenterablogger">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
    </td> 
    </tr>
    <tr> 
    <td style="padding:5px 0 2px 0;"> 
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> 
    </td> 
    </tr> 
    <tr> 
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> 
<g:plusone size="Tall" expr:href="data:post.url"> 
    </g:plusone></td> 
    </tr> 
    <tr> 
    <td> 
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#ffffff;" href="http://lenterablogger.blogspot.com/">Widget</a></p> 
    </td> 
    </tr> 
    </table> 
</div> 
</div>
  • Simpan Widget sobat blogger

Tambahan :
  1. Untuk mengatur posisi widget Floating Share Buttons terhitung dari sebelah kiri halaman blog, ganti angka pada kode ini : margin-left:-70px;
  2. Untuk mengganti warna background dari widget ini, ganti kode #fff pada kode background:#fff;

Share this article :

5 komentar:

  1. This web site really has all the info I needed concerning this subject and didn't know who to ask.


    My site - brazilian weave bundles

    BalasHapus
  2. Pretty nice post. I just stumbled upon your blog and wished to say that I've truly enjoyed browsing your blog posts.
    In any case I will be subscribing to your rss feed and I hope you write again very soon!

    Here is my page خدمات سئو

    BalasHapus
  3. Hi there it's me, I am also visziting his website on a reguhlar basis, this web
    site is really fastidious and the viewers are in fact sharring nice thoughts.



    My homepage :: venapro negative reviews

    BalasHapus

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. trik internet indonesia - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger