Tutorial : JQuery Top Button

Ana Myhusna | 19:16 | 0Comments |

Hai semua! Okay okay.. Ana sibuk meng-explore Ana punya template. And kalini, baru Ana dapat. Ana dah lama pakai JQuery Top Button nih.. Tu yang sampai dh lupa.. Beli, Ana menggodek-godek template Ana baru dapat.. Fuh! Berpeluh-peluh Ana meng-explore nih. Mama Ana ajar, kalau nak tahu sesuatu berkaitan internet kena explore! Hehehe.. Okay.. Taknak cakap banyak! Ana nak tunaikan permintaan Wani. Katanya, macam mana nak Ananak bagi top button tue hilang bila dah sampai atas. Ana rasa, maybe sebab Ana pakai JQuery kot.. So, baca dan fahami okay? Jom mula!

1. Dashboard - Template - Edit HTML
2. Tekan Ctrl+F and cari code ini
</body>
3. Lepastu, copy code yang Ana bagi ni dan pastekan sebelum code di atas. 
<a href='#' id='toTop'><center><span class='Apple-style-span' style='color: rgb(255, 204, 204); '/></center><img src='http://1.bp.blogspot.com/-MH6ovZd-x38/T4vksQUC9ZI/AAAAAAAAFwQ/yqvjryp4fUk/s1600/pink.png' style='border:0;'/></a>
4. Then, korang cari pula code ini
]]></b:skin>
5. Lepastu, copy code yang ni pula dan pastekan sebelum code yang korang cari tadi. 
/* 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;
}
6. Belum habis lagi yeaa.. Cari pula code yg nih
</head>
7. Copy code di bawah dan paste sebelum code yang korang cari tadi.
<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 "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>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-42926672-1', 'ana-myhusna-life.blogspot.com');
  ga('send', 'pageview');
</script>
 Done! Your JQuery top button is ready! Cer try preview.. Kalau puas hati, boleh save. Btw, code nie Ana copy paste jea dari temlate Ana.. Huhu.. Takda perubahan pun! Semoga berjaya okay.. Assalamualaikum! :D

No comments: