Cara Membuat Floating Bar Sharing Social Media

Floating Bar ini adalah Widget Beberapa Social Media yang digunakan untuk membagikan posting. Floating Bar ini Juga digunakan untuk like posting anda dengan menggunakan Social Media seperti Facebook, Twitter, Pin It, Google Plus, Email, Dan lain-lain. Widget ini adalah widget sangat digunakan untuk membagikan Posting anda. Seperti Tombol Share This dan Add This pada Floating Bar ini. Widget ini Diciptakan oleh MBT. Ia membuat Widget ini membutuhkan waktu yang cukup lama dan menggunakan efek gaya Jquery dan CSS3. Widget ini juga tidak banyak memakan Banyak Tempat. Mengapa?, Widget ini Hanya muncul disaat Posting Yang dibuka dan Widget ini tidak menempel pada Gadget pada sisibar hanya saja ia mengambang pada sisi kiri. Jika Anda berminat untuk membuat Floating Bar ini, Anda Perlu Mengedit
HTML Template Anda, Untuk Lebih Jelas ikuti Cara Berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML.
• Centang Expand Template Widget, Lalu Cari Kode <b:includable id='post' var='post'> dengan menekan CTRL+F atau dengan F3.
• Setelah Menemukan, Paste Kode Berikut ini Dibawah kode <b:includable id='post' var='post'> :

<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/AVvXsEjbEoKv5x35vLvyKxR-b6dOcjtnwvkTfJW2iZGhW2QkCR1kBmWDhsaxHb5LOpRJIxEoUmXDHy7KKLS1mZRXbjX-cbPKjHxFtbZf5_KtAhlcghG0TDhY1KHuQLyi7qEoiPNuqma78lv8JwMP/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/AVvXsEjbEoKv5x35vLvyKxR-b6dOcjtnwvkTfJW2iZGhW2QkCR1kBmWDhsaxHb5LOpRJIxEoUmXDHy7KKLS1mZRXbjX-cbPKjHxFtbZf5_KtAhlcghG0TDhY1KHuQLyi7qEoiPNuqma78lv8JwMP/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/AVvXsEgbwlgols3Tut47cdlV16q3eLiEkvrRZGmo4skjG7gTq1yX5UrcqxaqmdBOE99xxyP2g6YPYURUinhLt8SmWQjTsoShxaYZY30MY9wrwOIPRK8SjKALTmnXeSwbSKy4J7WBT8Qfi528cZoa/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});</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='YourBelajarBlog'/> 
<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;Your-BelajarBLOG&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://your-belajarblog.blogspot.com' style='color:#CAC8C8;'>Widgets</a></p> 
</div> 
</b:if></b:if>

Keterangan:

Ganti Tulisan Yang berwarna kuning dengan Nama Pengguna Twitter Anda.

• Setelah itu, Klik Tombol Simpan Template.
• Dan Jika Anda Menemukan Masalah pada Tombol Facebook, Tambahkan Kode Berikut ini di bawah kode <body>

<div id="fb-root"></div> 

<script>(function(d, s, id) { 

  var js, fjs = d.getElementsByTagName(s)[0]; 

  if (d.getElementById(id)) return; 

  js = d.createElement(s); js.id = id; 

  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 

  fjs.parentNode.insertBefore(js, fjs); 

}(document, 'script', 'facebook-jssdk'));</script>

Selamat Mencoba,
Salam Sukses.




Your-BelajarBLOG