Cara Membuat Tombol Back To Top & Down Di Blogger

Tombol back to top dan back to top ini sebenarnya sama seperti tombol back to top yang biasanya kita jumpai, namun yang berbeda adalah kali ini adanya tombol back to down/back to top button. Tombol ini memiliki peranan penting bagi blog. Terutama bagi kalian yang memiliki artikel yang panjang lebar yang tidak memungkinan menggunalan scroll button. Tombol back to top dan back to top ini juga dinamakan tombol go up dan go down. 

Tombol ini akan membantu pengunjung menelusuri seluruh blog kalian sampai halaman paling bawah yang tidak memungkinkan menggunakan mouse dan scroll button. Namun jika dalam kalian mengandung banyak informasi penting maka pengunjung akan melewatkannya karena akan langsung menuju ke laman paling bawah. Gimana tertarik tombol ini, yuk ikuti langkah-langkah dibawah ini.

Cara Memasang Tombol Go UP & Go DOWN

Tombol back to top dan back to down ini menggunakan font awesome supaya lebih keren dan menarik. Jadi jika kalian belum memasang script font awesome di blog kalian, kalian bisa menyalin kode font awesome dibawah ini dan letakkan ditemplate blog, tepatnya diatas kode </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>

1. Buka Blogger, pilih Tema → Edit HTML

2. Silakan salin kode CSS dibawah ini dan pastekan/letakkan diatas kode </head>

<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:#347ec9;color:#fff;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:#347ec9;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>

3. Salin kode dibawah ini dan pastekan diatas kode </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>

Terakhir simpan template dan lihat hasilnya

Bagaimana keren bukan? Jika anda ingin mengganti warna dari tombol back to top dan back to top anda bisa mengubah kode yang sudah ditandai dengan warna kuning. Cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.