TUTORIAL : Jquery top button

heyy ,salam :) nampak tak top button una tuhh ? bile scroll ke bawah baru nampak then bile tekan nati dia tergolek-golek nail ke atas ! hahaha :) chomel kann ? actually una pernah buat , then una check tengok eihh hilang rupanya coding una tuh , so nie una buat baru . jadi una nak kongsi ngan korunk , lets start :

first peergi ke Dashboard > Design > Edit HTML *tick expand widget and tekan ctrl+F and search code nie.

</body>

then copy code kat bawah nie dan pastekan sebelum code di atas .

<a href='#' id='toTop'><center>YOUR WORDS<span class='Apple-style-span' style='color: rgb(255, 204, 204); '/></center><img src='ICON CHOMEL/TOP BUTTON?t=1292762029' style='border:0;'/></a>

then korunk search pulak code nie .

]]></b:skin>

dah tuh korunk copy code bawah nie sebelum code kat atas nie .

/* 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; }

then , next step search code yang last nie .

</head> 

dah sudah , korunk copy code yang kat bawah nie , sebelum code kat atas nie kayy ?


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><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 &quot;Scroll to Top&quot; 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(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
$(function() { $(&quot;#toTop&quot;).scrollToTop(); }); 
</script>

now , dah siap pun top button korunk :) try preview dan scroll :) kalau dah puas hati korunk save lahh ^^ chomel kann ?

 
nota kecil: 
tuto nie una ade tambah sikit ^^ una harap korunk boleh faham dan berjaya buat ^^ good luck kayy ? 
credit : anis nutella 

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

36 comments:

  1. unaaaaaaa, icon comel / top button tuu nak cari mana? :(

    ReplyDelete
  2. boleh cari dekat link nie :

    http://babydoll.nu/tagged/smilies

    ReplyDelete
  3. kak una ! yg icon comel/top button tu bole tukar gamba kan ? nk ltak URL gamba tu ke ?

    ReplyDelete
  4. aarhhhggg !!! tak jadik pown,...cube akk tgok blog adek http://muhaimin-amat.blogspot.com
    cube akk scroll ke bawah sekali ! dkat bawah "Powered by Blogger" knp bende2 tu ad kat situ ?!?!?!

    ReplyDelete
  5. awat benda tu letak kat bawah center bukan kat hujung ?
    aiseh , konpius la kak una -.-'

    ReplyDelete
  6. kenape saya buat tak jadi? yg icon chomel tu?

    ReplyDelete
  7. Kak, x paham la, yg atas tu sblum la, x phm la, ikut je susunan akak tlis tu,ye ?

    ReplyDelete
  8. Wah , panjangnya kod ! tapi , saye boleh buad . freebies saye amik satu ea. Yg flyhigh tu . malas nak komen kat entry tu . sekaligus je ea?

    ReplyDelete
  9. hoho ! dah 2 kali buat jadi ! likes it very much

    ReplyDelete
  10. huhu . menjadi ! thanks . come22222 :):)

    ReplyDelete
  11. saya ambil yang warna pink! cantik sangat. thanks!

    ReplyDelete
  12. terima kasih...
    Saya amek dgn freebiesnye sekali yek..
    =)

    ReplyDelete
  13. hye kak, tuto ni jadi....kali pertama sy jejak di sini...follow balik blog sy k !!!

    http://vaishuonlinediary.blogspot.com/

    ReplyDelete
  14. kak una, kenapa bende tuh dekat bawah sekali, bukan dekat tepi?

    ReplyDelete
  15. akak..boleh tak buat tuto yang akak tulis 'sebelum' tuh ada kotak pink yang cute tuh ..nama dya apa ek?

    ReplyDelete
  16. yeayy \^^/ dah jadik.. thanks :)

    ReplyDelete
  17. Assalamualaikum, terima kasih kak Una ^_^

    ReplyDelete

Assalammualaikum and Hye to all Blogger. Harap anda tidak mengeluarkan sebarang bahasa yang kasar ATAU keterlaluan untuk di baca. Ada apa-apa pertanyaan? Sila komen sini.. =TERIMA KASIH=