6 July 2011

Scroll Top Button

Photobucket
Hari ni nak buat tuto Scroll Top Button. Top Button ni cangginh sikit sebab dia lambat naik AKA ianya scroll sendri bila tekan. Kihah suka pakai :D

1. Dashbord > Design > Edit HTML
2. CTRL + F search kod

</body>



3. Copy kod kat bawah ni. Kemudian, pastekan dibawah kod </body> tadi :D

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

4. Ehhhh. If Previeww, Memang la tak naik lagi. Korang CTRL + F search kod ini pulak
 ]]></b:skin>
5. Pastekan kod ini DIATAS/SEBELUM  ]]></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 gamabr korang terpotong/tak nampak semua, Tukarkan 100px tu ok?
6. This is LAST STEP. CTRL+F Search kod ini pulak
</head>
7.Pastekan kod ini diatas kod </head> tadi

 <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>
 



8. Preview dulu, Kemudian. SAVE TEMPLATE

Senang kan? :p Ni ada sedikit FREEBIES TOP BUTTON from Kihah :D


http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON1.png
http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON3.png
 http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON4png.png
http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON2.png 
Credit
ANIS DIYANA

Comment juka guna ^^

58 comments:

  1. saya ambek satu tau :) thanks kihah

    ReplyDelete
  2. Ieqa ambil satu tauu :D

    ReplyDelete
  3. thanks dear, but I;m not using your freebies ;)

    ReplyDelete
  4. akak amek satu eh adek :) thanks :)

    ReplyDelete
  5. ambil satu yeh (: kaseh

    ReplyDelete
  6. menjadi , thanks kihah

    ReplyDelete
  7. cantik! Waanee ambik satu yeer (:

    ReplyDelete
  8. thanks, i like the Eiffel tower <3

    ReplyDelete
  9. Kihah,Saya Amik Satu K!N , Thanks 4 the Tuto...Saya Cari Sangat Tuto nie ! Thanks...

    ReplyDelete
  10. saye amek satu taw ! thankss very2 much !btw , gud luck for UPSR ! wat elok ea !

    ReplyDelete
  11. sy ambek satu ehh thanks beghi muchh :)

    ReplyDelete
  12. Hai Kihah, saya ada ambik satu yg Paris tu. Thanks :)

    ReplyDelete

Your words defines you