How to Install Go Up & Go Down Buttons on a Blog

Hello friends, bloggers, on this occasion I will discuss the blogging tutorial How to Install the Go Up & Go Down Button on a Blog .

The function of the Go Up & Go Down Button on the Blog is to make it easier for readers of article content on our blog, to go up or down on a part of the page without having to scroll manually. Especially if our blog site contains long article content, then the go up & go down button is highly recommended to be installed.

Well, for blogger friends who want to install the Go Up & Go Down Button on the blog, please follow the tutorial below:

Note: If you want to install a go up & go down button like the one I installed on this blog, make sure your blog has a FontAwesome link installed. If it is not installed, friends, you can copy the code below and paste it before the </head> code

<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>

Easy Ways to Install Go Up & Go Down Buttons on Blogspot

1. Go to the Blogger Dashboard > Themes > Edit HTML
2. Copy the script code below, then paste it above the </head> code

<style type = 'text / css'>
/ * Go Up and Go Down By 24Dzgn * /
# gotop, # gobottom {background: # 4267b2; margin: 0; padding: 5px 15px 0; border-radius: 0; position: fixed; color: #fff; bottom: 0; cursor: pointer; display: none; line- height: 2; backface-visibility: hidden; -webkit-transform: translateZ (0); transform: translateZ (0); transition: all .3s} #gotop: hover, # gobottom: hover {background: # 6bc9f9} #gotop {right: 40px;} # gobottom {background: # 282480; right: 0}
@media only screen and (max-width: 768px) {# gotop {right: 43px}}
</style>

3. Next, copy the script code below and paste it before </body>

<div id = 'downfooter' />
<a href='#' id='gotop'> <i class = 'fa fa-chevron-up' title = 'Go Up' /> </a> <a href='#' id='gobottom'> <i class = 'fa fa-chevron-down' title = 'Go Down' /> </a>
<script type = 'text / javascript'>
// <! [CDATA [
// Go Up and Go Down
! function (o) {o (window) .scroll (function () {o (this) .scrollTop ()> 75? (o ("# gotop"). removeAttr ("href"), o ("# gotop" ) .fadeIn ()): o ("# gotop"). fadeOut ()}), o (function () {o ("# gotop"). click (function () {return o ("html, body") .animate ({scrollTop: 0}, "slow"),! 1})})} (jQuery), function (o) {o (window) .scroll (function () {o (this) .scrollTop () < 0? (O ("# gobottom"). RemoveAttr ("href"), o ("# gobottom"). FadeOut ()): o ("# gobottom"). FadeIn ())), o (function () {o ("# gobottom"). click (function () {return o ("html, body"). animate ({scrollTop: $ ("# downfooter"). offset (). top}, "slow"), ! 1})})} (jQuery);
//]]>
</script>

4. Finally, click Save Theme / Template

Tutorial Closing !

Maybe quite a few short tutorials on How to Install the Go Up & Go Down Button on a Blog , and if you have anything to ask about the contents of the article above, friends, please leave a comment below. Hope it is useful :)