Bila kita berkunjung ke blog orang, biasanya hanya terdapat tombol back to top yang berfungsi menggulir halaman artikel yang sudah kita baca ke bab atas (Go Up). Hal ini sangat jauh lebih efektif bagi pembaca itu sendiri, apalagi artikel yang dibaca panjangnya minta ampun. Sehingga membutuhkan beberapa kali melaksanakan scroll ke atas.
Selain terdapat sajian Go Up, kita juga sanggup menambahkan fitur Go Down yang berfungsi menggulir halaman artikel ke bab bawah.
Jika kau tertarik mengguanakan keduanya, silahkan simak tutorial berikut ini cara memasang tombol go up dan go down di blogger
Memasang Tombol Go Up dan Go Down di Blogger
1. Masuk ke akun blogger.com kamu2. Klik Tema yang terdapat pada sidebar kiri -> lalu Klik Edit HTML
3. Tambahkan isyarat css dibawah ini sempurna di atas isyarat </head>
Versi 1 (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> Versi 2 (Lingkaran)
<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> Note: Pilih salah satu isyarat diatas
4. Kemudian tambahkan isyarat di bawah ini sempurna di atas isyarat </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/j4vascript'> //<![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> 5. Jika template kau sudah memakai isyarat font awesome maka abaikan langkah ini, namun kalau belum menggunakannya silahkan salin isyarat dibawah ini, lalu letakkan di atas isyarat </head> atau di bawah isyarat <head>
<script type='text/j4vascript'> //<![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> 6. Simpan template dan lihatlah hasilnya
Oiya Saya mendapat isyarat di atas dari blog Arlina Design. Oke itulah cara Memasang Tombol Go Up dan Go Down di Blogger. Sampai ketemu di artikel berikutnya.
Sumber http://www.warunginter.net/