Sunday, 17 March 2013

Tagged under: , ,

Add All Social Sharing Floating Buttons Widget in Blogger

Blogging becomes more interesting if visitors share your contents in different social media networks sites with their friends less in time. But now a days it becomes a common problem for every blogger and webmaster when they spend alot of time in sharing theirs contents on different social media sites and waste their precious blog posting time. really it will take all your precious time think about it.

Today in this article i will share with you some amazing Social Sharing buttons widget with the help of this social sharing buttons widget you will be able to share your each post contents in less than a minute. this vertical social sharing floating buttons widgets widely used by many bloggers and webmasters.


So this article is all about how to add social sharing floating buttons widget in Blogger. by adding this awesome All social sharing buttons widgets in your blog, then  you will see a dramatically change in visitors in all your social sharing media sites. This widget was created by MBT

How to Add Social Media Floating Widget to Blogger?

Now see how to add this social media bookmarking widget in blogger. 
  • Blogger >> Template >> HTML >> Proceed >> Expand the Widget Template 
  • Search for below given code by using CTRL+F

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

  • Paste the following 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;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;
}
</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>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='ProBlogerTricks'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<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.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Customization Social Sharing Floating Buttons Widget

By adding the above code you must change the ProBlogerTricks with your own twiter user name. If you want to change the location of widget to right side of your blog just change the float:left to float:right  Thats all.

14 comments:

  1. Therefore, it is extremely lightweight, get more instagram followers fast and it would not affect your site speed. Today in this article, we will Add All in One Social Subscription Box in Blogger.

    ReplyDelete
  2. @Muhammad Amir

    Thanks Amir to see you here. keep in touch with us.

    ReplyDelete
  3. Wow, wondеrful blog layout! How long haνe you been blоgging for? уou maԁе bloggіng lοoκ еаsy. The ονеrall look of your websitе іs wоnderful, as well аs the сοntent!

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. not showing on home page how to show this on home page..

    ReplyDelete
    Replies
    1. This widet shows on only pages not in homepage if you want to make it work. Remove the below shown codes

      <b:if cond='data:blog.pageType =="item"'>
      <b:if cond='data:blog.pageType !="static_page"'>



      </b:if></b:if>
      ---------------------------------------
      Happy Blogging
      Regards
      www.bloggerbulk.com

      Delete
  6. No Way, you have those cool circular share icons but never show us How ro ADD THEMTO OUR BLOG INSTEAD YOU GIVE US THE SAME CRAP YOU STOLE FROM ANOTHER BLOG. WHAT ARE YOU SOME KIND OF FRAUD?

    ReplyDelete
  7. thanks i was search for this long time ago thanks i will tell if you it work :)

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism