Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Floating Bar Sharing Social Media

by Irsyad Aslam , at 2/19/2013 , has 3 komentar
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;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/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;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/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('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/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
Irsyad Aslam
About
Cara Membuat Floating Bar Sharing Social Media - written by Irsyad Aslam , published at 2/19/2013, categorized as Widget . And has 3 komentar
3 komentar Add a comment
mksh gan atas info'x, sangat bermanfaat sekali..
Iyah Sama-Sama,
Makasih.

Salam Sukses,
Your-BelajarBLOG
Delete
Reply Delete
Thanks for sharing a great post. I appreciate your thinking
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger