Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Stick Or Float Widget In Blogger

by Durodola Ridwan | Saturday, April 13, 2013 | 40 Comments

Most big blogs have sticky widget that scroll along when visitors move up and down. The effect is usually applied to navigation menu or subscription box, but what kept most people thinking is how they can add the effect to their blog widget. Does that sound like you?





This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position. The trick is applicable to any widget so far it has a unique ID, regardless of its location, be it top, bottom or sidebar.

The effect is added to the first navigation menu on the demo page.


How To Add It Blogger

  • Go to Template > Edit HTML
  • Use ctrl F to find </body> and paste the following code above it.

<script>
// Sticky Widget By RealcomBiz.com
//<![CDATA[
rb_makeSticky("WIDGET ID HERE"); // enter your widget ID here
function rb_makeSticky(elem) {
    var rb_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    rb_sticky.parentNode.insertBefore(scrollee, rb_sticky);
    var width = rb_sticky.offsetWidth;
    var iniClass = rb_sticky.className + ' rb_sticky';
    window.addEventListener('scroll', rb_sticking, false);
    function rb_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            rb_sticky.className = iniClass + ' rb_sticking';
            rb_sticky.style.width = width + "px";
        } else {
            rb_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.rb_sticking {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style> 

  •  Replace WIDGET ID HERE with your widget unique ID.

How To Get Widget ID

  • Visit any page on your blog, but make sure you have already log-in into your dashboard
  • Right click on the edit icon (wrench icon) below the widget you want to apply the trick to.

  • Select Copy Link Location and paste it into a notepad.
  • You should be having something similar to the code below

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

  • Copy the widget ID after the line &widgetId= and place it in the line specified above.

If you have any queries or suggestions, feel free to drop it in the comment.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

40 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Very Nice tutorials, will soon apply this method on My Blog.

    ReplyDelete
    Replies
    1. Nice Article, Thanx for giving me a wonderful information!!!!!!!!!!
      Free Trial
      Stock Cash Tips

      Delete
  2. wow, nice code, i am going to float my menu bar for forever on my blog Intelligent Computing.

    ReplyDelete
    Replies
    1. Haha, forever? Seems you fell so much in love with this hack? Anyway great approach!

      Delete
  3. Working .. Thanks.. looking for it since months..

    ReplyDelete
  4. Many thanks to you. You're real combo. Other tutorial script does not work, but yours is magic! :D

    ReplyDelete
    Replies
    1. real combo? WOW am butter up! Thanks for the compliment :)

      Delete
  5. This site is nice and very useful information!!
    To design web sites or making blogs here many information is there.
    When I Try to Design my blog Free Mcx Tips , Free Stock Tips I found this Site!!! Really very excellent!!!
    Thanks,
    By Mcx Tips , Stock Tips

    ReplyDelete
  6. Thank you SO MUCH - I've been searching for a not-too-complicated way to do this!!

    ReplyDelete
  7. comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.comments widget for blogger

    ReplyDelete
  8. hiii I am stock tips provider,

    Nice article. I was checking constantly this blog and I’m
    quite impressed! Very useful information. Great Post and very good articles.
    You are doing very good job, keep posting articles. I will suggest all my
    friends to go this post. Thanks

    equity tips

    ReplyDelete
    Replies
    1. You are welcome dear! Thanks for showing much interest. It will be a great pleasure if you suggest us to your friends :-)

      Delete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. thanks but can i installed on my blog TechEthix ?? reply fast I'm waiting :)

    ReplyDelete
    Replies
    1. Sure Rohit. You can apply it to any widget on your blog.

      Delete
  11. Hi, I want my menubar skicy but i can not its "ID" How cam i get it. plz help..

    ReplyDelete
  12. Brother, I have a blog" www.saqisoft.blogspot.com" with 28 links. but i cannot have huge treffic how i can get visitors. plz help me.

    ReplyDelete
  13. Thank you for posting such a useful, impressive.your blog is so beautiful. you have give me great news.
    Website Development Company Bangalore

    ReplyDelete
  14. Seriousaly I realy appreciate from your blog posting and design.I suggest to all, you should watch daily this blog. Thanks for share with us.
    free commodity tips

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. I am very much pleased with the contents you have mentioned I wanted to thank you for this great post.
    Free Trial
    Stock Cash Tips

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. Very impressive and well written blog on market guiding the investors with important information. Many of the investor will be happy to read your blog and earn huge profits in there investment.

    ReplyDelete
  20. This comment has been removed by a blog administrator.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete
  23. This comment has been removed by a blog administrator.

    ReplyDelete
  24. Awesome tutorial! But could you help me with something? How do i get rid of the gap between the widget and the top of the page? Thank you!

    ReplyDelete
  25. Check under the CSS style. Replace top:0; with a negative value like top:-10px;

    ReplyDelete
  26. Awesome i just apply it on my ads unit here
    http://badhanpbn.blogspot.com

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. I always read college essay review services free. Yes, these websites are completely free, which is awesome for sure!

    ReplyDelete
  29. Wow thanks it really help see it here http://www.secretgist.com/

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger