One of the great social sharing widgets. You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds. It is created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job. It is 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 to bring you traffic by circulating your content to a wider audience.
It has been tested on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.
Add this fast loading floating bar sharing buttons
The steps are east to apply. All you need is to copy and paste the long chunk of code. Follow these friendly steps:
- Go to Blogger > Template
- Backup your template
- Click Edit HTML
- Click Proceed
- Then Click Expand Widget Templates
- Search for
<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"'>
<a href="https://blogs911.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="https://blogs911.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="https://blogs911.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<div class='tb911_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.optionsundefined{onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<!-- www.blogs911.com No more works properly so removing it from tb911 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='tipsandtricks8'/>
<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='https://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "The Blogger 911",
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='https://blogs911.com/' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>Just replace tipsandtricks8 (code line 97)with your twitter username.
8. Save your template and you are all done!This floating bar would display on post pages only and wont display on homepage. The widget has a white background and floats to the left of blog posts.
Finally a floating bar that actually works and looks good. Thanks!
Nice stuff indeed! You have provided very good information in details.
Thanks!
¡Wonderful Floating Bar! Thank you for your details.