Cara membuat Scroll To Top and Down di Blogger

membuat Scroll To Top and Down di Blogger – Jika kamu mengunjungi sebuah website, terkadang pada bagian pojok kanan bawah web terdapat tombol dimana ketika kamu klik akan mengembalikan atau scroll otomatis kehalaman atas website. Tombol tersebut dapat disebut dengan Scroll to Top.

Fitur tersebut sangat bermanfaat, dan mempermudah pembaca blog kamu. Karena pembaca tiidak perlu capek untuk stroll kebagian atas website, karena dengan klik 1 tombol sudah bisa langsung berpindah kebagian atas website. Kamu juga bisa melihat di Blog Emalution ini sebagai contoh.

Semua platform, cms, sudah bisa menggunakan Fitur ini. salah satunya adalah Blogger, dan kali ini Emalution akan membahas bagaimana Cara membuat Scroll To Top and Down di Blogger, jadi kamu bisa scroll kehalaman atas, dan kehalaman paling bawah Blog. Langsung saja ke tahapannya,

1. Login ke Blogger.com
2. Masuk ke menu Theme > Costumize > Edit HTML
3. Terapkan kode ini diatas ]]></b:skin> atau </style>

/*scroll top and down*/
#GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;}
#GoToDown:before {content:"";position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#555 transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;}
#GoToDown:hover:before {content:"";position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#555 transparent transparent transparent;line-height:0}
#GoToDown:after {content:"";position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;}


#BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;}
#BounceToTop:before {content:"";position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #555 transparent;line-height:0;transition:all 0.3s ease-out;}
#BounceToTop:hover:before {content:"";position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #555 transparent;line-height:0}
#BounceToTop:after {content:""; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;}

4. Setelah itu Letakan Kode Dibawah Tepat Diatas </body>

<script type=\'text/javascript\'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:0},200); });
var $elem = $(&#39;body&#39;);
$(&#39;#GoToDown&#39;).click(function () {
$(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 800);
$(&#39;#GoToDown&#39;).fadeOut()
});
$(&#39;#BounceToTop&#39;).click(function () {
$(&#39;#GoToDown&#39;).fadeIn()
});
 });
</script>
<div id=\'BounceToTop\'/>
<div id=\'GoToDown\'/>

5. Setelah itu save, coba scroll dan akan tampil tombol scrollnya.

Demikian Tutorial Cara membuat Scroll To Top and Down di Blogger kali ini, semoga bermanfaat dan tunggu tutorial lainnya di Wahid Emalution.