Facebook Slide Out Share Button for Blogger

 It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs. This widget has many features such as -

• Lightweight Size
• Compact Design
• Supports all Major Browsers
• Attractive and Elegant Made with CSS3 and beautiful transitions.
• Shown only on Post pages 

Method 1 : Adding Manually 

Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript Widget.

<b:if cond='data:blog.pageType == "item"'> <style> /* Widget By 24-Tips.BlogSpot.Com */ #fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;} #fixed-share:hover {right: 0} #fixed-share:hover > #share-box {right: 147px} #share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;} </style> <div id="fixed-share"> <div id="share-box"> <img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" /> </div> <span>Support Us<br/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:share-button expr:href='data:post.url' type='button_count'/> </fb:share-button> </span></div> <!-- Widget By 24-Tips.BlogSpot.Com --> </b:if>

After Adding, Save The Widget And Template.

You are done now. Now you and your visitors can see this awesome Facebook Share button on your blogger blog.