It seems like you can do just about anything and everything with your blog these days. Some require a lot more time and patience than others. I'm going to share with you an easy way to install those awesome buttons that appear on the side of your blog where users can push it and it sends them right to the top again in a flash.
This is one of my biggest blogging pet peeves. Is when a blog does not have a "scroll to top" button of some sort on it. In fact, it's a pet peeve of mine with any website. I remember a long time ago, Google used to have one and I loved it. Now they don't and it drives me crazy.
It makes it as a reader just so much easier and saves time to be able to hit that button to go back to the top of someone's blog. And now I'm going to give you a very simple way how to install one.
Please note that this process is only for Blogger hosted blogs.
First step is to go to www.blogger.com and sign into your account. Click on Template and then Edit HTML
Click on the HTML and then hit CTRL+F to open up the search feature. In the search bar, type in <head> and hit enter. You will see the <head> highlighted in yellow. Right under that paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
Please note that you may already have this code in your template. If you do, you are not required to add it again. If you don't, simply add it and then hit the Save Template button above in orange.
After you have saved that, go back to your Layout tab and click on Add Gadget. Then select the HTML/JavaScript option.
A window will appear and inside that text space, copy and paste the following code.
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://i1289.photobucket.com/albums/b505/xrebeccahope/BackToTopButton_bigarrow_zpsvfubvn11.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://i1289.photobucket.com/albums/b505/xrebeccahope/BackToTopButton_bigarrow_zpsvfubvn11.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
Hit Save and you are finished.
You should see a nice little "Back To Top" button appear on your blog.
You are welcome to use the code I have above with the link in green as being the actual image for the button that is defaulted.
If you don't like that one, you can use your own image or replace it with one of these I created. Just replace the code above that's in green text with the image URL.
http://i1289.photobucket.com/albums/b505/xrebeccahope/BackToTopButton_triangle_zpsuxebodkt.png
http://i1289.photobucket.com/albums/b505/xrebeccahope/BackToTopButton_arrow_zps3laaicdq.png
http://i1289.photobucket.com/albums/b505/xrebeccahope/BackToTopButton_words_zpsrsgyesy1.png
Test out your code now and it should work. Scroll down your blog just a bit and the new button will appear in the lower right hand corner. When you click on it, it should bring you back to the top of the page.
