Breaking News:

latest

How to Create A Floating or Sticky Blogger Widget

Hello and Welcome to GetWebInfo. Here on this post you will learn about that how can you create a Floating or Sticky Blogger Widget. As far ...

Hello and Welcome to GetWebInfo. Here on this post you will learn about that how can you create a Floating or Sticky Blogger Widget. As far as blogging is concern, the widgets that floats or stick on a blog or websites have high click through and conversion rate than static objects/ widgets. That is why many websites out there make use of floating elements through their websites.



How to Create A Floating or Sticky Blogger Widget

Step 01: First of All visit your Blogger Dashboard> Template> Edit HTML.. and search this code
</body> 

Step 02: Now past the below code just above/before it.

<script>
// Sticky widget by TechBlogNG.Com
// Tutorial at //techblogng.com/how-to-floatstick-blogger-widgets/
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky(“HTMLID“); // 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>

 How to Customize It?

Just Change HTMLID Highlighted in the code with your widget ID and save your blogger theme.

What is Blogger Widget ID

Blogger widget is looks like that given in the picture below:


At the End Visit your Blog and See the Magic but encase you have any issue or problem about the this topic then please comment here on this post i will answer you as well as i can do.

No comments