Cara Memasang atau Membuat Tombol Scroll Up and Down di Blog Terbaru

Cara Memasang atau Membuat Tombol Scroll up and Down di Blog Terbaru

Hallo teman-teman semuanya, gimana kabar kalian? Baik-baik saja? Semoga kita semua selalu diberi kesehatan dan kemudahan untuk kedepannya. Dan terima kasih sudah mau berkunjung di blog yang masih abal-abal ini.

Pada kesempata kali ini saya akan membahas atau berbagi tutorial bagaimana caranya unuk memasang tombol scroll up dan scroll down di blog dengan mudah dan gampang. Tombol ini juga memudahkan kita untuk scroll keatas atau kebawah dengan sekali tekan saja.

Untuk tutorial bagaimana cara memasang atau membuat tombol scroll up dan scroll down, yuk kita simak tutorial dibawah ini :

Pertama, kita login terlebih dahulu ke blogger anda dan masuk ke menu Tema > Edit HTML > Kemudian tambahkan code dibawah ini tepat sebelum code </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>

Setelah menambahkan code diatas, selanjutnya tambahkan juga code dibawah ini tepat sebelum code </head>.

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

Kemudian tambahkan dua code ini tepat sebelum code </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>

Selanjutnya tinggal Simpan Tema dan lihat hasilnya diblog kalian.

Mungkin hanya segitu yang bisa saya kasih pada postingan kali ini, semoga bisa bermanfaat bagi teman-teman semuanya. Jika ada yang ingi ditanyakan, silahkan berkomentar dibawah.

Baca Juga