How to add Automatic Back to Top scroll Widget on Blogger Blogs

How to add Automatic Back to Top scroll Widget on Blogger Blogs

So many wordpress blogs with lengthy contents and pages have this Back to Top widget installed for easy navigation. Back to Top widget is a button found at the end or below a wordpress blog and this widget enables a blog reader to easily navigate to the top of the blog from bottom quickly without the need to scroll from the side bar. This back to top widget comes in various shape, design, color and sizes. And it looks like this.
back to top for blog
One good thing is that, you can also add this Back to Top function on your blogger blog which i am going to teach you now.

Today, almost every website has this Back to Top function to enhance easy navigation which improves search engine optimization. Google strongly recommends all sites to have an easy navigation to enable its readers to easily find what they are looking for and i see no reason why you as a blogger shouldn't.

Recommended post slide out widget for blogger is also one good navigation widget you can check it out.

If you see at the bottom right of this blog, you must have seen the Back To Top widget i am talking about. This widget is nice because it will not obstruct your readers view but keep everything organized.

So How to install this Back to To Widget on your Blogger Blog:

From the dashboard of your blogger, click on Layouts > Click Add Gadget and a window pops up. Then search and click on HTML/JavaScript And copy these " Back to Top " code below into a notepad.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Modified by www.cyracksinternetbiz.com

* This notice MUST stay intact for legal use

* Visit Project Page at http://www.dynamicdrive.com for full source code

***********************************************/

var scrolltotop={

    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

    controlHTML: '<img src="http://3.bp.blogspot.com/-VgWq1PoqsuQ/TwAYb-VKIvI/AAAAAAAAArg/Ygb5BeqzB0U/s1600/back-to-top-button.gif" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner

    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){

        if (!this.cssfixedsupport) //if control is positioned using JavaScript

            this.$control.css({opacity:0}) //hide control immediately after clicking it

        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)

        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists

            dest=jQuery('#'+dest).offset().top

        else

            dest=0

        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

    },


    keepfixed:function(){

        var $window=jQuery(window)

        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx

        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety

        this.$control.css({left:controlx+'px', top:controly+'px'})

    },


    togglecontrol:function(){

        var scrolltop=jQuery(window).scrollTop()

        if (!this.cssfixedsupport)

            this.keepfixed()

        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false

        if (this.state.shouldvisible && !this.state.isvisible){

            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])

            this.state.isvisible=true

        }

        else if (this.state.shouldvisible==false && this.state.isvisible){

            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

            this.state.isvisible=false

        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>


Ok now Paste this code you copied inside the HTML/JavaScript window and hit Save. That's all.
Note: Before you save the code, you will have to edit the URL in red and replace it with the URL of the image of your choice. The image URL i use was the one i got from Bloggiks.com and it looks like this.
But you are free to use it though. I believe this widget works for you otherwise drop a comment below and lets solve the problem.

Read Also:
How to create contact me form for blogger using Google Drive
Simple ways to boost your site alexa ranking
How to make your blog go viral on StumbleUpon

I hope this info helps? feel free to share this post with your friends using the like/share buttons. you can also subscribe to my blog below for more tips delivered to your inbox. or simply ask any question by using the comment box below. Subscribe and never miss any future post through this link CLICK HERE TO SUBSCRIBE Once entered, you will have to check your inbox for a confirmation email containing a confirmation link. Once you VERIFY your email by clicking on the confirmation link in the message, you will never miss any future articles again. Thank you



share this article to: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Cyracks Zenda, Published at 5:01 AM and have 0 comments

No comments:

Post a Comment

We love comments. Please do not leave without giving us one. We will appreciate it. Spammers Beware! Spam comments will be removed immediately. Thank you