Tombol Go Up dan Go Down mempunyai peranan cukup penting bagi sebuah situs dengan konten yang mempunyai halaman yang panjang. Untuk situs yang mempunyai banyak isu pada halamannya akan menciptakan konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.
Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini
Cara Memasang Tombol Go Up dan Go Down di Blog
Langkah pertama, buka Blogger > Klik hidangan Tema > Klik Edit HTML
Kode yang akan aku bagikan ini memakai ikon dari Fontawesome, bila belum ditambahkan. Tambahkan instruksi 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 instruksi Fontawesome silakan tambahkan instruksi di bawah ini sempurna 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 instruksi 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 alhasil di blog sobat.
Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, agar bermanfaat dan wassalam.