Blogger Ever

Create any widget sticky using Jquery plugin in Blogger

Create any widget sticky using Jquery plugin
This is the first Jquery plugin tutorial I am given.Though,Jquery is one the major markup language we do use in our scripts and more important is to use its plugin as a tool.Therefore,I am going to introduce a Jquery plugin that will help you to make any Blogger widget Sticky,its easy and quick.Lets check it out!


Before proceeding check its Demo


As you seen that the box was stuck when we scroll down the page.Actually,we are using Jquery Sticky plugin which is made by Anthony Garand.

To use it you need to install Jquery first in your template if it is not installed by add the below snippet just after <head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Now add the Sticky plugin by add the below snippet just after  <head>.
<script src="http://stickyjs.com/jquery.sticky.js"></script>
Moving one to the final step,every widget contain a unique ID.To find that ID visit your blog and copy the link of the widget by right clicking on the tool icon on the right bottom side of the widget.As shown below.
Create any widget sticky using Jquery plugin

Now if I consider this widget then the widgetID of this widget is hidden in the link as shown below
http://www.blogger.com/rearrange?blogID=6700340609909638752&widgetType=HTML&widgetId=HTML6&action=editWidget&sectionId=sidebar.
Now after getting the ID got to template>Edit HTML and find </head>.And paste the following code just above it.
<script>
$(document).ready(function(){
$("#WIDGET-ID").sticky({topSpacing:0});
});
</script>
Replace the WIDGET-ID  with the widget ID you had obtained from before steps.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.