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.
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§ionId=sidebar.Now after getting the ID got to template>Edit HTML and find
</head>.And paste the following code just above it.<script>Replace the WIDGET-ID with the widget ID you had obtained from before steps.
$(document).ready(function(){
$("#WIDGET-ID").sticky({topSpacing:0});
});
</script>
Post A Comment:
0 comments: