Latest Updates » [1] Auto XML Sitemap [2] Create Contact Page [3] Blogger and Wordpress Templates! Download Now !


Thursday, 20 June 2013

TRICK:Back to top scrolling image button for blogger



Back to top scrolling image button for blogger
You have seen 'back to top' scrolling image at right side on many blogs. Back to top link used to scroll page up quickly without using mouse or arrow keys.There are may tricks for scrolling back to top image button but as a human being we like simple and easy methods. In this trick I just writing a very simple  blogger widget for scrolling back to top image button for
blogspot blogs.In this era of increasingly sophisticated you know visitors likes a blog use a easy navigation because we will use the simple javascript with fade out  and smooth scrolling effect and looks cool. You can change the image button with image you have.

Let start how to create scrolling back to top image button on right side of blog.


Step 1. Go to Blogger templates edit  HTML section...


Step 2. Search for </head> and paste following javascript before it.

<script type='text/javascript'>
$(document).ready(function(){
 // hide #back-to-top first
 $(&quot;#back-to-top&quot;).hide();
 // fade in #back-to-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() &gt; 100) {
    $(&#39;#back-to-top&#39;).fadeIn();
   } else {
    $(&#39;#back-to-top&#39;).fadeOut();
   }
  });
  // scroll body to 0px on click
  $(&#39;#back-to-top a&#39;).click(function () {
   $(&#39;body,html&#39;).animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });
});
</script>

Step 3. Search </body> in your template and paste following code before it.

<div id='back-to-top'>
<a rel="nofollow" style="float: right; padding-right:26px; z-index: 999999;bottom:10px;right:5px; position: fixed;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXTGKmgJ7JhUZA8vCmay0XeHpzCTdRWOeEDUDcQ7w2aCWDjOuFzpzJ_09i47rHFvP2OROZndhftAnRs00kuhEiLZvHHxtLa5skGh5zX1prZxX0RwDhUIf8K6sybw0_khoDAkSVk8SFi88/s1600/protop.png" /></a></div>


Step 4. Save your template. You can change image highlighted in red above. Example of image button is below for your ref.
If you liked the trick pl consider sharing it with friends. You can use photoshop to create buttons..


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

Advertise Here

0 comments:

Post a Comment


ABOUT THE AUTHOR

Hi! I am K Ajay, currently live in Chandigarh, India. A young Web Designer, Pro Blogger, Graphic Designer & an addicted Web Developer. I love working on Blogger and WordPress using CSS Tricks,and Web Designing. Read More...

FOLLOW US HERE


RANDOM POSTS

Bwidgets4all-Helping Bloggers with Blogging Tricks © 2013. All Rights Reserved | Free Blogger Templates | | Back to Top