Jinsi ya kuweka Back to top Button kwenye Blogspot

January 16, 2020

Back to top button humsaidia msomaji anapofika mwisho wa post asipate usumbufu wa kurudi kwenye home page kwahiyo kwa kutumia Back to top button msomaji ataweza kurudi kwenye home page kwa urahisi bila ya kuperuzi.

Namna ya kuweka back to top button kwenye blog yako ya blogspot

 1. Ingia kwenye blog yako ya blogspot. Bonyeza Theme kisha Edit HTML


2. Bonyeza Ctrl + F na kwenye box la search andika <Head>. Kisha paste hizi code chini ya neno Head kama vile inavyoonekana kwenye picha chini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>


Bonyeza Save theme. Kisha bonyeza Layout, Add a Gadget, chagua HTML/JavaScript na bonyeza alama ya +


3. Paste hizi code kwenye content

<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/AVvXsEgteC8F7GFzu_E3DQP_eYsakkdj9YWLz6mXSoPnuYeZMqj-kG4bnUYOW7egsjP5Aetw1ileZgVhtsdAj9BxXgl6bQQrAd0dCKM8XDlbg6f-_qOmxjQeNsyO5bO2WQEJu-zBE8BWXv5UkBjZ/s1600/back+to+top+.png" alt="Back to Top" / ></a>

Bonyeza Save kisha save arrangement


Ukitaka kubadilisha rangi ya Back to top button delete hii code

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteC8F7GFzu_E3DQP_eYsakkdj9YWLz6mXSoPnuYeZMqj-kG4bnUYOW7egsjP5Aetw1ileZgVhtsdAj9BxXgl6bQQrAd0dCKM8XDlbg6f-_qOmxjQeNsyO5bO2WQEJu-zBE8BWXv5UkBjZ/s1600/back+to+top+.png

 Kisha Paste hizi code kubadilisha rangi ya back to top button

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Ox1Tlid7fzD4VWpcd8lrU2Mm212moEHVVOSf4tIbXJW6OVpisvZcpcDwMoLpBCodW5-5r8XjYA9bAPCd2w_4MTuu1QIemV1-CNep63o_QpQwVChvX7cUlK6NX0iAAgwtk_VZSvQf4pQ/s1600/6.+Back-To-Top+Button+-+Techtspot.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4Zh0pT5QgvB8k7vStRJ09LQSjnmfdX6gg1zDLy9c0gT9id7aKdVlnOVskLuXwpU7URP8-bMAohyXYXKDJN2nRREFjIvul233vP5lCijtZUNbXjbTVinWrc0yDwtGGhpnMU2Oj0y2g6I/s1600/2.+Back-To-Top+Button+-+Techtspot.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM75vswnXDrAQl5ynI1gA0YEQVo0jcrQk701F6Xi8miNZouhiG7rhroEG1uTRUEeZhUsglbaIFrU6aF-iXzghSlynPNmEHJmbU8S1nSe_XdGsIMtr8yHuhuO5kaQbznairDhTHNkz-iyc/s1600/4.+Back-To-Top+Button+-+Techtspot.pn


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLSmG-LXGvl19CthJI0A2i-p9RwxJO76DWvk8Vn8qZIBY-rgJt-DpBR07rW7soS_AFgQ5XkEtSMY01da0NqwTJ8vJjxYA7eR3B4d8J6vTah22S_1-mMlCBt8O11HUJZctsdQvCIc8eOa4/s1600/5.+Back-To-Top+Button+-+Techtspot.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJS9DdRBqrjh0uGPJGCPBP1k5ksNhIPgSxpL_cda1JlpOcn1azf_wozCx1BUSa3LZq1RhPao-jzgs_GBg4E7tqc4UjwOQq6yuvsOp67h8z023S9SPRT6QBi35pK775rG8eQSdpxyjgeik/s1600/3.+Back-To-Top+Button+-+Techtspot.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggRAVXSBGpMRrT5zGUNpJ6-V4gJby_8xXDBDw-4hmaplqmCt8jqq4xsyA_X4ySEpUze9mZUwQlxlL71b4PROxqVuvFRNwbFvK64K_6psuoTkDJZa0qh-vumpY3KfS6XC6_4vyRfN4agfE/s1600/1.+Back-To-Top+Button+-+Techtspot.png

Post a Comment