HOW TO ADD STICKY SCROLL ANY WIDGET CODE TO BLOGGER?
Sign into your blogger account
From Blogger Dashboard select ‘Template’ link tab
Click on ‘Edit HTML’ and proceed
Now, Search for tag
</body>
After finding tag copy the below code and paste above to it
<script>
// Sticky widget by www.blogtariff.com
// Tutorial at http://www.blogtariff.com/2013/07/add-sticky-scroll-any-widget-to.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
ko_makeSticky("WIDGET ID"); // enter your widget ID here
function ko_makeSticky(elem) {
var ko_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
ko_sticky.parentNode.insertBefore(scrollee, ko_sticky);
var width = ko_sticky.offsetWidth;
var iniClass = ko_sticky.className + ' ko_sticky';
window.addEventListener('scroll', ko_sticking, false);
function ko_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
ko_sticky.className = iniClass + ' ko_sticking';
ko_sticky.style.width = width + "px";
} else {
ko_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.ko_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>
CODE CUSTOMIZATION:
Replace Widget ID with your any type of Widget ID (eg. HTML1 or HTML2 etc.)
Finally ‘Save Template’ and Preview your experiment
That’s done
0 comments:
Post a Comment