Hello blogger friends, At this time fixiw will share a tutorial, namely how to make a return / back to top rocket button on your blog. The back to top button is usually located at the bottom corner of a website.
When we make a long post on a Blogger blog then we use the scroll down button and we reach the bottom of the Blog now we need to use the scroll up button to reach the first paragraph blog post, so we need a Back To Top button, by default Blogger doesn't have a Back button To Top, we can now use the third party Back To Top button on our Blog.
How To Make Rocket Back To Top Button On Blogger
Here are some Steps, so follow it.
Step 1: Open Blogger
Step 2: Then click Edit HTML
Step 3: After entering now you can Find ]]> </ b: skin> or <style> ..... </style> And Paste the CSS given above on it.
.back-to-top svg {width:24px;height:24px;vertical-align: middle}
.back-to-top svg path {fill: #4d90fe;}
.back-to-top:hover svg path{fill: #f95b41}
.back-to-top:hover{transform: rotate(-45deg);}
.back-to-top {background:#fff;padding:9px 9px;font-size:24px;border-radius: 100px;transition:all .30s ease-in-out;;border:2px solid #4d90fe;position: fixed !important;position: absolute;bottom: 20px;right: 20px;transition:transform .5s ease-out;z-index: 999;box-shadow:0px 2px 10px 0px #aaaaaa}
Step 4: Now find <head> in your HTML Then Paste This HTML Code Below.
<div class='back-to-top'>
<a href='' title='Back To Top'>
<svg viewBox='0 0 24 24'>
<path d='M7.961 17.563c-.182-.037-.366.044-.461.203-.475 1.02-1.576 1.592-2.684 1.395-.203-1.108.373-2.213 1.397-2.681.204-.125.271-.392.146-.597-.067-.111-.182-.188-.311-.205-1.577-.297-3.193.262-4.252 1.469C.545 18.865.074 21.03.5 23.113c.031.185.175.329.359.359.498.081 1.002.12 1.508.12 1.834.102 3.625-.581 4.931-1.873.89-1.054 1.259-2.452 1.007-3.808-.021-.187-.161-.337-.345-.375l.001.027zM23.778.203c-.171-.169-.522-.089-.522-.089C22.621.04 21.98.003 21.339.001c-4.154-.043-8.153 1.576-11.106 4.497-.36.362-.7.742-1.02 1.139-1.402-.65-3.008-.709-4.455-.165-2.287.984-3.623 3.787-4.729 6.671-.087.224.025.476.249.562.144.055.304.031.425-.064 1.566-1.163 3.618-1.445 5.44-.749L5.6 13.856c-.05.184.026.377.187.479 1.466 1.096 2.767 2.395 3.863 3.857.103.163.298.239.482.188l1.963-.539c.719 1.826.436 3.893-.749 5.456-.148.188-.116.463.071.61.121.096.285.12.428.064 2.883-1.109 5.686-2.443 6.665-4.722.544-1.446.487-3.049-.161-4.451.395-.326.772-.672 1.133-1.036 3.381-3.44 5-8.241 4.392-13.026 0 0 .076-.352-.096-.524V.203zM21.339.87c.563 0 1.127.029 1.688.088.079.771.103 1.548.07 2.322-.611-.066-1.184-.34-1.623-.771-.438-.437-.713-1.009-.777-1.623.209-.011.422-.018.636-.018l.006.002zM10.846 5.112C13.262 2.716 16.438 1.24 19.828.94c.07.677.33 1.318.749 1.855l-2.698 2.697c-1.529-1.203-3.742-.939-4.946.59-1.005 1.278-1.005 3.078 0 4.356l-3.147 3.147c-.811-.785-1.689-1.498-2.626-2.131.662-2.394 1.932-4.58 3.686-6.342zm7.524 3.159c.001 1.469-1.188 2.66-2.657 2.66-1.469.002-2.659-1.188-2.66-2.656 0-1.47 1.189-2.66 2.657-2.661h.003c1.467 0 2.656 1.19 2.657 2.657zM1.314 11.269c.941-2.254 2.09-4.268 3.779-4.994 1.154-.428 2.428-.396 3.559.09C7.639 7.78 6.871 9.36 6.387 11.033c-1.645-.667-3.498-.581-5.074.233l.001.003zm8.891 6.19c-1.074-1.37-2.311-2.604-3.683-3.677l.395-1.434c1.845 1.275 3.444 2.874 4.722 4.718l-1.434.393zm7.508 1.425c-.727 1.698-2.737 2.848-4.989 3.789.811-1.578.893-3.432.225-5.074 1.677-.488 3.259-1.26 4.679-2.278.484 1.134.515 2.412.083 3.566l.002-.003zm-5.186-2.06c-.629-.937-1.34-1.816-2.123-2.628l3.147-3.148c1.528 1.203 3.743.939 4.945-.59 1.006-1.278 1.006-3.078 0-4.356l2.698-2.698c.535.418 1.177.677 1.85.75-.299 3.387-1.772 6.563-4.166 8.979-1.763 1.754-3.947 3.022-6.343 3.684l-.008.007zZ' fill='#f95b41'></path>
</svg>
</a>
</div>
Step 5: Now Find </body> Then paste the jQuery tag Above </body> .
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
// Show button after 100px
var showAfter = 100;
if ($(this).scrollTop() > showAfter ) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
//Click event to scroll to top
$('.back-to-top').hide().click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
Outcomes:
So How to Install the Back To Top Button on Blogger, hopefully this is useful.
Post a Comment