How To Make A Blogger Widget FadeIn/FadeOut on Scroll

Fade In Blogger Widget, Fade Out Blogger Widget, Fade In Fade Out Script, Fade in Fade out On Scroll

After installing the new social share bar (WordPress Like Social Share Bar Version 2) we have received a mail from my reader. He ask us to share the technique by which we make our social share bar widget Fade In and Fade Out On scroll Up and Down. Therefore we are today with this tutorial. Have you seen it? If not then you can see below demo screenshot.

You might have seen it on many blogs, when ever you scroll down any content on that blogs, they have a widget/gadget on their blogs that fades away, and when you scroll back to top it Fades out. Yes that’s what the effect we are talking about here today in this article. Well we have a simple jQuery script that will help you to achieve this effect on any widget/gadget on your blogger blog. So lets start the tutorial and learn how to make a widget fade in and fade out on scrolling.

Also Read:

  1. Blogger Contact Form Gone Viral! Never Seen Before.
  2. Cute & Stylish Popup Email Subscribe Box For Blogger.
  3. Three Stylish Styles to Make Youtube Embedded Videos Responsive.
  4. BlackReen Blogger Theme – A Responsive Blogger Template 

Make Fade In Fade Out Any Blogger Widget on Scroll Up/Down

This task is very easy. everyone can do this without facing any problem. So, head over to the below tutorial.

  1. Go To Blogger >> Template >> Edit HTML.
  2. Using CTR+F search for </body> tag and paste below tiny jQuery script code just above of </body> tag.
  3. <script>
    $(&quot;#WidgetID&quot;).hide();
    $(window).scroll(function() {
        if ($(window).scrollTop() &gt; 100) {
            $(&quot;#WidgetID&quot;).fadeIn(&quot;slow&quot;);
        }
        else {
            $(&quot;#WidgetID&quot;).fadeOut(&quot;slow&quot;);
        }
      });</script>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>

  4. If you are already using jQuery script, then remove the code in Yellow above and keep other code intact. 
  5. Now Change the #WidgetID with your Widget/Gadget ID.
  6. In case you are using a widget which has a ID like <div id=’MenuBar’> then you have to replace #WidgetID with #MenuBar and if your widget/gadget has a ID like <div class=’MenuBar’> then you have to replace #WidgetID with .MenuBar. Hope you understand.
  7. Now, Click on save template.
  8. That’s it. Congrats! You have successfully made Fades effect in your Blogger Blog widget.

Conclusion:

So above guide is about “How To Make A Blogger Widget Fade In or Fade Out on Scroll?” We hope you enjoyed the above tutorial. In case you are facing any problem to using this script, you can ask us via using below comment box. Do Share.
Thank You! Stay Blessed!

    Paramjot Singh
     

    Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

    Click Here to Leave a Comment Below 0 comments

    Leave a Reply:

    0 Shares
    +1
    Pin
    Tweet
    Stumble
    Share
    Share