Sponsor Post

Best Telegram Groups List Collection - Updated

Thursday, 24 March 2016

How to Add Back To Top Button in Blogger with Pictures

Hello guys welcome to the Techtspot Blogger tutorial today I will show you how to insert add Back To Top button Link in Blogger blog with pictures.
How to Add Back To Top Button in Blogger with Pictures

When we published lots of long posts in Blogger blog then we use the scroll down button and we reach the bottom of the Blog now we need to use scroll up button for reaching blog post first paragraph, so we need the Back To Top button, by default Blogger don't have any Back To Top button, now we can use third party Back To Top button in our Blog.

These are Following Steps:-


Step 1: Go to Blogger Theme and click Edit HTML button.
Add Back To Top Button Gadget To Blogger Blog 1
Step 2: Find the opening <head> tag then Paste the Code in <head> tag and click the Save template button.
Add Back To Top Button Gadget To Blogger Blog 2
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Step 3: Go to the Blogger Layout and click Add a Gadget link.
Add Back To Top Button Gadget To Blogger Blog 3
Step 4: Click the HTML/JavaScript Gadget.
Add Back To Top Button Gadget To Blogger Blog 4
Step 5: Paste the Code in Content area then click Save button.
Add Back To Top Button Gadget To Blogger Blog 5
<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;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" / ></a>
Step 6: Go to the Blogger Blog.


Note:- Replace Orange Back To Top Button Code With These Back To Top Button Code.
https://4.bp.blogspot.com/-qs-_qMyR4Wo/WR9Gin3YXFI/AAAAAAAAI1Q/tVYMtICXJFY3QjslSAX0vKqbbMbQGx9TQCLcB/s1600/1.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png
https://1.bp.blogspot.com/-eNPwC_O74Mo/WR9GirKOGTI/AAAAAAAAI1I/GXVx5JDiW5kWCaMZSrF6F-4CmHoGxuiJACLcB/s1600/2.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png
https://2.bp.blogspot.com/-nrA_YDld9XE/WR9GimmkDSI/AAAAAAAAI1M/Uga1x4QSPsYkS_DnY9v_AXMFssqOsHJoQCLcB/s1600/3.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png
https://3.bp.blogspot.com/-wZp8-bKYFbg/WR9Gjq08AiI/AAAAAAAAI1U/yuVBG5cW5HMaazrlxsi9VzBOtR390QsfgCLcB/s1600/4.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png
https://3.bp.blogspot.com/-uRJk9vyZETg/WR9Gj-e3pgI/AAAAAAAAI1c/hqVojaSG4nE5fljDv-tgQPWGlE37WnX5wCLcB/s1600/5.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png
https://3.bp.blogspot.com/-YJSx_YP6eL8/WR9Gj0G_eRI/AAAAAAAAI1Y/Ux0Rh5Eoo3EJpUy73knW-fHShuJLSBKhgCLcB/s1600/6.%2BBack-To-Top%2BButton%2B-%2BTechtspot.png


How to Add Back To Top Button in Blogger blog



62 comments:

  1. sir thanks for the trick. i have a problem. the address of my blog is interstingcontent.blogspot.com but sir when i copy paste it in my andriod phone to open my blog something else is appearing but it is opening from my laptop. please tell the reason
    thanks in advance

    ReplyDelete
    Replies
    1. hi there when u open your blog in android phone then blog layout is different this is your question

      Delete
    2. ok first search your blog name in google.com then find your blog and click it

      Delete
  2. Nice Button I also use one button to my blog and it's 100% working
    Thanks
    Akhilesh Kumar

    ReplyDelete
  3. Thanks so Much... Working 100% in my blog, Check It Out https://collinsworldnews.blogspot.com.ng/

    ReplyDelete
  4. Working So Perfect on www.equipux.com

    ReplyDelete
  5. thank u sir this info it is amazing

    ReplyDelete
  6. thanks alot it realy helped me i appreciate

    ReplyDelete
  7. thank to sharing this post.....

    ReplyDelete
  8. I done on my blog sumanmatety.blogspot.com check it plz

    ReplyDelete
  9. nice post thanks 4 sharing this

    ReplyDelete
  10. emm why when i click to the icon, nothing happen?

    ReplyDelete
  11. this arrow are awesome bro..

    ReplyDelete
  12. ITS WORK!!!!
    Im glad if you see it on https://fazlenshamon.blogspot.com/

    ReplyDelete
  13. Thank you so much for this

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. hello sir don't worry i give u one code solution
      please give me your email id

      Delete
  15. nice one www.talkval.blogspot.com

    ReplyDelete
    Replies
    1. thanks for comment sir and i hope you enjoy this post

      Delete
  16. Hello can we add our own Logo instead of what u have given??

    ReplyDelete
    Replies
    1. hello sir
      yes u can add your own logo .....

      Delete
  17. thanks you very much...
    check it out my blog http://yonbee.blogspot.com

    ReplyDelete
  18. Thanks its working out for me with absolutely no complications

    ReplyDelete
  19. Thanks , it works very good ^^

    ReplyDelete
  20. am not getting it have triedb it but it not going

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. Thanxs for sharing! I´m using it on my blog.
    kalokutora.blogspot.com.br

    ReplyDelete
  23. how to create using URL and #

    ReplyDelete
  24. THANK YOU SIR, IT WORKED AT FIRST ATTEMPT, just don't believe it

    ReplyDelete
  25. thanks you, sir. it worked...

    ReplyDelete
  26. Hi, thanks for the button ... I use this button on My Blog

    ReplyDelete