EMPAYAR BINTANG TIGA: TUTORIAL : BACK TO TOP VERSI BARU

Assalamualaikum....hye...rajin pulak mirl 2-3 hari nie kan...sampai pagi2 buta nie pn rajin lgi nak buat entry...haish...ok,,,berbalik pade topik kite...ahh..mlas borak pnjag2...
nt kat blog korang akan ade button cam nie...

pakai kanta kalau x nmpak...

bile scrool ke bawah je die kuar...kite start jom...

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>

Langkah 2

Copy kod di bawah dan paste pada ruang content HTML/Javascript

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style><br />
<div id="scrolltotop"><a href="#">Scroll to top</a></div><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });
}
}, 100);
});
});
</script>

Warna button korang boleh edit dengan menukar kod warna bagi background-color: #000;

Kedudukan boleh jugak edit ubah je nilai margin-left: -150px;

pas 2 save...siap...semudah abc...hahha... ^.^

8 comments:

Anonymous said...: cool!
thanx sharing...; 16 February, 2011
MIRUL said...: @lemongrassbeam :); 16 February, 2011
Faizal n Fashitah said...: Sejok! timak kaseh kerna bekonsi! hehehe..; 16 February, 2011
MIRUL said...: @Faizal n Fashitah same2 kaseh :); 16 February, 2011
SyedGraphix Dot Com said...: aku sukaa blog ni.. lawaaa sngat. waaa...; 17 February, 2011
MIRUL said...: @SyedGraphiX errr...errrr....blog syed lg lawa :); 17 February, 2011
nurradizan said...: terima kasih.:); 07 November, 2011
ida said...: hai...btw cool gila u pnya tutorial...meh la tgk blog sy..^.^
n follow ye...^.^v; 30 January, 2012

16.2.11

TUTORIAL : BACK TO TOP VERSI BARU

8 comments:

SHOUTBOX

FOLLOWERS