How to Add a Go Up and Go Down Button on a Blog

This time TechAshik.com will share tips on how to install the Go Up and Go Down buttons on the blog.
Adding Go Up and Go Down Button to Blog
What is the Go Up and Go Down Button? The Go Up and Go Down buttons are buttons that work both ways to jump up and down easily and briefly, rather than moving it with the mouse. This is one way to encourage users to browse more of other content easily.

Go Up and Go Down buttons have an important role for a site with content that has a long page. For sites that have a lot of information on their pages will make other content passed without realizing it scrolling far down the page. This article help you to add both Go Up and Go Down buttons in your blogger blog.

Well, for those who want to install it, please follow the steps below

First step, Sign in to Blogger then from the right sidebar Click on Theme>>Edit HTML

This code that I will share uses the Fontawesome icon, if it hasn't been added. Add the code below before in the Template editor.

Note: Add this code after <head> and before </head>
<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 code below just before </head>

version 1
<style type='text/css'> /* Go Up and Down */ #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>

Version 2 is simpler
<style type='text/css'> /* Go Up and Down */ #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 codes below before </body>
<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>

Save the theme and see the results on your blog.

So for tips on How to Install the Go Up and Go Down Button on the Blog, hopefully it will be useful for you.

Post a Comment

0 Comments