So as a new little thing that I have promised myself, I want to start posting more DIY for your blogs and just more post in general. As you guys can tell, I have COMPLETELY redesigned my blog for the millionth time, but this time I think this one is going to stay for a very long time. Anyways, lets get started on our Blog Tip!
If you scroll down on my blog, you will tell that I have a little "Back To Top" Button on the bottom right hand corner and I think it is so handy! I love it. So I wanted to share it with you guys!
FIRST STEP:
Log into your Blogger, go to Template > Edit HTML and find the code <head>. Once you found it, copy the paste I have provided right BELOW that:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
SECOND STEP:
Then go to your Layout section > Add a Gadget > HTML/JAVASCRIPT and paste the code below into that section:
<!--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/AVvXsEiB3lTVRdXPz-R45XCsZKm_WI54ER4EACag-4sNTY15YmOSBR1CiI0aC4Fn7aMJSDOqX5FrhuLN18sBySXJxLp7iJdlCTXkUKkHtNwk6qWgDkgRrySYI4ev61s-X6wavqAo7HRdknaG/s1600/GENERAL+BACK.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
And that is it! You can change the one that is already as default or place your own. Just simply create on, Upload it to a post on Blogger, Turn the "Compose" at the top left hand corner to HTML and copy the image where its starts "http:example" and replace it in the code! Make sure to ONLY replace that. Changing anything else can ruin the code!
Hope that you all found this helpful and that is works!
AU REVOUIR for now!!
No comments
Post a Comment