Here this tutorial is for those who want to make their blog look stylish by adding a sidebar float/slide widget. This widget scrolls with the screen and floats and remain fixed in the side. You can add anything to the widget area as this widget will be eye-catching So you can put facebook like box or you can put any ads banner anything. But remember never try to add Adsense ads as your account will be terminated.
This tutorial is very simple to make your blog sidebar float, you just need to add a simple script in your blog template and enjoy the stick widget. So Follow the steps below to get the floating sticky sidebar.
Steps to make a sticky floating widget in blogger
- OK firstly make a widget by going to Blogger Dashboard –> Layout.
- Click on add gadget and choose HTML/Javascript and add anything you like in the box. Like your facebook like box or email subscription form etc. And save it.
- Now once saved you will see that gadget in the layout dashboard. Now click on the edit on that widget you created just now. And see its address go to the last of address you will find something like HTML4 or HTML12 or any number with HTML. Just copy it as you will need it afterword.
Also read: Automatically add banner or Adsense in blogger post
Now click on template go to Edit Html and in the Html page click anywhere in the Html code and press ctrl+f or search for jquery.min.js. If you find it then ignore the below code else if you don’t get it just copy the below line and paste it below <head>. If you find another version of this jquery that’s OK it will do fine.
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′ type=’text/javascript’/>
Now search for </body>. Now Copy below code and paste it just above </body> tag. And here replace the #HTML3 with your HTML no.
<script type=”text/javascript”>
$(function() {
var offset = $(“#HTML3”).offset();
var topPadding = 35;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(“#HTML3”).stop().animate({
marginTop: $(window).scrollTop() – offset.top + topPadding
});
} else {
$(“#HTML3”).stop().animate({
marginTop: 0
});
};
});
});
</script>
Now click on save the template and you are done!
Remember to change the #HTML3 with your #HTML ID no.
Also read: Write SEO optimized post on blogger using Yoast Plugin
If you have any problem ask in the comments section. Thank you for reading this post