Back To Top And Go To Bottom Professional Jquery Widget For Blogger

Back To Top And Go To Bottom Professional Jquery Widget For Blogger in 2013

Back To Top And Go To Down jquery buttons can be used to navigate readers/visitors to top and bottom of the blog page content.In older most of them using a widget back to top widget which is only useful to go to top of the page.But in with this widget you can navigate to top and bottom with smooth scrolling effect of jquery.This is a professional widget in all respect.This widget will be very useful especially in the main/Home page of your website,there are lot's of articles/posts or when an post is very rich content and comments and you want to go to the bottom of the page without using mouse scrolling then this will be very useful.These button have fade out and fade in effect.This means that when scrolling they will fade slightly and it's much fun for all of us.

Live Demo

You can see the live demo of this widget in our blog which is situated on the right side

Check This:

• Add Professional CSS Blue Drop Down Menu For Blogger
• Protect Your Content With A Copyright Warning Message When Someone Copies
• Pro Tricks To Boost Your Alexa Rank
• Top Reasons Why People Blogging In 2013

Installation Of This Widget In Blogger

Step 1: Go to template section in blogger and select edit html button

Step 2: Search (using CTRL + F) for the following piece of code in you template

]]></b:skin>

 Step 3: Just above this code, paste the code shown in below

/*-------------------www.protrickshub.in Widget Code Starts  ---------------*/
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xJjQKtUcnShT8InWwaKlYUo-Mf6pRNkwChRApetaRreKBm3r8ZgBvAWrGfsGeaxrQ_BQsKNFpgqqreXlzvqgB9AAEfljG-1mjbY5g1CaSaiweN9lTNrSadYAcgcuzpTNpRcgAXtMiAc/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdw3GaIDTAP-V-LkFEcVz0tNwJRCc-0bRVtM-mn68dgCzUz7B54c8xbpeXi7rebudP4Zfg9myhXyn_J6g3jDT12_4bUKR0bH6f1dU-_9OMTIkKC5P08N-bfw1KPYmA9LRNPuFQfCs_Rdk/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
/*-------------------www.protrickshub.in Widget Code Ends  ---------------*/

Check This:

• Make Money With Qadabra,A Best Adsense Alternative
• 11 Killer SEO Tips To Boost Your Website Page-Rank
• Approve Your Google Adsense Account  In Professional Way
• 31 Killer Tips To Make Your Blog More Popular In 2013

Note:- 

* Codes marked in green color are some infoz that explains what styles you can modify.
* You can change the image of arrows by changing the URLs marked in blue.
*  If you want to change the background color of the buttons,change the white text with your color.
      
Step 4: After That search (using CTRL + F) for this code

</body>

Step 5: Just above it, paste the below code

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

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note:-

*In case,if you want to remove the "Back To Top",Just remove the 1st code with bolded  and to remove the "Go To Bottom" button,just remove the second code with bolded


Step 6: Save your template and view your blog and Enjoy.....

Final Words From A Pro Blogger

If you like my tutorial of Back To Top And Go To Bottom button widget,You can show your thanks/regards by liking our Facebook page or subscribing to our email alerts to keep in touch with us.Stay Close For more PRO Tricks.......