Cara Mudah Membuat Tombol Go Up dan Go Down Responsive di Blog

Tombol go up dan go down memiliki peranan cukup penting bagi sebuah situs web dengan konten yang memiliki halaman yang cukup panjang. Untuk situs yang memiliki banyak informasi pada halamannya akan membuat info-info lain terlewati tanpa disadari menggulir jauh ke bawah halaman. Maka dari itu, untuk mengantisipasi hal tersebut, diperlukan tombol go up dan go down ini. 

Bang mau nanya nih, tombol go up dan go down nya cuma keatas bawah aja bang?

Tentu tidak sobat, tombol go up dan go down ini sudah dimodifkasi oleh kak arlina sehingga memiliki efek fitur scroll show dan hidden saat menggulir keatas dan kebawah. Jadi tampilan tombolnya gak terlalu kaku kali. Nah, untuk membuatnya, cukup mudah kok, silahkan ikuti panduannya dibawah ini.

 

Cara Memasang Tombol Go Up dan Go Down di Blogger

#1. Buka blogger.

#2. Pilih menu tema > pilih edit html.

#3. Kode yang akan aku bagikan ini menggunakan ikon dari fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini sebelum </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>

#4. Setelah menambahkan kode fontawesome silahkan tambahkan kode di bawah ini tepat sebelum </head>

Versi 1

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

 

Versi 2 yang lebih sederhana

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>

#5. Kemudian tambahkan kode dibawah ini 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>

#6. Simpan tema dan lihat hasilnya di blog sobat.

#7. Selesai.

Demo

Baca juga : buat blogmu lebih hidup dengan fitur live chatt yang ada efek suaranya.  

Begitulah kira-kira cara memasang tombol go up dan go down di blog. Semoga dapat membantu dan bermanfaat. Terima kasih hehehe.

Share this post