Hello guys welcome to the Techtspot Blogger tutorial today I will show you how to add insert Back To Top button Link in Blogger blog with pictures. When we published lots of long posts in Blogger then we use the scroll down button and we reach the bottom of the Blog again we use scroll up button for reaching Blogger blog header area, So here we need the Back To Top button or Link.
These are Following Steps:-
Step 1: Go to Blogger Theme and click Edit HTML button.
Step 2: Find the opening <head> tag then Paste the Code in <head> tag and click the Save template button.
<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.
Step 4: Click the HTML/JavaScript Gadget.
Step 5: Paste the Code in Content area then click Save button.
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8EUiZpf1BF4CdEz_55LJS-JxmC19QrU-cHt1Tc9l-uMFZ5LxhjT4MiJ-6hEotG1s3zngqvgIpP_4jfso4DMqEzB4BDzcEx1JyhCzvH_KFndAarSBS_uWzhaUBiN5RMUstHH54wUmp1r8a/s1600/back+to+top+.png" alt="Back to Top" / ></a>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8EUiZpf1BF4CdEz_55LJS-JxmC19QrU-cHt1Tc9l-uMFZ5LxhjT4MiJ-6hEotG1s3zngqvgIpP_4jfso4DMqEzB4BDzcEx1JyhCzvH_KFndAarSBS_uWzhaUBiN5RMUstHH54wUmp1r8a/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 TheseBack To Top Button Code.
How To Add Back To Top Button In Blogger
I hope you enjoy this Post. If any problem comment it.
Note:- Replace Orange Back To Top Button Code With TheseBack To Top Button Code.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnKs1CoAZ0j7xHQIkNc1G6MO-2Ww5t6Yj_wud_zOw_f1gFy03eH5zSqPDQ6rYv1DmPjktiC4MKP1RzQGyYmkmAQxarxAq_JqMNvq0OKbuBh10iS0uxY6toaq88z2xZKRxu_lef9wQSCI/s1600/1.+Back-To-Top+Button+-+Techtspot.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfx_1nS5iaFXEe2BLDg0KieialMq5Hq_maTcq1YN-ITcgcsdTVXyGDajHqCzTcivvDbWYvgFUp-mcaU50vXEvfoUFeYmxQIkSAzdQp4-bg0Rp4j_dF_qke9-7Cn_YBtOTZR9yKBB9Sr3A/s1600/2.+Back-To-Top+Button+-+Techtspot.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9R7M27YCTP3xCQYCFoxdKUvk7ThVFqxmHyB9C0a4wVJrW_g35ktglR67My2bTwk5tZTmSo5UlTQn8Pwp6D-3hLuOILZSsnyYSlLIz3rfdRut9dJYdEWk3jQmgkddG_A56EcYt7FO6pg/s1600/3.+Back-To-Top+Button+-+Techtspot.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh62tEburKywh4wcFqrrnku7mT0QBnbbwWuQ06POfPx7gbUTLPuHtdlVGJZNy8emHpZk29Cu-i5z-KJPkub3caHRaGJIDDgeNKf6MtvML2fHrIKUMncR4KPdMFeVpM7T77HPnl0JhudoTA/s1600/4.+Back-To-Top+Button+-+Techtspot.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gGub7DcMaxKlrPwjC1UMuMh8u4YJy2EsOkKEIUk4bTHmcKnewk1metL1vQknFxWj94PBPMvYY8gVBuL9amsOMJHcH2I_aGDjZKLjCFaRkq0ySBH1IO1yUSfLwLyfjJ9J9zsMFFa0NoM/s1600/5.+Back-To-Top+Button+-+Techtspot.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSzHSO4_JctVQjhARAiilipDWXhRQPl1L8dfCMUyJZxkX-Qyh3XN-b6Rw4eRDNGIHjtCmEWXAFuDnBmLCjp8AuhiovwGAei38qhEBNwpxMyNgC-t_xBGVIcjSh_U5QMZr_tSNMgnP4CU/s1600/6.+Back-To-Top+Button+-+Techtspot.png
How To Add Back To Top Button In Blogger
I hope you enjoy this Post. If any problem comment it.
0 Comments