You have seen that the trend of floating sharing count buttons on popular blogs websites. As you know the traditional icons are now replaced with auto counter buttons that are updated in seconds. I created totaly different version of this bar, applying both jQuery effects and CSS 3 styles. But this widget is so many times different because it contains custom facebook, google+, twitter, pinterest and an Email button. Vertical floating social sharing bar is one of the best blogger new widgets, because you can notice the increasing trend of social sharing widgets.This version is the upgraded version than previous versions.So in this widget you will get facebook like button,twitter tweet button, pinterest pin it button, google +1 button, addthis sharing button and print button. The installation of this widget is simple so that you can easily implement it into your blog.
The steps are extremely easy to apply to your blog/blogger. All you need is to copy and paste the codes. Follow these friendly steps:
1. First Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find for below code in your template,
<b:includable id='post' var='post'>
7. Just below it paste the following 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0V5XPOlRJoaKBz54ALDbfyn_cmcUx847V9FmJc_H2gVHpoFr8G0yH9F73tTNfOfeBV0fPzDARWx2aX7NGXOnfvz-bZfSmT3n9vhH725o8p3WQ1DaONkH44fDXWlBbdSDVGur0W0abxgP/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/AVvXsEgf0V5XPOlRJoaKBz54ALDbfyn_cmcUx847V9FmJc_H2gVHpoFr8G0yH9F73tTNfOfeBV0fPzDARWx2aX7NGXOnfvz-bZfSmT3n9vhH725o8p3WQ1DaONkH44fDXWlBbdSDVGur0W0abxgP/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/AVvXsEgcg8V3ksw3M0u7X7HpnsFwigJrFvQssi2azkbc3aGP-zA4oXm2nEYXqxRAslRg4bR7J-3LFlq0FZ3TQi5m6fMAUM-uzNSwGCBYKs9ioa5rcRm808eioXXMG3MMj7tRr0dyTPnjxQcY2enF/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});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='crackmodo'/>
<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://crackmodo.blogspot.com/2013/01/vertical-social-widget.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
8. Now replace CrackModo with your twitter username.
Now save the template and you are done.
1 comments:
check out :) floating vertical share widget here as well
http://esocialsense.blogspot.com/2013/01/floating-social-share-widget.html
Post a Comment