Cara Buat Tombol Go Up dan Go Down di Blog

Cara mudah membuat tombol go up dan go down di blogger - 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. 

Kak mau nanya nih, tombol go up dan go down nya cuma keatas dan kebawah aja kan?

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.

 

1. Cara Buat Tombol Go Up dan Go Down di Blog

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

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

 

b. 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 2 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 buat tombol go up dan go down di blog. Semoga dapat membantu dan bermanfaat. Jangan lupa untuk di share juga ke teman-teman yang lain. Biar blog ini dapat bertambah ramai. Terima kasih, salam damai, dan selamat beraktifitas hehehe.

Mas Galih

• Share
• Share

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense