Monday, March 30, 2015
HAHA
1) Masuk dulu ke blogger
2) Pilih Template ~> Edit HTML
3) Carilah Kode </head> dengan menggunakan fungsi ctrl+f, lalu pastekan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Lewati langkah ini jika template kalian sudah terpasang JQuery
4) Setelah itu, pasang kode CSS nya, dengan cara cari kode ]]></b:skin>, dan letakan kode CSS berikut diatas kode ]]></b:skin>
#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}
5) Setelah kode CSS terpasang, carilah kembali kode </head>, dan letakkan script berikut tepat di atas kode </head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
6) Setelah langkah ke 5 selesai, klik SIMPAN untuk menyimpan perubahannya, lalu masuk ke Tata Letak ~> Tambah Gadget ~> HTML/Javascript, lalu masukkan kode berikut
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id="BounceToTop" style="display: block;"></div>
Angka 3 itu merupakan posisi Tombolnya, silahkan dipindahkan sesuai keinginan kalian
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment