You might have seen this on many wordpress blogs and now on blogger too, that whenever you scroll any person’s site their sidebar widgets start to scroll with you, hence you can easily see what all content they have in their sidebar. Maybe that's an AdSense ad or many some popular posts from that site.
Whatever the content is, the point is how you can make any of your blogger widget to stick to screen and scroll while person’s scroll’s through your post to bottom. Well that's what we are going to discover in this awesome tutorial.
- How to Migrate your .blogspot Domain into Custom Domain
- Add YouTube Style Progress Loading Bar in Blogger
- How to Add Adsense Ad in the Middle of Blogger Post
Well if you wanna check out the demo then you can check my sidebar, you should be seeing an ad or related posts being scrolling with you automatically when you come down. That’s the effect you are going to achieve by installing this script in your blog.
Making Sticky Blogger Widgets with this Script
So now lets get started and see what all you need to make this happen, well let me tell this involves nothing much just a small CSS code and another small Script.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F and search for]]></b:skin>or</style>tag (if you have removed default CSS from your template) and paste below code above this tag..makesticking{padding-top:20px;position:fixed!important;top:0;z-index:99}
- Now your CSS is placed, its time for the script, once again search for
</body>tag and paste below code above it.<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
<script type='text/javascript'>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("HTML6")</script> - You can remove that RED Code if you already use the JQuery code in your blog.
- Now the only thing which is left is to change the ID of the widget given in blue in above code.
- Finding your widget ID is not difficult, simply navigate to Blogger > Layout and click Edit on any widget that you would like to stick on scrolling.
Now at the end of the URL address you will see the widget ID. Check the image on the right.
- That’s your widget ID after those = sign, just add that widget ID above instead of that blue code.
- Now everything is done, its time to save your template and get the ball rolling. Now refresh your site to see this awesome effect.
Some tips on getting the best scrolling effect ?
What ever you wanna scroll, just make sure to add it to the last widget in your sidebar, like at the bottom. As if you will add the above widget it will go over all the widget’s and it will look bad. So add the contents to your last widget and add its ID above.
So guys this ends another awesome post about making your blogger widgets sticky easily using a simple script. I hope you enjoyed this tutorial, do show some love by liking and sharing this post.