Skip to main content

How To Add Back To Top Button In Blogger

Hey viewers, previously I shared you How To Customize Scrollbar in Blogger on Blogger Tricks. Now the time is for new Blogger trick. In this Blogger trick I will show you how to add Back To Top button in Blogger. If your blog page is very large and contains lots' of words then it will surely help your users to scroll back to top. It will give your blog more professional look. More you help your users more people will like your blog. So, without wasting more time here let's start the tutorial about adding Back To Top button in Blogger.

How To Add Back To Top Button In Blogger
Add Back To Top Button In Blogger

Add Back To Top Button in Blogger

First and foremost backup your template. I am 100% sure this blogger trick will help you in adding back to top button in Blogger. But if by mistake you don't follow these simple steps carefully then it may be difficult for you to restore your template. And if you have backup template then you can use it anytime without any sort of risk. Since you have made a backup of your Blogger template so we can now continue to the tutorial on adding smooth scrolling back to top button for Blogger.
Follow these steps carefully to add back to top button in your blog:
  • First of all go to Blogger Home.
  • Then click on Dashboard.
  • After that you have to go to Template. Then click on 'Edit Html'.
  • Now search for "]]></b:skin>" without Quotes.
  • After you find that code. Paste the code given below just above/before "]]></b:skin>".

#hackersthiefs{
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
#hackersthiefs:active {
position:fixed; bottom:0.7px;
}
#hackersthiefs img:hover {
opacity:1;
}

  • Now the time for next step. Search for "</head>"  without Quotes.
  • Now paste the code given below just before/above "</head>.
<!-- Back To Top Button Starts -->
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#hackersthiefs').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
<!-- Back To Top Button End -->
  • After you paste the above code search for "</body>" without Quotes.
  • Time to paste the code given below. Just paste the below code just before/above "</body>".
<a href="#" id="hackersthiefs"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlP_emvuVL-19DxdDWuTopOU2OLHUYvZjA1qjHilMiZzPhRG1jTwtaVVD4WlubwJh1hEnnutCXKLHc1qpiALhJCXylfN9ev9K948hI_8vaPu0JogKETUDugTKYZ3Dchy_PSWhKl21T00/s1600/Arrow-Up2.png" alt="Back To Top" title="Back To Top" /></a>
  • Quickly preview the Template.
  • Save the Template.
  • That's It. You just created Back To Top button for your Blogger blog.
Further Customization
  1. You can use your own image in Back To Top Button. Just replace the url in red from the above code with the url of your custom image.

Are you facing any problem. Don't hesitate to comment.
Do you like this Blogger Trick. If yes then you can subscribe for our free newsletter to get latest Blogger Tricks in your inbox.

Comments

  1. Wow, superb weblog layout! How long have you ever been blogging for? you made blogging glance easy. The whole look of your website is wonderful, as well as the content material!
    website design

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Get Unlimited Ammo and Health in IGI 2

After many days I am sharing a cool and interesting trick for game lovers. Do you enjoy playing IGI2? Of course you like this game. But many of you may be facing verious difficult situations in completing this game. It's because the missions are really tough and you can't complete whole IGI 2 without using it's cheat codes. There are many hacking tricks for IGI available in the Internet but most of them don't work. And this is the reason I am sharing these cheat codes to you. After reading this post you will be able to play this game without losing any health and ammo. We'll use a lite application to achieve the immortality and infinite number of ammo in this game. You will have to download the software from the link that I will provide you a little later in this post. Let's first know what this software will do. It will allow you to keep your health unlimited in IGI game. And if the health will not decrease then you will never die in the game IGI. You wil

Remove "Restore Previous Versions" Option from Context Menu in Windows

Windows has a feature which lets you to restore the previous versions of any drive, folders, or files. Actually, it is a part of " File History " service of Windows which helps in recovering accidentally deleted files by copying them to a backup location. If you don't need this service, then you can can disable this by turning off the File History service in Services Manager. Open Run dialog box by pressing Windows and R key simultaneously. Type services.msc and press OK. It'll open Services Manager. In Services Manager, right click on the " File History Service " and choose Properties . Now, change the startup type to Disabled and then click on the Apply button. Done! After disabling this service, you'll notice that the " Restore Previous Versions " item is still available in the Context Menu. Follow the following steps if you want to get rid of the " Restore Previous Versions " from the Context Menu in your Win

Firefox Focus is Now Available on Android

There are large number of web browsers available for Android, some put efforts on minimalistic design, a bit of them offers wide variety of add-ons, few of them focuses on saving data, many are there to collect your private information but hardly any of them offers robust privacy. Firefox Focus is a web browser by Mozilla which is centered around private browsing. It is a super simple browser, which blocks any content trackers and ads. It has a powerful Stealth mode which blocks its screenshots in Recent Apps. Firefox Focus was launched on Apple App Store a year ago, and now it's available for Android with many new features. This browsers doesn't offers as many features as other browsers but it offers a robust privacy protection in it's minimalistic interface. The design is so soothing that you may want to to replace your feature rich browser with Focus even if you're not particularly concerned about ads and trackers! Unlike Firefox, it doesn't have