Membuat Tombol Go Up Serta Go Down Di Blog

Pada kali ini aku bakal memberikan tutorial Cara Membuat Tombol Go Up serta Go Down di Blog dengan menggunakan JavaScript yang ringan. Tombol Go Up serta Go Down merupakan tombol yang digunakan buat menggulirkan halaman situs ke bawah atau ke atas cuma dengan sekali klik. Dengan menerapkan tombol ini, pengguna dapat menelusuri konten dengan gampang serta cepat.

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

Cara Membuat Tombol Go Up serta 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 telah berhasil membuat tombol tap to up serta tap to down di halaman blogger. Selanjutnya, kamu bisa mengubah icon tombol sesuai dengan keinginan lewat fontawesome.

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

Bagikan Artikel ini