How to make a floating sticky sidebar widget in blogger

How to make a floating sticky sidebar widget in blogger

SHARE:

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.

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.

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

COMMENTS

BLOGGER

Related Articles

Name

Android,42,Apps,1,Blogger,24,Blogging,27,Business,19,Computer,71,Development,4,Games,5,Guest,330,Health,13,iOS,9,Marketing,11,Online Tools,1,Programming,25,SEO,67,Social,263,Software,3,Startup,13,Technology,20,Website,13,Wordpress,17,
ltr
item
MindxMaster: How to make a floating sticky sidebar widget in blogger
How to make a floating sticky sidebar widget in blogger
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.
MindxMaster
https://www.mindxmaster.com/2016/02/how-to-make-floating-sticky-sidebar.html
https://www.mindxmaster.com/
https://www.mindxmaster.com/
https://www.mindxmaster.com/2016/02/how-to-make-floating-sticky-sidebar.html
true
5332415103371288268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy