Online Firmware: Cara Mudah Membuat Scrool To Top dengan JQuery

Thursday, December 1, 2016

Cara Mudah Membuat Scrool To Top dengan JQuery

Cara Mudah dan Gampang Membuat Scrool To Top menggunakan J-Query - Triks mudah membuat Scrool To Top di Blogspot memakai J-Query. Keunggulan To Top Button ini adalah ketika halaman blog pada posisi diatas maka Button akan secara otomatis akan ter hidden namun ketika saat scrool berada di bawah maka tombol to Top ini akan muncul.

to top dengan J-Query

Cara Membuat Scrool To Top JQuery ini dapat Anda pergunakan di blog Anda dan tidak akan membuat blog Anda semakin rame justru akan nampak semakin bagus, disertai juga dengan J-Query sehingga ketika diklik tombol top nya akan secara halus halaman akan di scrool keatas.

Berikut ini langkah-langkahnya
1. Copy script berikut diatas code ]]></b:skin>

#toTop {width:50px; height:50px; background: transparent;
border:1px solid #333; color:red; text-align:center;padding:5px;
position:fixed; bottom:50px; right:50px; cursor:pointer; text-decoration:none;
font-weight:bold;font-size: 14px; -moz-border-radius:5px; -khtml-border-radius:5px;
-webkit-border-radius:5px; border-radius:5px;opacity:0.3;
}

2. Copy Script Berikut di atas code </body>

<a href=# id=toTop>? TOP</a>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/> <script type=text/javascript>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>

Untuk font yang berwarna merah bisa tidak Anda ikutkan atau anda hapus jika diblog Anda sudah ada.
Sejauh ini anda sudah dapat save template Anda dan silahkan dilihat di pojok kiri bawah, jangan lupa untuk men scrool ke bawah blog Anda.

Jika Anda ingin mengganti ? TOP dengan gambar, silahkan ikuti tips berikut ini sob...
Anda dapat mengganti kode CSS diatas dengan script berikut ini :

#toTop {width:50px; height:50px; background: transparent; padding:5px;
position:fixed; bottom:50px; right:50px; cursor:pointer; opacity:0.3;
}

Selanjutnya silahkan Anda rubah <a href=# id=toTop>? TOP</a> dengan script berikut ini :

<a href=# id=toTop><img src=LINK IMAGE/></a>

Link image, anda dapat memakai link berikut ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyzLUFUXLOruzTLmACbBBZWZjowZRY_0HZxVrmh1CV9R5CTVCwWpCICiXYKqVaxwhpFtEnIsBzZfu_ktLyXVxUT6ehNT9xqWzcF1St2IOs6RU7qx8zANtc1SQ3EHsSFu6fBny0-vl6dE/s128/icon%20to%20top.png

Oke sampai disini dulu brow Tutorial saya tentang cara membuat Scrool To Top dengan J-Query di Blogspot, selamat mencoba dan jangan lupa tinggalkan jejakmu dikomentar, serta like nya jika artikel ini berguna bagi ente. Semoga Sukses.

Baca juga : Cara Membuat Tab pada Sidebar dengan JQuery

Available link for download