How To Make Any Blogger Widgets Sticky
Posted by Unknown on 11:47 with No comments
How To Make Any Blogger Widgets Sticky

How To Install :
- Go to Blogger Dashboard → Template → Edit HTML .
- Find bellow code
</body>
- Now Paste Bellow Script above </body>.
<script>
//<![CDATA[
bs_makeSticky("Your_Widget_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !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:relative\9 !important;}
</style>
- Now get the Widget ID or element which you want to make sticky.
- Replace "Your_Widget_ID" with your widget ID.
Ex: Your widget Id is HTML99, then the code would be:
bt_makeSticky("HTML99");
How To Get Widget ID :
- Go to Blogger Dashboard → Layout .
- Click on Edit (any widget you want to make it sticky) (see bellow screenshot ).
- See Last in URL you get your widget id. (see bellow screenshot )
- Now Save Your Template.
Categories: Blogger Widget
0 comments:
Post a Comment