The Baddest Female
Ssup GIZIBE(s) . Ira for short. Others call me SOOYOUNG because I'm so wild and young. It's not music if you don't have a SWAG.
Sing-A-Song
Memories My Husband
Annyeong VIP(s) . Jiyong for short. I call him Jiyong oppa dan he call me VIP ;)
REQUEST TUTORIAL ONLY
Credits Template by : Farah Dini Basecodes by : Nurul AtiQah Edited by : Syakirah Aliya Others: ♥♥♥ ♦---------------------------------------♦ Copyright© by Farah Dini 2012 ♦---------------------------------------♦
| [Tutorial] Buat Jquery TOP Button sendiri
Assalamualaikum! Hah! Annoying tak GIF kat atas tu? Sakit betul mataku! -.-
Hah, SEKARANG ni Ira nak ajar macam mana nak buat Jquery TOP Button sendiri.
Hah~ Benda2 yang korang perlu ada ialah Photoshop CS3/4/5.
Hah, ramai yang kalau nampak photoshop je terus berambus kan kan kan?
Alaaaaaaaah tengok lah dulu :( Kacang je ni!
Korang bukak Photoshop yang jadi pilihan hati korang tu,
Korang pilih lah gambar yang korang nak jadikan gambar TOP button tu.
Ira akan pilih gambar TOP sempena nak naik ke TOP kan? :p.
Ok, lepas tu tengok Ira buat apa! (Ira guna CS4)
Lepas tu, tekan Save.
HAH! Masih panjang lagi...
Korang pergi dekat account photobucket korang,
korang upload gambar yang korang dah susah-payah edit tadi.
Lepas tu, korang pergi kat template blog korang,
Korang press ctrl+f dan cari code ni
<head>
Kemudian, korang copy code ni pulak
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type='text/javascript' language='Javascript'>var scrolltotop={//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},controlHTML: '<img src="URL IMG"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corneranchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({opacity:0}) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : falseif (this.state.shouldvisible && !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}else if (this.state.shouldvisible==false && this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function($){var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>').css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}).attr({title:"Let's Fly High !"}).click(function(){mainobj.scrollup(); return false}).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script>
Lepas tu paste kat bawah code <head>
Blue: Gantikan dengan URL top button
"Macam mana nak cari TOP button?"
Kan Ira dah suruh upload kat photobucket korang kan, korang buat macam gambar kat bawah ni:
Ira ucapkan SELAMAT MENCUBA ^^
|