Memasang Tombol Go Up dan Go Down di Blogger
Bila kita berkunjung ke blog orang, biasanya hanya terdapat tombol back to top yang berfungsi menggulir halaman artikel yang sudah kita baca ke bagian atas (Go Up). Hal ini sangat jauh lebih efektif bagi pembaca itu sendiri, apalagi artikel yang dibaca panjangnya minta ampun. Sehingga membutuhkan beberapa kali melakukan scroll ke atas.
Selain terdapat menu Go Up, kita juga bisa menambahkan fitur Go Down yang berfungsi menggulir halaman artikel ke bagian bawah.
Jika kamu tertarik mengguanakan keduanya, silahkan simak tutorial berikut ini cara memasang tombol go up dan go down di blogger
2. Klik Tema yang terdapat pada sidebar kiri -> kemudian Klik Edit HTML
3. Tambahkan kode css dibawah ini tepat di atas kode </head>
Versi 1 (Sederhana)
Versi 2 (Lingkaran)
Note: Pilih salah satu kode diatas
4. Kemudian tambahkan kode di bawah ini tepat di atas kode </body>
5. Jika template kamu sudah menggunakan kode font awesome maka abaikan langkah ini, namun jika belum menggunakannya silahkan salin kode dibawah ini, kemudian letakkan di atas kode </head> atau di bawah kode <head>
6. Simpan template dan lihatlah hasilnya
Oiya Saya mendapatkan kode di atas dari blog Arlina Design. Oke itulah cara Memasang Tombol Go Up dan Go Down di Blogger. Sampai ketemu di artikel berikutnya.
Selain terdapat menu Go Up, kita juga bisa menambahkan fitur Go Down yang berfungsi menggulir halaman artikel ke bagian bawah.
Jika kamu 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 -> kemudian Klik Edit HTML
3. Tambahkan kode css dibawah ini tepat di atas kode </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 kode diatas
4. Kemudian tambahkan kode di bawah ini tepat di atas kode </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>
5. Jika template kamu sudah menggunakan kode font awesome maka abaikan langkah ini, namun jika belum menggunakannya silahkan salin kode dibawah ini, kemudian letakkan di atas kode </head> atau di bawah kode <head>
<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>
6. Simpan template dan lihatlah hasilnya
Oiya Saya mendapatkan kode di atas dari blog Arlina Design. Oke itulah cara Memasang Tombol Go Up dan Go Down di Blogger. Sampai ketemu di artikel berikutnya.