Monday, 22 April 2013

How to add smooth scrolling Back to Top Button for Blogger

This is one of cool trick for blogger to create a smooth scroll to top. If you have lot of content on you blog pages, and if you want to make your blog to be easy to navigate for your readers, a back to top button will make it easy and perfect.



We also use this cool gadget and if you want to check how it works, Go to bottom of our blog and click arrow button which is in right corner of the bottom.


7 Steps To Go

 

Warning

  • Back Up Your Template Before Doing This

 

Step 1 

  • Log on your blogger account and Go to, Your blog's 'Dashboard' >> 'Template' >> 'Customise' >> 'Advanced' >> 'Add CSS'.

 

Step 2

  • Copy and Paste below code in the 'Add custom CSS' Box.

#backtotop {
padding:5px; 
position:fixed; 
bottom: 5px; 
right: 5px; 
cursor:pointer;
} 

Step 3

  • Now Go to, Your blog's 'Dashboard' >> 'Template' >> 'Edit html'.

 

Step 4

  • Now find the </body> tag by using "Ctrl + F" and copy and paste below code before the </body> tag. 
<a href="#" id="backtotop"><img src="Image Url" alt="back to top" /></a>

Step 5

  • Now select your free back to top button in the below list and copy and paste it’s Image URL in to the place of "Image Url" of above code.

List of back to top button



1. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxUVT5N4H8G1L6KYqu6SVDQ5Gh-PTSDdbqYsLRazgoVesxZqYmOK5ZGWyZMO9V8d_N9jsIFihuGl9vLj7_nGdiuVa9fFPeDyw2jmwvyeiudnu8rf5CV2ceXm49YWbAJ8-75LAham-9rdr/s1600/back+to+top.png




2. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_zOSiUR4LpAmq-d2xJBXr7JV2mmjQfVxOjm-aVYDfhD2HM5C1MhneOH1pGdazJzv9D11DP0YcUs2qt0d4KSZ2pN44-tDFy71YWE_WxejI158haktZRGnIWtVJVWjrU6CBO0Fb59A-prl/s1600/back+to+top+button.png





3. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-b7dTGfiJCl5z8FeMei2xmxEmdujQTtcYgxf-3Wk3HlCNwHYvOqt7Ps9RqTPm0LPNSqzkieRzoTEcqRG_HzXZuwXH0CifYQAEtlCmdN8D6Jy1-vqviyqjsg8bPt_E7x8pBTJ-d1sOQR5/s1600/Back_to_top_image.png




4. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSR6rGvsHi5Gkh6FDG17FJ2BsZyKr7LyujgehYLszwnFxn9RBgu9u7ZlbfWGZ5hU1gt2UyUJsFsCnOSxKf0GDo9nQFy_GxvSbgrYlMPaDgAh4oXxsC3Lm0aknP141V0FUUoKljPmuPks9g/s1600/back_to_top.png



5. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavEPcd1ewKmV_A4tjX8L7ZLpsNGBZZoviZ7TRnFkzZOZvJEW07vldrs_eIE5t0FfE0gi_P0bGcJ2AsrGUIDRVu2vH_ADQEQM8jtxxyxCDm4k4mtjoTWScLvIP2UPeIOg596Sk_QxcO5X6/s1600/back+to+top+icon.png




6. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiav9pID-dn1TPap0-wJKbLUupPfDcoe-fovYsQhY-lbYPpPR_M3fiqEM9_L-778o5zLtBRhrxai7rmtLQlE22MmzcLE5_gSVuGGZLXige7G1sH7mVltGuQx1ZMKm8JFf5okrbtgRIsMpHt/s1600/back_to_top_button.png




7. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-KVtkDjnd4cu_YsqXVHzPFd5mY5G8_PxoBIbP-RG5kyQTAM84D8pZUI-nUvsfOlBhVSuPgNHgc25Gveac3Boky36Z12S4gCZmqLy3MB_DcaCFKaqIIbYGEmppFWHQtCzfNtXQLsB_d8h/s1600/back+to+top.png



8. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_GI5uxhgmIG_PRDEj-TSXy65bGhQHzS_ALHmKtf9zjlpxB6PFfRLt_Tlfdt3teP9gUqo616QGCFpvklkbMvc4ShDQSEH6ERi-1LZY538aeqC6DgbIqJYx-yDUFCMXvu5Wps4TbfT3ylg/s1600/new+back+to+top+button.png

 

Note

  • You can also add your own Image Url .
  • After Replacing the Image URL, it should look similar to this:
<a href="#" id="backtotop"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxUVT5N4H8G1L6KYqu6SVDQ5Gh-PTSDdbqYsLRazgoVesxZqYmOK5ZGWyZMO9V8d_N9jsIFihuGl9vLj7_nGdiuVa9fFPeDyw2jmwvyeiudnu8rf5CV2ceXm49YWbAJ8-75LAham-9rdr/s1600/back+to+top.png " alt="back to top" /></a>

 

Step 6

  • Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag.
<!-- start back to top -->
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- end back to top -->

Step 7

  • Finally “Save Template".
Labels: , , , ,
back to top