How To Make Widget Following Scroll Or Sticky Widget on Blog Sidebar

How To Make Widget Following Scroll Or Sticky Widget on Blog Sidebar - On this occasion I will discuss the article on How To Make Widget Following Scroll Or Sticky Widget on Blog Sidebar. In this case it can be called by the name Sticky's palace. What is sticky? Sticky is a reminder you can see everywhere. Sticky can stick in places visited. Therefore the widget that we will make this time can stick everywhere when we read the article and this widget will follow the scroll when we slide down or up.

Is it still confused? I explain again, sticky widget can be seen on my blog that is widget Label which is located at left side of my blog, roughly like that its function. When you scroll or scroll down then my label widget will follow as well.

Why use sticky widget? I think this is very effective if you have an article blog, because in terms of you have a long article content then the more articles on the bottom read at the bottom of the widget will always be filled by sticky widget so it does not look empty. You can also use sticky widgets for eg Recent Post. Google Adsense ads or other ads, Labels like my blog, etc.

How to Create a Sticky Widget in Blog Sidebar

1. Login to Blogger >> Open Template Editor >> Add the code below just before the code </body>.

<script>
//<![CDATA[
HG_makeSticky("WIDGET_ID"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>

Note.!!
In the code that I have marked in red, please replace it with the widget ID you want to make sticky.

2. Next add the width to the content or widget that made sticky with CSS. Suppose here I give 300px for sticky width, for example:

#Widget ID{width:100%;max-width:300px}

or

#HTML1{width:100%;max-width:300px}

3. Specify the width according to the width of the sidebar of the template you are using and also do not forget to replace the width on the specified media query, for example :

@media only screen and (max-width:768px){
#WidgetID{width:100%;max-width:100%}
}

4. Then Save. And see the results.

So many articles that I made this time about How To Make Widget Following Scroll Or Sticky Widget on Blog Sidebar, If there is still not understand can be in question in column comment. Thanks and good luck.

Share :