Cara Membuat Tombol Go Up dan Go Down di Blogger

Halo semuanya, kali ini saya akan berbagi gimana sih cara membuat Tombol Go Up dan Go Down di blog. Apa fungsi Tombol Go Up dan Go Down ? Tombol Go Up dan Go Down berfungsi untuk meng-scrool kebawah maupun bawah dengan mudah dan singkat, daripada menggerakannya dengan mouse atau tangan.

Tombol Go Up dan Go Down memiliki peran penting untuk sebuah situs yang memiliki halaman yang panjang, tombol ini akan otomatis kebawah atau keatas dengan satu klik saja.

Oke bagi yang mau memasangnya silahkan ikuti langkah berikut ini.

Cara Membuat Tombol Go Up dan Go Down

Langkah pertama, pergi ke dashboard Blogger > Klik Tema > Klik Edit Html

Pertama tambahkan font awesome ke tema blog kalian, jika sudah lewati saja. Salin kode dibawah ini letakan pada </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>

Langkah selanjutnya, tambahkan kode dibawah ini di </head> juga

<style type='text/css'>
#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 selanjutnya, tambahkan kode dibawah ini tepat sebelum </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>

Lalu klik simpan dan lihat hasilnya diblog kamu.

BloggerTutorial

Share This :