Subscribe for FREE Updates.

Thursday, 21 March 2013

Widgets

Wordpress Style Floating Social Sharing Bar Widget For Blogger

Social Sharing Bar
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 == &quot;item&quot;'>
<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&amp;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 ADMIN
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.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

3 Responses to “Wordpress Style Floating Social Sharing Bar Widget For Blogger”

Muhammad Amir said...
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.


Stevensen Liu said...
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


Marion said...
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/


Confused? Feel free to ask

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

Are you Awesome? Legend has it that Awesome people can and will share this post!
Wordpress Style Floating Social Sharing Bar Widget For Blogger