//sunflower's hope

FOLLOW SITE ABOUT ENTRY LINKS STUFF Dashboard

Tutorial : Jquery Back To Top Button ( Like Me )

10/14/11 • 14.10.11 • 0 Commenter [s]

Hai semua hari ini aku mau kasih tutorial membuat jquery back to top button seperti aku ^_^

Mau tau cara buatnya

kalau mau bikin, ayo lihat caranya di bawah ini :

Dashboard =>Rancangan =>Edit HTML

Cari kode:

</body>

Pastekan kode ini dibawah kode </body> :

<a href='#' id='toTop'><img src='URL IMAGE TOP BUTTON?t=1292762029' style='border:0;'/></a>

Merah diganti dengan URL button back to top kamu . bisa cari di Photobucket.com ambil direct linknya ya

Eits, belum selesai, masih ada lagi!
Cari kode:

]]></b:skin>

Pastekan kode ini diatas kode ]]></b:skin> :

/* to top */

#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

Kalau icon TOP kamu terpotong, silakan ubah size yang warna Biru tersebut sampai icon top kamu utuh

yang warna kuning bisa diganti dengan crosshair, supaya dia saat di sentuh menjadi tanda +, atau kalau mau pakai cursor sendiri kamu bisa ganti warna kuning dengan (url cursor), url cursor ganti dengan url cursor kamu

Lalu, cari kode ini :

</head>

Pastekan kode ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*-----------------------

* jQuery Plugin: Scroll to Top

* by Letthalicious Blog (http://letthaprincess.blogspot.com/)

* Bring to you by Thata from http://lettha-story.blogspot.com/

* Copyright (c) 2011 Letthalicious Blog

* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.

* For usage instructions and version updates to go http://letthaprincess.blogspot.com/

* Do not delete these infomation

* Version: 1.0, 12/03/2009

-----------------------*/

$(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")})}});