Floating Horizontal Social Bookmarking Widget Blogger 2020

Floating Horizontal Social Bookmarking Widget Blogger 2020. Widget for Blogger my blogs comes mind why not share this beautiful widget with all my visitors.

Social Bookmarking Widget

Floating Horizontal Social Bookmarking Widget Blogger 2020. Another widget for Blogger that I also use in my blogs then comes to mind why not share this beautiful widget with all my visitors. I want to show you the demo of this widget somewhere else on the website because you will love this widget when you can see it because it is very attractive and you must have a widget for blog post. 

Read more : Social Media Sharing Button Widget in Blogger 2020

Before I share some useful widgets for blogs like the new machable social bookmarking widget with pinterest sharing and following buttons as well as the author box at the bottom of each blogger post. But this time the one I'm going to share is the social media sharing widget that floats to the top of the blog when you scroll down the page when I attach it directly below the image of the widget. Hope you all like this post.

How to add horizontal social bookmarking widget
Horizontal social bookmarking widget
Now I need to guide you on how to install this beautiful widget.
Follow the steps given below: -

Click on Format Template and go to Blogger Dashboard >> Template tab >> Edit HTML >> Widget.
Before you can edit or modify the template, you need to back up your template.
If you have not installed JQuery Plugin on your blog then follow this step otherwise leave it

Step up as soon as you have installed JQuery.
Copy this script and send it back to the past before the <<<< tag <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

  Next step is to find this code

<data:post.body/>

You may receive this code more than once so you may have to try it out. Now paste the following code under <data: post.body />

<b:if cond='data:blog.pageType == "item"'> <div id='md-active-share-comment-marker'> </div> </b:if>

Now the last step we need to install this widget is to add the widget.
Copy the code below and paste it before the </body> tag.

<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 that you've all seen your template, check out any post on your blog.
Hope you all like this beautiful widget and don't forget to like and follow our page of new hints and tricks connected with us.