Another version of social sharing widgets that also looks classic in its design. Perhaps you have seen the trend of floating sharing count buttons on popular blogs and most of them are traditional. But in this version, we created it differently because it contains custom twitter,facebook, pinterest, google plus and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential in bringing more traffic by circulating your content to a wider audience. this widget has been tested on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.
Adding Floating Sharing Buttons To Blogger
Step 1. Go to Blogger >> Template >>Backup your template
Step 2. Click Edit HTML >>Click Proceed
Step 3. Then Click Expand Widget Templates
Step 4. Search for
<b:includable id='post' var='post'>
Step 4. Just below the code above, paste the following code:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.btt_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;
}
.btt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.btt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.btt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.btt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.btt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpYSSetzJdo8XD89JA5rJffhMacHwPAOUQRZS4RfWPoboDLdfnQU673tsImw_2wXUzL4LT6VsJQkBq-UQXu9ubWU-nfX4oNk3DpBHBGC1T9RVvO3tgqObqpMw7mUof-L3YY4D4SmKFj8xh/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/AVvXsEhpYSSetzJdo8XD89JA5rJffhMacHwPAOUQRZS4RfWPoboDLdfnQU673tsImw_2wXUzL4LT6VsJQkBq-UQXu9ubWU-nfX4oNk3DpBHBGC1T9RVvO3tgqObqpMw7mUof-L3YY4D4SmKFj8xh/s400/gc_social_sprite.gif') !important;
}
.btt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.btt_social_floating .stButton_gradient{
border:none !important;
}
.btt_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;
}
.btt_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;
}
.btt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.btt_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.btt_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.btt_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.btt_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgITp8kAORVdAzDEsXjdgf3A4kXnNAtu7n8nvgnH42qJevguf6sAWTIbGRzaO5YVfpHA0lE26gxuyC66pb01QARKz6eoTevVyD-RrOr89q-cibq7TfH7KkiR2yC0o1nGauNxoe8jB3riMqV/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>
<div class='bbt_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 bbt 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='Blogtipsandtrix'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "BLOGGINGTIPSANDTRIX",
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.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
ShortCustomization;
1. Just replace Blogtipsandtrix with your twitter username.2. Replace the following colored lines with your preferences: position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px;
background-color:#f7f7f7
{ Horizontal alignment - Change the value in red of margin-left -60. Negative value pushes the button to the left of the main blog column and positive value pushes it to the right. You may increase or decrease the value based on your needs.
Vertical alignment - To change the height of sharing buttons, change the value in blue color . The code positions the button relative to the bottom of your browser window}.
Step 5. Save your template and you are all done and enjoy your day pal!
Optional step:
If in case the facebook like button did not work then add this Javascript SDK code just below <body>
<div id="fb-root"></div>Credits goes to My Bloggertricks
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV