Scroll Top or Back to Top button Widget to bloger blogspot  | My Blog Story My Blog Story

Tuesday, 11 March 2014

Scroll Top or Back to Top button Widget to bloger blogspot 

Leave a Comment

Add a Scroll to Top button to Blogger Blog 

Scroll Top Widget to bloger blogspot 

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 .


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  


<!-- 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



About Author

  • He known as Keerthish Kodali, is the founder and the brain behind MyBlogStory.com. He provides high quality tutorials about latest web design and technology trends. He loves music and is very friendly natured . He loves to see world with No borders and always wishes to love and be loved by you all ~~~ Read More

    0 comments:

    Post a Comment


    Back to Top