Tuesday 25 December 2012

TUTORIAL : Cara Letak Scroll Back Jquery Top Button (LIKE ME)

Assalamualaikum w.b.t. Hari nie, saya nak share cara letak jquery top button dalam blog korang. Nak tengok contoh, just klik button FLY yang ada kat bawah belah kanan blog ni. ^^. Satu lagi, tutor nie hanya untuk pengguna template designer sahaja! Jom kita mula.

1. Dashboard > Template > Edit HTML > Tick Expad Widgets

2. Tekan F3 dan cari kod </body>

3. Copy kod di bawah nie :
<a href='#' id='toTop'><img src='URL IMG?t=1292762029' style='border:0;'/></a>
*warna merah tu, gantikan dengan URL Top Button.

4. Lepas tu, pastekan di atas kod </body> tadi.

5. Then, korang cari pulak kod ]]></b:skin>

6. Copy kod di bawah :
/* 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. Pastekan di atas kod ]]></b:skin>

8. Next, cari kod nie </head>

9. Copy kod di bawah :
 <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>
10. Lepas tu, pastekan di atas kod </head> tadi.

11. Preview and SAVE!

12. Kalau nak freebies TOP BUTTON, korang boleh pergi ke SINI. Kena mintak izin dulu yup.

No comments:

Post a Comment