ADMIN Effendi-Dmth.blogspot MENGUCAPKAN SELAMATMENYAMBUT HARI RAYA IDUL FITRI 1433 HIJRIAH MOHON MAAF LAHIR DAN BATIN

Saturday, June 16, 2012

Cara Buat Tombol Share di sisi Postingan


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 FacebookTwitter, 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 kodebackground:#fff; (Untuk melihat kode warna, klik link ini : HTML Color Code).


Artikel terkait:

Ditulis Oleh : Effendi Dalimunthe ~ Hidup Akan Terasa Indah Bila Saling Berbagi

Artikel Cara Buat Tombol Share di sisi Postingan ini diposting oleh Effendi Dalimunthe pada hari Saturday, June 16, 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

SUBMIT YOUR SITE 4 FREE

0comments:

 
Related Posts Plugin for Effendi DmTh,