Vertical Sharing Widget for Blogger

February 24, 2014

2578

We have another fantastic blogger widget to customize and make a great use of your blog. A floating Vertical Sharing Widget for blogger having sharing options for Facebook, Google+, Twitter and many more social networks. This Social mention blogger widget comes with a great feature, it has a share counting feature which counts the number of shares on every social network.

Add Vertical Sharing Widget for Blogger

Go to Blogger –>> Template (Backup your template)

Edit HTML (Click on Proceed)

Search For the Below code in your HTML

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

Just below the above code, copy and paste the below code

 <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:-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('https://technoratan.in/wp-content/uploads/2014/02/gc_social_sprite.png') no-repeat !important;
 height:19px !important;
 width:45px !important;
 padding:0 !important;
}
.st_email .chicklets{
 background-position:0 -77px !important;
 background-image:url('https://technoratan.in/wp-content/uploads/2014/02/gc_social_sprite-1.png') !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://technoratan.in/wp-content/uploads/2014/02/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='https://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='https://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='theblogwidgets'/>
<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='https://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
 ui_cobrand: "TheBlogWidgets.com",
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://www.technoratan.in/blogger-tips/vertical-sharing-widget-for-blogger/' style='color:#CAC8C8;'>Social Mention</a></p>
</div>
</b:if></b:if>

Add Vertical Sharing Widget for Blogger to Website

Just copy the above code and paste it anywhere into the Body Section of your website. You will find this vertical sharing widget to increase your social mention where you paste the code. This Vertical Sharing Widget for Blogger and website is very useful to increase social traffic on your blog and your website as well.