Thursday 21 March 2013
Wordpress Style Floating Social Sharing Bar Widget For Blogger
A few days ago when I browsing into
the internet I found this floating shearing horizontal bar widget for blogger
and now I am shearing on internet blogs and with my friends. This is one of the
best floating shearing widgets to promote your article on social media like
facebook, twitter, Google plus etc…..
This beautiful social media shearing
widgets created by makingdifferent we gave credit for this social widgets to
Nitin Maheta.
How can you add this social shearing widgets in blogger?
- Log in to your blogger account.
- Click on blog title in which you want to add This Social Sharing Bar
- Go to Template and then click on "Edit HTML" Check Expand Widget Box..
Add JQuery Plugin!
If you already have a latest JQuery
plugin, then ignore this step and directly follow the second step. If not add
JQueryt hen add the below code just above </head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
- Now Find <data:post.body/> (Find using ctrl + F)
- If you find <data:post.body/> more then three time so go with the second.
- Immediately below it, add the following code
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>
- Now find </body> (Find using ctrl + F)
- Add the below code before </body> tag.
- Click on Save
<b:if cond='data:blog.pageType == "item"'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>
- Now save your template and you have done!!
- If you have some problem please write a comment.
Shakeel Asghar 
Posted By: Shakeel Asghar
Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Subscribe to:
Post Comments (Atom)
I'm 
5 Responses to “Wordpress Style Floating Social Sharing Bar Widget For Blogger”
12 April 2013 at 11:16
If you already have a latest JQuery plugin, get free instagram followers then ignore this step and directly follow the second step. If not add JQueryt hen add the below code just above /head tag.
19 December 2014 at 14:27
Your blog is like a search engine optimization magazine. All templates are cool and attractive. God bless
wordpress ecommerce themes
25 January 2016 at 15:34
Social Share top Bar AddOn – WordPress is available to download: pluginsweb.com/2016/01/05/download-social-share-top-bar-addon-wordpress/
17 April 2020 at 11:26
This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you. See who you know at Celebrity net worth, leverage your professional network.
21 October 2020 at 07:16
Internet Business Income From Home
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.
Regards,
Shakeel Asghar