Cara membuat tombol go up dan go down pada blog

Pada dasarnya tombol go up dan go down ini akan mempermudah pada pembaca untuk melakukan scrol artikel terutama artikel yang panjang shingga mengurangi pekerjaan menggunakan mouse untuk scrol artikel.

Dengan adanya scrol ini diharapkan pengunjung akan betah berlama - lama di blog kita bila artikel didalam blog kita panjang, ini biasanya berhubungan dengan berita atau cerpen.

Tombol ini dilengkapi dengan gaya atau efek smoth sehingga terlihat dinamis dan tidak menggangu penglihatan pembaca dalam membaca artikelnya.

Baik untuk mempersignkatnya ada baiknya kita ikuti langkah demi langkahnya di bawah ini :

Pertama masuk ke Blogger sahabat semua

Kedua Klik Tema => edit HTML

Ketiga simpan kode css ini, di atas kode </head>

Versi Pertama 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 Kedua pake 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>

Keempat 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>

Kelima 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>

Keenam Simpan Template dan lihat hasilnya. Code by Arlina Design

Sekian semoga artikel ini dapat menambah koleksi dan ilmu bagi sahabat semua dimana saja berada.