We use many types of widgets to make our blog stylish and attractive, which may or may not be useful for our blog, but we use it
But some Blogger/Blogpost also has a widget that makes our blog look good as well as it is also helpful for good navigation of our blog and that widget is bake to top widget for blogger.
So let's know what this bake to top widget is and how you can use it in your blogger, So let's start
Back to Top Button Widget for Blogger/Blogspot
Bake to Top is an arrow that helps in navigation of the blog as a button.
Bake to top button is a benefit of adding to the blogger that whenever a reader will come to your blog and it scrolls down your post and the length of your post is more and the reader has gone very down and if the user has to go back to the top section of the post above, then he can go up by clicking on the Back to Top button.
So let's now know how you can add to the top button widget blogger.
How to Add Back To Top Widget For Blogger/Blogspot
Step 1: First login your Blogger Account
(Now your blog dashboard will open in front of you)
Step 2: Now you Click on Layout
(When you click on Layout, the Blogger Layout window will open in front of you.)
Step 3: click on the Add Gadget of that section.
(Then you will have a blogger gadget popup show)
Step 4: Now you Click on HTML / JavaScript
Step 5: Then paste the back to top button widget code in HTML / JavaScript.
<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: 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">
<i class='fa fa-toggle-up' style='font-size:36px'/></i>
</a>
Step5: Click on Save
Also Read:Preloader For Blogger/BlogSpot
Back To Top Button With Picture
If you want to change the style of your back to the top button then you can see the code shown in Red color above. Remove and paste the code of the button shown below.
Also Read: Featured Posts Widget For Blogger
Also Read: How to Create Backlinks Step By Step
Also Read: Blogger SEO: A Complete Guide
){kind=link}
0 Comments