Here’s another hack we learned along the way when creating
our beautiful blog. The button that we are about to create looks similar to the one you see floating to the Right
of this screen when you scroll your mouse. Modifications could be made along the way as we will cover below.
of this screen when you scroll your mouse. Modifications could be made along the way as we will cover below.
Step 1. Head over to
your blogger Layout, Add Gadget, select HTML/Javascript.
Copy and paste the code below in the text section while
leaving the title box empty. Some templates may not allow you to move forward
unless you place a title.
If this is the case you will need to place this piece of
code: <000> in the Title box as shown below.
Title
Know lets place the rest of code below in the content box:
<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip7-tiEfmEsawMNr8po2VidgXVMem5pcSeJl2jYmEiz-dwo-SOzZ1uJrhPbxgMC_3vWsIdtNC_XS4ykNgXBfpTWJd-mvJwX3EROWdyzoqDwCRonjwAYSjOXEC3kEW3eZxy5lc09wyiCPV1/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip7-tiEfmEsawMNr8po2VidgXVMem5pcSeJl2jYmEiz-dwo-SOzZ1uJrhPbxgMC_3vWsIdtNC_XS4ykNgXBfpTWJd-mvJwX3EROWdyzoqDwCRonjwAYSjOXEC3kEW3eZxy5lc09wyiCPV1/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
Note: the areas highlighted in purple. This simply is a line that tells you the coder what this code is about. The yellow highlights state the values that could be changed if you which. For example: size of the button and color. The URL of the image button can also be changed if you have another you will like best.
Make sure you hit preview to make sure there were no mistakes along the way. If the template previews successfully, save template and YOU ARE DONE...
Hint: If template does not preview successfully hit BACK button so changes will not be saved. Go back to your Theme or Template and hit Edit HTML button. Click anywhere in the template box and hit Cntrl + F and in the search bar type <head> . Just below this head tag place the code below without the lines please.
--------------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
--------------------------------------------------------------------------------------------------
SAVE and go back to Step 1 above in order to add the HTML/Javascript code again in the Add a Gadget side bar.
Once you save your changes, your back to top button should look like this.
Note: The button will only appear once you begin to scroll down your pages.
Please leave us a comment if this was of any help to you. Also feel free to share with other fellow bloggers to help them get their blog looking like beautiful spaces made perfect
. HAPPY BLOGGING!Return to Blog Archives..
No comments:
Post a Comment