.

Wednesday, 8 May 2013

Add Social Share Button In Blogger


Hello Friends,
Social Share Buttons Are Very Useful For Your Blog. With The Help Of Social Share Button You Can Increase Your Blog Traffic Easily. You Have Don't Need To Do Anything. People Share Your Posts On Social Share Network Like as Facebook, Twitter etc. And More Visitor Comes On Your Blog.

Today I Tell To You How To Add Social Share Button In Blogger. In Wordpress Blog You Have Easily Use Social Share Plugin For Your Blog. But In Blogger You Have Add Social Share Button Custom. For Adding Social Share Button In Blogger Please Follow The Steps Below:

1. Login To Your Blogger Account.
2. Go To Template And Click On Edit Html Option.
3. All Xml Coding Of Your Blog Will Be Appear On Your Page.
4. Then Press CTRL+F And And Search  <b:includable id='post' var='post'>
5. Now Paste The Code Below :-

                   <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/AVvXsEjixgt41PgAD4dgE_pgPIfhq6kKqyo-f-qbDvL_HNMCMmw2rEcriEiKyXndJ3AHuTCM45ktlkQIPbnniYaMwJViMV6w1gxPWjr5uxXZnQAx3bCPsObw5Oqxig4nI0UVhSoMWVbQqMRAmvgW/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/AVvXsEjixgt41PgAD4dgE_pgPIfhq6kKqyo-f-qbDvL_HNMCMmw2rEcriEiKyXndJ3AHuTCM45ktlkQIPbnniYaMwJViMV6w1gxPWjr5uxXZnQAx3bCPsObw5Oqxig4nI0UVhSoMWVbQqMRAmvgW/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/AVvXsEhZ5_HBwKUG_cgJOkrYkcqDp5h3qMevwFuSEgdwIRYj5G9w8pTh_SbTVH043CP_sDQQFZvY1G0YnTB0mOTFA4XRtzqH6ffY3g5cGQsYaK2h_ylsMT-hO2G-vDq65tufhp0Epdx9vhj2F-r6/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='nannodesign'/>
<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 rel="nofollow" href='http://www.bloggertipstricks.com/2013/03/floating-share-buttons-gadget.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

6. Now Click On Save Button. 
7. Your Social Share Button Is Add Left Side Of Your Posts.

Tip:- Replace nannodesign with your twitter username.

--------If You Have Any Problem Then Comment Below--------
                                   

3 comments:

thank you so much.. i used it on my blog

I noticed that the code I pasted into my blog is now different than what you have above. Also, the numbers in the floating share bar go "empty" they don't keep a running total. AND it doesn't always show up on a page.

Can you tell me what I need to do. I'd like to remove the code, but, like I said earlier, It has changed. I'm looking just below where you said to insert it. too.

@ Denise
Hello Denise ,
Firstly Please Find The In Your Edit Html. And Paste The Whole Code. And Remember Please Remove Last Line Of Link Of This Post From Your Code.

Post a Comment

Related Posts Plugin for WordPress, Blogger...