Techumber
Home Blog Work

How To Add Back To Top Widget To Blogger Blog

Published on December 16, 2012

Adding Back to top widget will bring a very good look to your blog. This is the second customization I did with my blog. Previously i used jquery’s BackToTop plug-in But little disadvantage with that is we need to write CSS code for ourselves. So I think this is time to create our own BackToTop plug-in. So, Last two days I worked on it, finally I got it.

Demo

Today I will explain how to add this to your blogger blog also I will give you the actual code so you can use it as you like but please give the credit to by putting techumber.com signature.

You may contribute to this plug-in made it more beautiful.

This blog it self using this so you can see the live demo here also at bottom right.

The main advantage of this is you just need to add two lines of code other than that you don’t need to do anything. Come to cusmization i give only 2. 1)Image URL 2)Fade Speed Ofcource i will work on it further and try to add more customization options. How to add to Blogger step by step 1)Go to you blogger accounts Dashbord. 2)Layout>Add a Gadget 3)Select HTML/Javascript Gadget 4)Copy the below code and past it in that widget and don’t give any name”.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  var opt;
</script>
<script type="text/javascript" src="//labs.techumber.com/LABS/js/BackToTop/backtotop.js"></script>

In above code you can remove jquery CDN if your blog already has it. Customization

var opt = {
  fadeSpeed: 200,
  url: 'Your-Image-URL',
};

Just add your image url and change the fadeSpeed value as you like. Adding code with out using Blogger Widget Insted of using blogger HTML/JavaScritp widget you can directly add the code to the blogger template. Add the code just above the Plug-in Code

/*--------------------------------------------------------------------------------------------
| @desc: BackToTop.js
| @varsion: 1.1v
| @author: Aravind Buddha
| @url: //www.techumber.com
| @date: 16 dec 2012
| @email: aravind@techumber.com
| @license: Free! to Share,copy, distribute and transmit ,
| but i'll be glad if my name listed in the credits'
---------------------------------------------------------------------------------------------*/
(function($) {
  var BackToTop = function(opt) {
    var el;
    opt = $.extend(
      {
        min: 1,
        fadeSpeed: 200,
        ieOffset: 50,
        autoShow: true,
        text: '.',
        timeEffect: 300,
        url: '//labs.techumber.com/LABS/js/BackToTop/gray-arrows.png',
      },
      opt,
    );

    this.init = function() {
      $('body').append(
        '<a id="BackToTop" href="#body" style="display: inline;"><span>.</span></a>',
      );
      el = $('#BackToTop');
      el.css({
        display: 'none',
        height: '50px',
        width: '50px',
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        background: '#444 url(' + opt.url + ') no-repeat right center',
        'text-indent': '-800px',
        overflow: 'hidden',
        opacity: '0.8',
        'z-index': '999999',
        'border-radius': '2px',
      });

      el.hover(
        function() {
          $(this).css({ background: '#000 url(' + opt.url + ') no-repeat right center' });
        },
        function() {
          $(this).css({ background: '#444 url(' + opt.url + ') no-repeat right center' });
        },
      );

      $(window).scroll(function() {
        //IE hack
        if (!jQuery.support.hrefNormalized) {
          el.css({
            position: 'absolute',
            top: $(window).scrollTop() + $(window).height() - opt.ieOffset,
          });
        }
        if ($(window).scrollTop() >= opt.min) {
          el.fadeIn(opt.fadeSpeed);
        } else {
          el.fadeOut(opt.fadeSpeed);
        }
      });

      el.click(function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 500);
      });
    };
  }; //end of class
  var btt;
  if (opt) {
    btt = new BackToTop(opt);
  } else {
    btt = new BackToTop();
  }
  btt.init();
})(jQuery);

Here is the code use it as you like. But please update me if you have any useful change. Thank you. Hope you like it!