Cara Membuat Tombol Go Up dan Go Down di Blog

Pada kali ini saya akan memberikan tutorial Cara Membuat Tombol Go Up dan Go Down di Blog dengan menggunakan JavaScript yang ringan. Tombol Go Up dan Go Down merupakan tombol yang digunakan untuk menggulirkan halaman situs ke bawah atau ke atas hanya dengan sekali klik. Dengan menerapkan tombol ini, pengguna dapat menelusuri konten dengan mudah dan cepat.

Memenuhi kebutuhan pengguna merupakan hal paling penting dalam membangun blog yang baik. Dengan memasang Tombol Go Up dan Go Down atau juga disebut sebagai fitur Tap To Top pada bilah sisi halaman, pengguna dapat meloncat halaman lebih jauh tanpa harus menekan dan menggeser mouse yang lebih banyak menguras tenaga.

Cara Membuat Tombol Go Up dan Go Down di Blog

Langkah 1

Silahkan buka halaman dasbor Blogger, kemudian pilih menu Tema, lalu klik Edit HTML.


Langkah 2

Tambahkan kode dibawah ini sebelum kode </head> pada 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>

Langkah 3

Tambahkan juga kode dibawah ini sebelum kode </head> atau tepatnya sesudah kode diatas.

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

Langkah 4

Selanjutnya, tambahkan kode berikut ini tepat sebelum 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'/>

Langkah 5

Tambahkan juga kode dibawah ini sebelum kode </body>.

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

Langkah 6

Silahkan Simpan kemudian lihat hasilnya.

Pada tahap ini kamu sudah berhasil membuat tombol tap to up dan tap to down di halaman blogger. Selanjutnya, kamu bisa mengubah icon tombol sesuai dengan keinginan melalui fontawesome.

Demikian pembahasan mengenai tips Cara Membuat Tombol Go Up dan Go Down di Blog semoga bermanfaat untuk Anda.