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.net
kemudian 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.
EmoticonEmoticon