Tips Blogger - Cara Memasang Tombol Back to Top Dengan Efek Yang Berbeda – pada kesempatan kali ini saya akan membagikan informasi mengenai bagaimana cara membuat Efek Back To Top yang karena dan berbeda. Tombol Back to Top merupakan tombol yang sangat penting yang harus ada pada sebuah Blog. Tombol ini akan memudahkan pengunjung untuk kembali ke bagian paling atas blog setelah berada di bawah halaman blog nantinya.
Semua orang pasti sudah tahu apa Fungsi Tombol Back to Top, yaitu untuk mengembalikan tampilan halaman di atas kembali. Namun, tidak lengkap rasanya jika Tombol Back to Top tidak terpasang Efek yang menarik dan tampilan yang ikut juga menarik. Maka dari itu kali ini saya akan bagikan informasi mengenai Cara Memasang Tombol Back to Top Dengan Efek Yang Berbeda. Baiklah, langsung saja kita cari tahu cara membuatnya berikut ini.
Catatan : Jika di Blog sobat sudah terpasang Tombol Back to Top , silahkan hapus terlebih dahulu Kode atau script Tombol tersebut di dalam HTML template blog sobat.
1. Pertama Login Ke blog Sobat > Masuk Menu Template > Edit HTML > Salin kode di bawah ini dan letakkan sebelum kode ]]></b:skin> atau </style>
/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}
2. selanjutnya tambahkan kode di bawah ini sebelum kode </body>
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
3. simpan Template dan Lihat Hasilnya.
Jika ingin memasang Tombol Back to Top dengan Efek Bounce, silahkan tambahkan kode di bawah ini.
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
Untuk mengganti dengan Efek Lain, silahkan kunjungi http://easings.netkemudian ganti kode yang di tandai dengan nama Efek yang Tersedia.
Demikianlah tutorial mengenai Cara Memasang Tombol Back to Top Dengan Efek Yang Berbeda. Semoga menjadi ilmu yang bermanfaat dan dapat banyak membantu. Jangan lupa luangkan waktu sebentar untuk berkomentar dan selamat mencoba untuk sobat pembaca semua.
0 Komentar