Ini adalah salah satu dari beberapa widget Sharing yang menyita banyak waktu saya dalam merancang. Anda telah melihat tren tombol hitung berbagi mengambang di blog populer. Icon tradisional kini digantikan dengan auto tombol kontra bertambah yang diperbarui dalam hitungan detik. Kami menciptakan versi yang berbeda dari bar ini menerapkan kedua efek Jquery dan CSS3 gaya tapi widget ini berbeda karena mengandung kustom twitter, pinterest dan tombol Email. Layanan seperti AddThis dan ShareThis keduanya melakukan pekerjaan yang besar tetapi mereka masih perlu bekerja pada beberapa konflik integrasi Plugin mereka.
Pinterest pin itu tombol yang menyebabkan masalah besar dan itu pun gagal total dalam mengambil gambar thumbnail yang benar. Dalam kebanyakan kasus, bahkan tidak memilih gambar sehingga membuat  seluruh konsep menjepit hambar. Kami namun didesain ulang widget yang disediakan oleh ShareThis untuk membuat yang baru dengan memperbaiki semua kekurangan. Sharing Bar Ini  akan mengambang di sebelah kiri posting blog Anda dan akan mengikuti sebagai gulungan pengunjung atas atau bawah. Widget ini berisi counter situs jejaring sosial penting yang memiliki potensi untuk membawa Anda melalui Lintas oleh sirkulasi konten Anda ke khalayak yang lebih luas. Kami telah menguji widget pada browser besar seperti IE7 +, Firefox, Chrome dll dan membuat itu bekerja dengan baik tanpa masalah kompatibilitas atau konflik desain.

Pengembang dan blogger diminta untuk me-link kembali ke posting ini jika dalam kasus kalian ingin berbagi Code kami dengan pembaca mereka. Mari sekarang kita bekerja !

Prioritas pertama Anda terkadang harus selalu Facebook, Google+, Twitter, Linkedin dan Sekarang ada tambahan Pinterest. Semua loket berbagi ini bermain dengan baik dalam sirkulasi konten Anda melalui berbagai pengunjung. Media Sosial adalah mesin non-stoppable, yang jika digerakkan dengan benar dan hati-hati dapat membawa ton lalu lintas yang berharga setiap pengunjung senilai satu dolar. Karena terlalu banyak menampilkan kotak hitung pasti bisa mempengaruhi waktu buka blog Anda sehingga kami telah menambahkan tombol share AddThis yang menyediakan pengunjung dengan lebih dari 330 + pilihan berbagi sosial semua di satu tempat.

Mengapa tidak menggunakan JQuery?
 
Abaikan JavaScript dan perpustakaan yang mempunyai Jquery sebanyak mungkin. Browser seperti Internet Explorer masih kekurangan dukungan untuk semua fungsi yang ditawarkan oleh jquery. Apalagi JavaScript bertanggung jawab untuk persentase besar waktu buka blog Anda secara keseluruhan. Oleh karena itu kita tidak menambahkan efek geser halus untuk plugin ini karena sebelumnya kita lakukan untuk Jquery Sliding widget share.

Bagaimana cara kerjanya?
 
Kami telah terintegrasi baik AddThis dan layanan ShareThis di dalamnya. Dalam rangka untuk menyesuaikan tombol twitter dan lain-lain kami mengambil kode default ShareThis dan menyesuaikannya untuk mengubah gambar tombol, ukuran gelembung dan teks count. 
Menambahkan Floating Bar Untuk Blogger
Langkah-langkahnya disingkat sangat mudah diterapkan. Yang Anda butuhkan adalah hanya copy dan paste potongan code yang kami kembangkan dan uji sepanjang hari. Ikuti langkah-langkah yang pelan-pelan :

•  Masuk ke Blogger > Template
• Klik Edit HTML
• Klik Kolom HTML ( Ctrl + F )
• Cari Code dibawah ini

<b:includable id='post' var='post'>

• Paste code dibawah ini Tepat dibawah Code merah diatas  :

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2VHlPBR4eYe7ug4ezFaWlWP-U7MSiuBraLS1B_BJSmYA9MRUZALnH7-Ab9pVAfqQk2oeqN2kCOvFcpv4lv__d9-jMDUiEYwWUlbBHapQjK-wcKaLl1U3Z1qsgb08TJ_1k1jEWErwH9Jh/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2VHlPBR4eYe7ug4ezFaWlWP-U7MSiuBraLS1B_BJSmYA9MRUZALnH7-Ab9pVAfqQk2oeqN2kCOvFcpv4lv__d9-jMDUiEYwWUlbBHapQjK-wcKaLl1U3Z1qsgb08TJ_1k1jEWErwH9Jh/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5F1_yf4082BIoQkaorBtruazKQ3f6lHnX4t_MOR0hGNMjUJT-kO0uxpeqrCgnC8pIYCz-H3dOlQNc9sNactk5saFT46aGjL-vukjeCPcnG5RZ2smI6MKrsWuCwciKavNpM0FyMolJfE-/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='ian_azharii'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
 
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Ian An Azhari&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://azhariian.blogspot.com/2013/05/widget-folating-bar.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

 Anda Hanya perlu mengganti ian_azharii dengan username twitter Anda.

• Simpan template Anda dan lihat hasilnya !

 Sumber : mybloggertricks.com