Saturday, April 2, 2011

Smooth Scrolling Widget For Blogger

0 comments 4/02/2011
Sign up to receive our site updates!
So many blogs contains lengthy pages,the readers fell difficult to navigate in page.In so many blogs or sites you may find this jQuery  Scroll to top Widget,If u your looking for that,Then go add this jQuery Smooth Scrolling Widget  to give more look and fell for your blog.Check these other jQuery Widgets

»jQuery Floating Message Box Widget

»jQuery Multi Tabber Widget

Just see Demo of Scrolling to Top and jQuery features





»First Download the Template

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.
#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Step 2:Find </head>.

Cope and paste the below just before  </head> this.
/*----------Start TechTasks Scrolling Widget Script--------------*/
<script language='javascript' type='text/javascript'>
$(document).ready(function(){

    // hide
    $(&quot;#go-to-top&quot;).hide();
  
    // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

</script>

Step 3:Find </boby>.
Now copy and paste below code just above </boby>.
<a href='#' id='go-to-top'><img alt='Back to Top' src='https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZgn5J8U_yI/AAAAAAAAFcc/VE_uPCU4igQ/Up1Blue.png'/></a>

Now See The jQuery Smooth Scrolling in Your Blog

»Finally save the Template and see the preview

Happy Blogging
Your Ad Here

0 comments:

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    New Comments

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri