How to set Back to top Button on Blogspot
 |
| Ajiranet Blogspot |
How to set Back to top Button on Blogspot.
Back to top button helps the reader when he reaches the end of the post not to have trouble returning to the home page, so by using the Back to top button the reader will be able to return to the home page easily without browsing.
Also can ready;
- Make Money with Propeller Ads.
- The Best 10 Ways To Make Money Online $10 Daily
- How to Create a Blog for Free
- How to Join Google Adsense in AjiraNet 202
The way to put a back to top button on your blog spot blog;
1. Log in to your blogspot blog. Click Theme then Edit HTML
2. Press Ctrl + F and in the search box type <Head>. Then paste this code under the word Head as shown in the image below
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Click Save theme. Then click Layout, Add a Gadget, select HTML/JavaScript and click the + sign
3. Paste these codes in the 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="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+ .png" alt="Back to Top" / ></a>
Click Save then save arrangement
If you want to change the color of the Back to top button, delete this code
http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png
Then Paste these codes to change the color of the back to top button
https://3.bp.blogspot.com/-YJSx_YP6eL8/WR9Gj0G_eRI/AAAAAAAAAI1Y/Ux0Rh5Eoo3EJpUy73knW-fHShuJLSBKhgCLcB/s1600/6.%2BBack-To-Top%2BButton%2B-%2BTechspot.png
https://1.bp.blogspot.com/-eNPwC_O74Mo/WR9GirKOGTI/AAAAAAAAAI1I/GXVx5JDiW5kWCaMZSrF6F-4CmHoGxuiJACLcB/s1600/2.%2BBack-To-Top%2BButton%2B-%2BTechspot.png
https://3.bp.blogspot.com/-wZp8-bKYFbg/WR9Gjq08AiI/AAAAAAAAAI1U/yuVBG5cW5HMaazrlxsi9VzBOtR390QsfgCLcB/s1600/4.%2BBack-To-Top%2BButton%2B-%2BTechspot.pn
https://3.bp.blogspot.com/-uRJk9vyZETg/WR9Gj-e3pgI/AAAAAAAAAI1c/hqVojaSG4nE5fljDv-tgQPWGlE37WnX5wCLcB/s1600/5.%2BBack-To-Top%2BButton%2B-%2BTechspot.png
https://2.bp.blogspot.com/-nrA_YDld9XE/WR9GimmkDSI/AAAAAAAAAI1M/Uga1x4QSpsYkS_DnY9v_AXMFssqOsHJoQCLcB/s1600/3.%2BBack-To-Top%2BButton%2B-%2BTechspot.png
https://4.bp.blogspot.com/-qs-_qMyR4Wo/WR9Gin3YXFI/AAAAAAAAAI1Q/tVYMtICXJFY3QjslSAX0vKqbbMbQGx9TQCLcB/s1600/1.%2BBack-To-Top%2BButton%2B-%2BTechspot.png
No comments