Social Network Sharing is one of the major contents regarding Blogger SEO, Though you must have any social share widget on your blog to allow Blog Readers or Users to share your blog content on Social Network Sites which helps to increase your Social Backlinks and SEO Score.
In this post we are going to learn about Adding a Floating Social Share Widget to your Blogger Blog, last time I had posted about “Awesome Social Sharing Widget below Blog Post for Blogger” It was really nice you should try it.
This widget is originally developed by mybloggertricks.com, thanks to Mohammad for this widget. I did several changes in it as I have added facebook send button to it which helps you and blog users to send you blog post link directly to facebook friends and groups. Also i have enhanced its width and some extra paddings to make it totally comfortable with your blog.
Unique Features About This Widget :
- Fixed position while scrolling the blog.
- Highly Customized Widget Theme.
- Widget doesn't affect blog loading time.
- Contains most Popular Social Share Tools. [Facebook Send, Like, Twitter Tweet, Pinterest Pin It, Recommend on Google+, Stumble Upon , Addthis Multi-Share etc etc]
- CSS Optimized Widget.
- Tested and 100% Works with IE and Chrome.
- Easy to Install.
You can see the screenshot of this widget below :
1. Go to Blogger > Dashboard > Template.
2. Click Edit HTML > Find this code
<b:includable id='post' var='post'>3. Now After finding the above code , copy the below code and paste it below the
<b:includable id='post' var='post'> code.
Simply copy this code -
<b:if cond='data:blog.pageType == "item"'>4. That's it ! Save the Template.
<b:if cond='data:blog.pageType != "static_page"'>
<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:urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1tk54pFl0CA_52fU_yi_VQ845hJnPpvmi5f-Kk00eoEarczEYgjDb4ru3-Hp7BLH2v8Kq-bgDnXX5cS4CiOKGaH0oqQT85ZGVMDyjytBmKdqaENbTqJCegomgFz6k2uIBtVv4a-eIotp/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU1tk54pFl0CA_52fU_yi_VQ845hJnPpvmi5f-Kk00eoEarczEYgjDb4ru3-Hp7BLH2v8Kq-bgDnXX5cS4CiOKGaH0oqQT85ZGVMDyjytBmKdqaENbTqJCegomgFz6k2uIBtVv4a-eIotp/s400/gc_social_sprite.gif') !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:urlundefined'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4upbHPXsv8R3SBw08M7bBt_bq4LKKveaibY2h22ydowwEIUpiTaSt41cupZJPejSLgfX44K2yyx3CP9muFQ6t0hizN4p5HcXQPdLRMvS_uEZ6KyUKv5NIsfSK63AWe-QKBrEuURonNzK/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.optionsundefined{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=''/>-->
<b:if cond='data:blog.pageType == "item"'>
<div style='margin:0px 0 0px 4px;'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send expr:href="data:post.url" font=""></fb:send>
</div></b:if>
<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='rohitasare1'/>
<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: "MY BLOGGER TRICKS",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://techethix.blogspot.com' style='color:#CAC8C8;'>Get</a></p>
</div>
</b:if></b:if>
5. Go to Your Blog and check the widget. You have to replace “rohitasare1” to your twitter username.
Please don’t remove the attribution link from this widget or it will not work properly !
Don’t forget to Subscribe Us and Share This Article, You can also Add Our badge as a Reputation :-)Do you have any questions? Just drop them in comment below or simply saying thanks can give me big pleasure ;-)
.jpg)
.jpg)
