How To Add Back To Top Button In Blogger With Pictures
How to Add Back To Top Button in Blogger with Pictures
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="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.pngHow to Add Back To Top Button in Blogger blog
SOURCE : https://techtspot.blogspot.com/2016/03/add-back-to-top-button-gadget-in-blogger.html#gsc.tab=0
Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :
https://belogsjm.blogspot.com/2020/09/how-to-add-back-to-top-button-in.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+blogspot%2FbXzFd+%28%23JMBELOG%29