Last Updated:
Another widget for blogger which as I am also using it in my own blogs then its come in mind why not I should Sharing this beautiful widget with all my visitors. I have to show you demo of this widget to somewhere another website because when you can see it in you will love this widget very much because it is very attractive and must have widget for blogspost.Before I have shared some very useful widgets for blogs such as New Mashable Social Bookmarking Widget Having Pinterest Sharing and Following Button as well as Author Box Below every Blogger Post. But this time what I am going to share it is Social Media Sharing Widget floating on the Top of the blog when you scroll down the page it will appear on the top as I have attached below a live image of this Widget. Hope you all will like my this post.RecommendationsCheck Plagiarism Duplicate Contents - New !!Make Online Animated Videos with Built-in Voice Support - New !!How to Add Horizontal Social Bookmarking WidgetNow I have to guide you about the installation of this beautiful widget.Follow given steps:-Go to Blogger Dashboard >> Template Tab >> Edit HTML >> Expand Widget by Click on Format Template.Before any amendment or editing in template, you must backup your template.If you don’t have installed JQuery Plugin on your blog then follow this step otherwise leave thisstep as you have already JQuery installed.Copy this script and past it before </head> tagNext step is to find this code<data:post.body/>Maybe you find this code more than 1 time so you have to try it at all. Now paste the following code below the <data:post.body/> Now we have to add widget means the last step for the installation of this widget.Copy below code and paste before the </body> tag.You have all done now see your template, and check any post on your blog.Hope you all will like this beautiful widget and also don't forget to like and follow our page for stay connected new tips and tricks from us.

Floating Horizontal Social Bookmarking Widget

M Ehsan Qureshi

Another widget for blogger which as I am also using it in my own blogs then its come in mind why not I should Sharing this beautiful widget with all my visitors. I have to show you demo of this widget to somewhere another website because when you can see it in you will love this widget very much because it is very attractive and must have widget for blogspost.

Before I have shared some very useful widgets for blogs such as New Mashable Social Bookmarking Widget Having Pinterest Sharing and Following Button as well as Author Box Below every Blogger Post. But this time what I am going to share it is Social Media Sharing Widget floating on the Top of the blog when you scroll down the page it will appear on the top as I have attached below a live image of this Widget. Hope you all will like my this post.

floating social bookmarking widget for blogger blog

Recommendations

How to Add Horizontal Social Bookmarking Widget

Horizontal Social Bookmarking Widget
Now I have to guide you about the installation of this beautiful widget.
Follow given steps:-
Go to Blogger Dashboard >> Template Tab >> Edit HTML >> Expand Widget by Click on Format Template.
Before any amendment or editing in template, you must backup your template.
If you don’t have installed JQuery Plugin on your blog then follow this step otherwise leave this
step as you have already JQuery installed.
Copy this script and past it before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
view raw jquery.html hosted with ❤ by GitHub

Next step is to find this code

<data:post.body/>

Maybe you find this code more than 1 time so you have to try it at all. Now paste the following code below the <data:post.body/> 

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>
view raw floating-social-media-sharing-widget-blogger.html hosted with ❤ by GitHub

Now we have to add widget means the last step for the installation of this widget.

Copy below code and paste before the </body> tag.

<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>
view raw floating-social-widget-blogger-blog.html hosted with ❤ by GitHub
You have all done now see your template, and check any post on your blog.
Hope you all will like this beautiful widget and also don't forget to like and follow our page for stay connected new tips and tricks from us.

Comments

Featured

Advertisement

Follow us

Tags

Advertisement

This website uses cookies.. Read More

Cookie Policy