This widget has many features such as -
You can add this slide out share button to your blogger blog with the click of a button. To add this widget just click the below button and choose the blog in which you want to add this widget.
- Lightweight Size
- Compact Design
- Supports all Major Browsers
- Attractive and Elegant
- Made with CSS3 and beautiful transitions.
- Shown only on Post pages
Method 1 : One Click Installation
You can add this slide out share button to your blogger blog with the click of a button. To add this widget just click the below button and choose the blog in which you want to add this widget.
Save the layout and you are done. The slide out share button will be on your blog and would be shown on all the post pages.
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.
CODE:
<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget */
#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-->
</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.
Method 2 : 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.
CODE:
<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget */
#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-->
</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.
