Add a Scroll to Top button to Blogger Blog
Friends , as always I am giving out code for one of the best & must be added featured widget for your blogger blog . This will add you a smooth and good looking professional Back to Top Button to your blogger blog easily .
By this , visitors of your blog can feel free to scroll back to top at any time . Its always good to make your blog user friendly so that can attract more visitors and even make them to stay with Us or following our blog .
For live demo for this widget , you can check the same blog you are in .
Okay , let me go into the story .
By this , visitors of your blog can feel free to scroll back to top at any time . Its always good to make your blog user friendly so that can attract more visitors and even make them to stay with Us or following our blog .
For live demo for this widget , you can check the same blog you are in .
Okay , let me go into the story .
Steps for adding Back to Top Button to Bloger Blog
Step 1: Open your Blogger dashboard
Step 2: Open "layout" and click on "Add a Gadget"
Step 3: Click on " Add HTML/ Java Script "
Step 4 : Just copy and past the below given code into the " Content " Box there
Step 4 : Just copy and past the below given code into the " Content " Box there
<!-- Back to Top Scroll Button widget by www.myblogstory.com -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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: 9em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 14px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>
<a href="#" class="back-to-top">Back to Top</a><!-- Back to Top Scroll Button widget by www.myblogstory.com -->
Step 5 : Save it and you are done.
Hope this would be helpful to you and please comment if you got any problem while adding to your blog.
Thankq one and all for visiting our blog . Keep visiting :)
Get Free Blogging updates in your Email
0 comments:
Post a Comment