Back To Top Widget For Blogger/BlogSpot (Fast & Stylish) - Do Tech Blog

Back To Top Widget For Blogger/BlogSpot (Fast & Stylish)

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


back-to-top-button-widget-for-blogger

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


blogger-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)


add-gadget


Step 4: Now you Click on HTML / JavaScript


blogger-gadget



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.



<img src="https://1.bp.blogspot.com/-lcBQS1ttTU8/X3NnWuGH7iI/AAAAAAAABLk/6xJs0qXT4XckOVox5TyGyZr63DEAVayRQCLcBGAsYHQ/s35/b1.PNG" alt="Button" width="25px" height="25px" />




<img src="https://1.bp.blogspot.com/-N9AO1jDK0YY/X3NnWs_VC_I/AAAAAAAABLc/LA5pL3OX6KIJlOufVQjsXJbKi0BGD62CwCLcBGAsYHQ/s36/picture-2.PNG" alt="Button" width="25px" height="25px" />



<img src="https://1.bp.blogspot.com/-iOWR1ytQjLY/X3NnWmvqhxI/AAAAAAAABLg/D947XkDdvtYbJIQPwes8-SOGAteTlxxHwCLcBGAsYHQ/s37/picture-3.PNG" alt="Button" width="25px" height="25px" />



<img src="https://1.bp.blogspot.com/-pISdwAnLoKs/X3NnYWjojbI/AAAAAAAABLo/-cFhAH-rkCQ3rA8oJnzH7LpNf1ngzb-SwCLcBGAsYHQ/s37/picture-4.PNG" alt="Button" width="25px" height="25px" />



<img src="https://1.bp.blogspot.com/-XoOb91mfyGs/X3NnYSbIqxI/AAAAAAAABLs/eMmWUOBoe8s1nn2rEKZM4kIpA7fM2GpCQCLcBGAsYHQ/s50/picture-5.png" alt="Button" width="25px" height="25px" />




<img src="https://1.bp.blogspot.com/-3J2Sa_EX97Q/X3NnZKWmkFI/AAAAAAAABLw/3nhIaasyn7Uwk3jlBToCOWEpceJvHkCpQCLcBGAsYHQ/s51/picture-6.png" alt="Button" width="25px" height="25px" />




<img src="
https://1.bp.blogspot.com/-UqwqaSfP60o/X3NnZjVyUII/AAAAAAAABL0/g0sBpvGMenwEsbuIpKr-GnRYl_yyrSbSwCLcBGAsYHQ/s36/pictures-1.PNG" alt="Button" width="25px" height="25px" />


If you want to change the size of the button, you can change its height and width change.

No comments :

Post a Comment

;