12 August 2011

Tutorial : Jquery Scroll Top Button

1 . Dashboard > Design > Edit html > Tick Expand Widgets

2. cari code ni : </body>

3. copy code ni :
<a href='#' id='toTop'><img src='http://i1108.photobucket.com/albums/h420/sweetcandy4858/nurhafizah/topblack.png?t=1292762029' style='border:0;'/></a>
4. paste ATAS/SEBELUM code </body>

5. cari code ni pula : ]]></b:skin>

6. copy code ni :
 /* 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; }
7. paste ATAS/SEBELUM code ]]></b:skin>

8. cari code ni : </head>

9 copy code nih :







 <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 Craig Wilson, Ph.Creative (http://www.ph-creative.com) 
* Bring to you by Zen from http://zenplate.blogspot.com 
* Copyright (c) 2009 Ph.Creative Ltd. 
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. 
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx 
* 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")})}}); 

$(function() { 
$("#toTop").scrollToTop(); 
}); 

</script>
 

10. paste SEBELUM </head>

11. preview & save .

tulisan merah tu untuk image button back to top . korang boleh cari , tak pon buat sendiri okay . btw , saya buatkan beberapa button tu . boleh pilih dekat bawah .


http://2.bp.blogspot.com/-RfWE674DTy0/TsdOGXLY_OI/AAAAAAAAAMA/ZoQDr__zr1w/s1600/th_topblack.png

http://2.bp.blogspot.com/-YfYerwZkqSA/TsdOI6CumnI/AAAAAAAAAMU/l2F1aH4oX2E/s1600/th_topgray.png

http://1.bp.blogspot.com/-qFcJKQUpMI8/TsdOHpddONI/AAAAAAAAAMQ/PcNT5ctOx7w/s1600/th_topborange.png

http://3.bp.blogspot.com/-maTRTJI-VaY/TsdOJ4KLkoI/AAAAAAAAAMk/HplY9aqGVFU/s1600/th_toppink.png

http://4.bp.blogspot.com/-iY3BgtwpcGQ/TsdOJVQWU_I/AAAAAAAAAMc/AniOr0XrI7Q/s1600/th_topgreen.png

http://4.bp.blogspot.com/-yOC-Ypl2Wik/TsdOHAAGSBI/AAAAAAAAAME/XUx15wKZF6w/s1600/th_topblue.png
credit : nurulshabila.blogspot.com

84 comments:

I Am His Girlfriend said...

terima kasihh . saya ambil satu .

Nurhafizah Mohd Noor said...

@I Am His Girlfriend ok

adlah said...

Thanks kak! :)

naNA_ch0c said...

saya amik satu..~

Rina Alternative said...

adk amek button top nieyhh :)

Aisya Haikal ♥ said...

Dear,
I take one okay? And I've already credit to you. Thanks :)

Nyny said...

Thnx yew . I take one :]

pinklicious said...

nak satu!

Yoona said...

saya culik satu warna pink :D

◕‿◕ Nana Teng Teng ◕‿◕ said...

Ambik Satu :)

Huda Abdullah said...

ambik satu ye..:)

Achik Mumui said...

lawa !! saya ambik satu ye , thankz .

zee zah said...

amik satu. thank you :D

SarahQistina ❤ said...

thank KYU very much Sis :)
I'll take one .

Shakina Masdar said...

saya amik satu.. thanks :)

nurnajihah zakaria said...

Amik satu top button. Thanks :)

Cik Nad A.J said...

minta izin guna yg kaler kelabu tu ye.. ;)

Nattilia Farhana said...

i take one :) thnk u so much pretty

justicE indicat0rs said...

thanks for the tuto. i take the freebies one :)

Fatin Nabila said...

amek satu :)

siti suhaila said...

bekenan ! ambik 1 tq ^^

eeniemenie_donut said...

ambik satu ye . terima kasih :)

Lissa. said...

Kenapa kat center pulak eh? nak kat tepii

Nurhafizah Mohd Noor said...

@Lissa. nk ubah dkt mne2 pon xpe

ciecie ! said...

nad amekk 1 ehh ,

miss sparkling said...

thx 4 this. amek satu! ngeehehe~

Mira Fairy said...

Saya amik satu,,,warna pink ok?

KKwangie ♥ said...

Thanks a lot ! amik satu :}

diari cyra said...

thanks, saya amik satu ehh. ;)

Awanis Muridan said...

sy amek 1 eh! ^^

Farah :) said...

thanks baby . amek satu <3

amirahyusoff said...

ct ambil satu :D

Nana Soffiya said...

amik satu kayyy .

Nur Alissa Syamira said...

amik satu kak~ :D

Anis Solihin said...

saya amik satu :) thanks

afiqah azmuri said...

thanks ! amek stu tau

♬ HAJAR ♬ said...

thanks the tuto..
=)

Ezza Hanis Farahain said...

sy ambik stu :)

♥ Scha Razali ♥ said...

ambik satu ye :)

aliya syafiqah said...

ambik satu eh ? thngs ^^

Nurul Izzati Azhar said...

Ambik satu eh kak ? Terima kasih :)

Fatin Yusrina said...

nurhafizah..ambil satu

Anis Hayati said...

akak saya nak yg wrne pink tu
btw thanks for this tutor :)

♥xAmYx♥ said...

akQ . Sya Ambek Satu (:

Little Superstar said...

ambil satu :D warna grey
thanks you :D

Anonymous said...

amik satu

Miera Liyana said...

thanks.comel.i pick one :)

Nur Nazihah said...

amik satu . tQ ;)

Anonymous said...

Saya ambik background dan yang ni ye~ :) Thanks unnie!

Izaa said...

tenkiu :)
saya amik satu aa ^^

pyqa said...

thanks for the tuto

aiyinsuka said...

hi , saya ambek satu yee :)

MylaUnly said...

thanks kak

YayaIliya said...

Amik satu :) Thanks for the tuto :]

Nurul Anis Suraya said...

saye amek satu

starjeremy said...

ambik satu :D Semuanya comei2 <3

una said...

ambik jgak cute 2...kaler pink..tq

ayie_kecik said...

thanks . rembat satu . wrne biru :)

Mieyka ♥ said...

saya ambil satu warne pink :)

miza kimbum said...

thanks :)

nur adilah said...

ila ambik taw :) tengs^^

ainatt ainott said...

ambil satu k . tengss .

152 said...

minta izin ambil tuto ye . thanks .

Dinda said...

Izin ambil satu ya kak ^^

Me, My friends ^^ said...

makasih kak :) aku ambil satu yaa..

wieya_bluewhite said...

amek satu eak :D

Adan said...

thanks for the tutorial! jgn lupa belogwalking kat belog saye yer!

nurelfatin said...

thanks (; ambik satu ya .

syazwanie said...

kaq ambik satu :) tahzz for thiss tuto ;* emmoahhhhhh

Ifa Atikah said...

thanks...saya amik satu ye..

Rizka said...

Thank you. Aku ambil satu ya :)

Ku JiHa said...
This comment has been removed by the author.
Ku JiHa said...

hye... cantik top awk.. sy ambil 1 ye :)

Budak Load-ing~ said...

amek satu ya~

Farah said...

sy ambil satu top button ye :)

hAnNY sToWiE said...

saye ambik satu.

Sootus Yamada said...

amik satu ye :)

Dura said...

sy amik satu tau . thanksss tapi cmne nak ubah kedudukan dy eh ?

yan shamba said...

sis,amik satu ye dear..thanks :)

Ieta Mat Saad said...

tERIMA KASih... sy ambil yg warna hijau

eiyda zana said...

kak... kalo x da kod nih? > ]]>

Aishah Hussain said...

saya ambik satu, thanks :D

IraAzman said...

saya amik satu ye :)

Aienienka Peter said...

minta izin amek satu.. :D