» » Create Floating Bar For Pinterest & Other Sharing Buttons

Create Floating Bar For Pinterest & Other Sharing Buttons

03.33  Unknown   Label:
In this post i m going to share that how to add floating bar having Facebook like , Google+ , Pinterest and others social sharing buttons. This widget is created by CSS and jQuery effects. This widget is compatible for all browsers. This widget is originally created by By Mybloggertricks. The floating will appear on the left hand side of your post and will move and down as readers as readers scroll the page up and down. This widget contain counters which shows that how many times your posts like and shared. This widget perform a great roll to spreading your posts which help to increase a traffic on your blog.

The below steps are very easy to follow and apply. You just need to copy and paste into your blogger template to add this floating bar into your blog.

  • Goto Blogger > Tenplate.
  • Click on Edit HTML.
  • Search the below code.
<b:includable id='post' var='post'>

  • Paste the below code just after the above code.
 <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/AVvXsEhfEwVn7KJi9qhdkV2ulcismNBP2pCoKlxm7gAATmSX4dXYu7ziiPb_L0YOqBJ923LT-qIUx61ab-k2Uup_wAnXjrEui6ST0C0zvg3NVUZeAsKGc16WoH5gnuft4cYJQlbQiJ2kCEzN7-nv/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/AVvXsEhfEwVn7KJi9qhdkV2ulcismNBP2pCoKlxm7gAATmSX4dXYu7ziiPb_L0YOqBJ923LT-qIUx61ab-k2Uup_wAnXjrEui6ST0C0zvg3NVUZeAsKGc16WoH5gnuft4cYJQlbQiJ2kCEzN7-nv/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/AVvXsEjF0G5XYziaK8zirPuoVdQYsDHw2-6kSusYxJr0jpYDCgD-TiGbcDoD5robAMhVTLqv4KkugyFcovejz0_UllZEHcsY0Vz-gq-ZwTi-ZZkkDXQkVsk4e0VDNv8IVbdEk7vVNHWxuk_XdfLN/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='haiderakhunzada'/> 
<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;MY BLOGGER TRICKS&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://www.truebloggingtricks.com/2013/07/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p> 
</div> 
</b:if></b:if>

  • Replace haiderakhunzada with your twitter username.
  • Now click on save button and you are all done.
Note: Incase your facebook button is not appear then copy the following and paste it just below </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>
Share on :
di 03.33
Label:

Tidak ada komentar:

Posting Komentar