How to add back to top or scroll to top button in blogger - The WonderSpot - Business Guide, blogging, Make money online, Tips & tricks
Breaking News:
Loading...

How to add back to top or scroll to top button in blogger


How to add back to top / scroll to top button into your blogger blog

Today we discuss, How to add beautiful and simple back to top or scroll to top button into your blogger blog. 

If your blog homepage has a lot of posts or if you have long posts and the share buttons are placed below the post titles that will be more important. Sometimes after reading your long post by your readers, they may be interesting to share your articles via their social media profiles. If your social media buttons placed in the below of your post titles, then readers have to scroll your page back to the top of your post by manually.  But if you have a back to the top button or scroll to the top button you and your readers can go back to the top of your post or homepage by one click within one second without scroll up the page manually.



What is back to top or scroll to top button?
Simply that is a button at the bottom of your homepage or post pages. By clicking on that button readers can easily go back to the top of your homepage or post page within a second without clicking or scrolling up manually. Because of that button After reading your long post to the end by your readers, they can easily go back to the top of your post by one click. If your blog hasn’t a better navigation or your share buttons is located at the below the post titles or you are interested to add and text different widgets to your blog or if you are looking to add some professional look for your blogger blog, you can try to add that back to top or scroll to top button into your blogger blog. Not only that back to top button if you like also you can add a widget like News ticker bar for your blog homepage.it will make attractive for your blog.

You can add back to top/scroll to top button or customized button image as you prefer. Then let see how to add it into your blogger blog.

How to add back to top / scroll to top button to blogger blog

Step 01: Sign in to your blogger blog
Step 02: Go to dashboard >> Template >> click on Edit HTML button.
Step 03: Find (click Ctrl + F buttons) ]]></b:skin> and add below code before or above ]]></b:skin>



.backtotop {
 display:none;
 position: fixed;
 bottom: 2em;
 right: 0px;
 text-decoration: none;
 color: #ffffff !important;
 background-color: #000000;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-weight: bold;
 font-size: 11px;
 padding: 1em;
 }
.backtotop:hover {
 background-color: #f6f6f;
 text-decoration:none;
 color:#ffffff;
 }

*Customize – you can replace highlighted color as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> (or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click save button in layout.)



<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>
<a href="data:blog.url" class="back-to-top">Back to Top</a>

Customize – if above code not work try to replace 'data:blog.url' with your blogger blog URL
Step 05: Save template

How to add back to top / scroll to top image button to blogger blog

Step 01: Sign in to your blogger blog
Step 02: Go to dashboard >> Template >> click on Edit HTML button.
Step 03: Find (click Ctrl + F buttons)  ]]></b:skin> and add below code before or above ]]></b:skin>



.backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */
font-size: 12px; /* changes size of text */
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */
letter-spacing: 1.0px; /* space between letters */
}

.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
padding: 10px; /* add space around the text */
}

*Customize – you can replace highlighted color and codes as you prefer. 

Step 04: Now find </body> tag and Cope below code and Paste it before or above </body> ( or Save above code >> go to Layout >> add a gadget >> copy paste blow code >> save and place it as you prefer (in Footer) >> Click  save button in layout.)


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href="data:blog.url" class="backtotop"><img src="DIRECT IMAGE URL HERE" alt="Back To Top"></a>


Customize –  Replace DIRECT IMAGE URL HERE with your customized button image url
*if above code not work try to replace 'data:blog.url' with your blogger blog URL

Step 05: Save template

If you haven’t customized Button, then choice one of below image button sample.



Ok. Now your blogger blog has a beautiful back to top or scroll to top button. It will help navigate your blog and give some professional look for your blogger blog.

Happy blogging.



For more reading THEWONDERSPOT
 
Thank you for reading - How to add beautiful and simple back to top or scroll to top button into your blogger blog
Good Luck.

Post a Comment

1 Comments

Thank you for visit www.thewonderspot.com.