After creating a blog on Blogger, you customize its appearance to present a better look to the visitors. Then you write posts for getting traffic and you know how hard it is for a newbie to write a interesting post which attract the visitor to the blog. Whenever you write a new post, you have to share them on social platform to get visitors. Sometimes you share a post several times to get it popular. But how good it will if you add some widget/tool to your blog to let the visitors share your blog posts. This will definitely save your precious time and hence you will get more time to write your next post.
You guys have seen a floating bar on this blog which let you share the posts on social media, this is the Sharethis widget for Blogger Blogs. Last month, I got this widget from the most popular Pakistani Blog, My Blogger Tricks. So today I am sharing this useful widget with you. This will let the visitors share your posts on social media and hence, you may get some more traffic which will be a reward for your hard work.
Adding this widget to your Blogger Blog is very easy. All you just need is to follow these steps carefully.
- Log In to your Blogger Blog.
- Go to Template and make its Backup. Read: How to Backup Blogger Template
- Click on Edit Template.
- Search for the following line by pressing CTRL+F.
<b:includable id='post' var='post'>
Now add this entire code just below this line
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-75px; 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVZkHVDsXKGaGZl2f0Nzdoo7GPpqb2NWYlOmYFf5bWv50zL3ob_CWb-8_n2UlAtPfRekWhxQKBzEu4xKzgzW0ipb7t_CI4g2JHMwPYwilq3CkiXZVOOWe9o0S7bHrlZZvFaM5v0POqDPY/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:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVZkHVDsXKGaGZl2f0Nzdoo7GPpqb2NWYlOmYFf5bWv50zL3ob_CWb-8_n2UlAtPfRekWhxQKBzEu4xKzgzW0ipb7t_CI4g2JHMwPYwilq3CkiXZVOOWe9o0S7bHrlZZvFaM5v0POqDPY/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:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnNEu2w8zWonsazZNYWZr3TQGbuBvWJi-sOYFHh4DTcIXuvE639aJSNXoJfPISZk7WPWtvxl9MkUytc5HEYzgSc6JldBgtYbscOcgL9KkB1WscUHdzY7SWX25dASmd8IowCYmZ_fQWR6o/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='galakcious'/>
<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>
</div>
</b:if></b:if>
- Replace bloggerunlocker with your Twitter Username.
- Now save the template and you have done.
EmoticonEmoticon