Tombol Go Up dan Go Down memiliki peranan cukup penting bagi sebuah situs dengan konten yang memiliki halaman yang panjang. Untuk situs yang memiliki banyak informasi pada halamannya akan membuat konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.
Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini
Dengan Mudah Memasang Tombol Go Up dan Go Down pada Blog
Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML
Kode yang akan saya 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>Setelah menambahkan kode Fontawesome silakan 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>Kemudian tambahkan kedua kode di bawah 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>Simpan tema dan lihat hasilnya di blog sobat.
Sekian untuk tips Dengan Mudah Memasang Tombol Go Up dan Go Down pada Blog, semoga bermanfaat dan salam bahagia.