Install sticky function and make your blogger widgets and navbar (Header) sticky - Before starting the tutorial I want to let you know about this widget. The actual function of this widget is that "The sticky widget is useful for my friends who wanted a widget on their blog in order to float follows when the page rolled down and will return to its original position when page rolled up". I think the above short description is enough for you to know about this function, now I'm going to move to the main topic. Today with the help of this article I'm going to show you how you can easily make your widgets and navbar sticky without any problems.
Before adding this function into your blog make sure to take a look of this function by clicking on the below demo links
Now if you like this sticky function and want to setup into your own blog, then follow the below simple steps.
How To Install Stick Function Into Blogger?
First go to your blogger dashboard - Login
Now go to "Template" section and then click on "Edit html" button to setup this function.
After that, find the below code by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
Now copy the below CSS code and paste it just before ]]></b:skin>.
.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML9 .widget-content {padding:0;margin:auto;}
And then replace the highlighted widget ID with your own widget ID.
Now once again find the below code with the help of search box.
</body>
After that, copy the below JavaScript code and paste it just before </body>.
<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML9");
//]]>
</script>
Now once again replace the highlighted widget ID with your own widget ID.
And then click on the orange save template button to apply the changes.
If you are facing any kinds of problem while installing this function, then feel free to ask me via the comment section.
That's it! I hope you like this trick to make your blog widgets sticky! Stay tuned for more cool tricks! Thanks for reading @Prince.
0 Comment to "How To Make Your Blog Widgets And Navbar Sticky"
Post a Comment