JQuery Plugin: Social Subscription Sliding Bar

Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over. The Sliding Plugin is originally Created by Márta Dániel, we have just customized version of it. The plugin officially created as an social sharing bar but we are using as a social subscription widget, we are very thankful to developer for making it under MIT license and allow us to share this on our blog.

 

Follow the Steps below for achieving sliding bar cool effect.

 

Live Demo

 

How to implement this jQuery accordion style menu:

 

Include jQuery, Ui and sliding Pluing script:

Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

 

Here are the steps:

 

1. Go to your blogger template
2. Before editing back up your template.
3. The look for the following data tag in your HTML.

</head>

 

and Paste the following code immediately before (above) it:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/JavaScript/slidingplugin.js"</script>

<link href="https://dl.dropboxusercontent.com/u/223738947/Demos/SlidingShare/style.css" rel="stylesheet" type="text/css" />

 

 

Note:- Please change the social links with your own social links by editing slidingplugin.js before processed next step…download slidingpluing.js in your hard drive and after making changes upload it on any free hosting server like Dropbox or Yourjavascript. For more detail please watch video tutorial below. ( how to edit your social links ).

 

Now last and final step calling social share bar div in you body section. just paste the below before closing your body tag.

 

<div id="socialside">
</div>

 

That's it. we have successfully done! If you are facing any trouble regarding this tutorial please feel free drop a comment below and also don’t forget to share this and share your valuable review with us.

 

 

after editing your links go to file click on save as and save your with .js extension for example slidingplugin.js and upload on any free hosting website.