Hosting Unlimited Indonesia

Cara Memasang Komentar Facebook Responsive Di Blogger

Cara Memasang Komentar Facebook Responsive di Blogger - Masih membahas seputar komentar, tutorial kedua hari ini akan menyebarkan perihal...

Memasang Tombol Back To Top Dengan Jquery Ui

Memasang Tombol Back to Top dengan jQuery UI Memasang Tombol Back to Top dengan jQuery UI

Memasang Tombol Back to Top dengan jQuery UI - Pada kesempatan kali ini akan menyebarkan cara memasang sebuah tombol back to top yang teman sudah tidak ajaib lagi dengan suplemen dampak jQuery UI.

Pada artikel yang kemudian Saya pernah menyebarkan tutorial terkait tombol back to top ini :

Baca juga : Tombol Back to Top Roket Meluncur dan Memasang Smooth Back to Top di Blog

Bagi yang ingin mencobanya, silakan ikuti langkah berikut :

Catatan : Jika di template blog sudah terpasang tombol back to top, silakan hapus terlebih dahulu tombol tersebut.

1. Login ke Blogger > Template > Edit HTML > Tambahkan instruksi di bawah ini sebelum ]]></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 instruksi di bawah ini sebelum </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.jsdelivr.net/gh/Arlina-Design/redvision@master/easing.js' type='text/javascript'/>

3. Simpan template dan lihat hasilnya.


Jika ingin memasang tombol back to top dengan dampak bounce, silakan tambahkan instruksi 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.jsdelivr.net/gh/Arlina-Design/redvision@master/easing.js' type='text/javascript'/>

Untuk mengganti dengan dampak lain, silakan kunjungi http://easings.net kemudian ganti instruksi yang ditandai dengan nama dampak yang tersedia.



Demikian mengenai Cara Memasang Tombol Back to Top dengan jQuery UI. Semoga bermanfaat.

0 Response to "Memasang Tombol Back To Top Dengan Jquery Ui"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel