Cara Memasang Tombol Go Up dan Go Down di Blogger

 Tombol go up dan go down ini terletak di samping scroll bar blog, fungsinya tidak jauh beda seperti tombol back to top hanya saja tombol ini dilengkapi dengan tombol go to bottom.

Jadi tombol go up dan go down ini bisa dengan mudah dan cepat menggulir halaman artikel atau postingan untuk langsung loncat ke bagian bawah dan bagian atas.

Karena melakukan scroll ke bawah atau ke atas dengan menggunakan mouse sudah kurang efektif apalagi jika halaman blog tersebut memiliki konten yang banyak, sehingga butuh beberapa kali melakukan scroll ke bawah dan ke atas.

Sehingga dengan adanya tombol go up dan go down ini bisa memberikan kemudahan kepada pengunjung atau pembaca blog Anda untuk melakukan scroll atau menggulir halaman artikel ke atas dan ke bawah dengan sangat mudah.

Tombol ini juga di lengkapi efek smooth scroll jadi ketika tombol go up atau go down di klik kemudian akan melakukan scroll ke atas atau ke bawah dengan efek scroll yang halus.

Jika Anda tertarik untuk membuat tombol go up dan go down di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Tombol Go Up dan Go Down di Blog

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Kemudian simpan kode css ini, 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>

4. Lalu tambahkan kode ini, 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. Tambahkan kode font awesome ini, di atas kode </head> tapi jika template blog Anda sudah menggunakan font awesome maka kode ini tidak perlu di pasang lagi

<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. Terakhir klik Simpan tema



Itulah artikel mengenai cara memasang tombol go up dan go down di blogger, semoga bermanfaat.