Widget Back to Top ini mungkin tidak asing lagi bagi kalian, karna sudah sangat banyak blog-blog yang membahas tutorial ini, baik yang sederhana hanya dengan membuat link anchor ka atas halaman (mengarahkan kehalaman atas blog) ada juga yang sudah menggunakan efek smooth scrolling (dengan jQuery).
Dengan menggunakan script jQuery ini akan membuat Widget Back to Top diblog anda lebih bagus dan menarik. karna efek Smooth Scrolling yang ini berarti menggulung (bergulir) secara lembut/halus ke atas jika tombol diklik, tidak secara sekaligus. Oke langsung saja ini dia tutorialnya
Cara Membuat Widget Back to Top Dengan Efek Smooth Scrolling di Blogger
Cara Membuat Widget Back to Top Dengan Efek Smooth Scrolling sangat mudah karena tidak perlu edit HTML segala, anda hanya harus memasang layaknya widget biasa yang ada di tataletak
1. Masuk ke blog --> Tata Letak
2. Klik Tambahkan Widget --> Pilih Add HTML/Javascript
3. Copy code dibawah ini
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#w2btoTop {
display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;
overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFd8XCEoUzPtOSHc41f1YhoqcA2_36a2lii3SwthytKLLFIpYNTB8iBH8mOPT6hzhlskdnyXAqTg1CH3AamXHRFE8buJXZwyDCmyagnS5Zcy0m9-u4yV34HGQshzbEbkj6fdQNxiKKooZa/s102/way2blogging.org.ui.totop.png) no-repeat left top;
}
#w2btoTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFd8XCEoUzPtOSHc41f1YhoqcA2_36a2lii3SwthytKLLFIpYNTB8iBH8mOPT6hzhlskdnyXAqTg1CH3AamXHRFE8buJXZwyDCmyagnS5Zcy0m9-u4yV34HGQshzbEbkj6fdQNxiKKooZa/s102/way2blogging.org.ui.totop.png) no-repeat left -51px;
width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);
}
#w2btoTop:active,
#w2btoTop:focus {
outline:none;
}
</style>
<script src="http://gragasanit.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"> </script>
<script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>4. Simpan/ Save
Semoga Bermanfaat !
EmoticonEmoticon