Khamis, 13 Oktober 2011

JQuezy Top Button

Assalamualaikum...sy nak share tutorial untuk awk semua...iaitu scroll top button...awk semua tahu tak apa tu scroll top tu button..nk tahu awk cuba bt dulu ok...Let's do it.




1. Dashbord > Design > Edit HTML

2. CTRL + F search kod

</body>

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

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

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 

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



Tiada ulasan:

Catat Ulasan

Thank you sebab datang blog saya.