Welcome to your blog this time Droidnur will share tips on How to Install Go Up and Go Down Buttons on Blogs.
What are Go Up and Go Down Buttons?
The Go Up and Go Down buttons are buttons that serve as both ways to quickly and easily jump up and down, rather than moving them around with the mouse. This is one way to encourage users to browse more content easily.
Benefits Of Use Go Up and Go Down Buttons on blogs?
The Go Up and Go Down buttons have a decently important role for a site with content that has long pages. For sites that have a lot of information on the page will make other contents skip unnoticed scrolling far down the page.
Alright, for those who want to install it quickly, please follow these steps bellow
How to Install Go Up and Go Down Buttons on Blog?
For that, The first step, open Blogger > then Click the Theme menu > Click Edit HTML next to customize.
The code that I will share uses an icon from Fontawesome if it has not been added to your blog, please. Add the code below before </head> in the Template editor.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>After adding Fontawesome code please add the below code just before </head> tag
V 1.0
<style type='text/css'>
/* Go Up and Down Droidnur */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>Simpler V 2.0
<style type='text/css'>
/* Go Up and Down Droidnur */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>Then add the two codes given below before </body> tag
<ul id='scrollToTop'>
<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/><script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>And Don't forget to save the theme and see the results on your blog.