Cara Menciptakan Tombol Go Up Dan Go Down Di Blog

Senin, 05 September 2016

Pada kali ini aku akan memperlihatkan tutorial Cara Membuat Tombol Go Up dan Go Down di Blog dengan memakai JavaScript yang ringan. Tombol Go Up dan Go Down merupakan tombol yang dipakai untuk menggulirkan halaman situs ke bawah atau ke atas hanya dengan sekali klik. Dengan menerapkan tombol ini, pengguna sanggup menelusuri konten dengan gampang 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 sanggup 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 hidangan Tema, kemudian klik Edit HTML.


Langkah 2

Tambahkan instruksi dibawah ini sebelum instruksi </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 instruksi dibawah ini sebelum instruksi </head> atau tepatnya sehabis instruksi 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 instruksi berikut ini sempurna sebelum instruksi </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 instruksi dibawah ini sebelum instruksi </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 kau sudah berhasil menciptakan tombol tap to up dan tap to down di halaman blogger. Selanjutnya, kau sanggup mengubah icon tombol sesuai dengan harapan melalui fontawesome.

Demikian pembahasan mengenai tips Cara Membuat Tombol Go Up dan Go Down di Blog supaya bermanfaat untuk Anda.
Sumber https://www.panduanblog.id/

Share This :