.♥.♥.♥. Assalamualaikum cinta .♥.♥.♥.
Apa itu Scroll To Top (Back To Top)?
Back To Top nie fungsi dia adalah untuk memudahkan pelawat blog korang untuk naik ke semula atas bila baca atau tengok satu2 entry yang panjang berjela tu kan. Contohnya, bila klik dekat button scroll to top (yang bergambar cartoon and butterfly) tu automatik akan naik ke atas page tersebut, tak payah nak scroll naik ke atas...
Step 1 :
Layout > Add a Gadjet > HTML/JavaScript
Step 2 :
Copy code kat bawah nie.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script
type="text/javascript"
>/***********************************************
* Scroll To Top Control script- © Dynamic Drive
DHTML code library(www.dynamicdrive.com)* Modified
byNosa***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000,
fadeduration:[500, 100]},
controlHTML: '<img
src="URL IMAGE BUTTON SCROLL TO TOP" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto
: parseInt(this.setting.scrollto)
if (typeof dest=="string" &&
jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() -
this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() -
this.$control.height() - this.controlattrs.offsety
this.$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 : false
if (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=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat"
&& window.XMLHttpRequest
mainobj.$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:'Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest
&& mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword
+'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Step 3 :
Paste kan code yang telah di copy tadi di ruangan HTML/JavaScript .
Step 4 :
Gantikan
URL IMAGE BUTTON SCROLL TO TOP kepada image
yang korang suka. Just copy URL image yang korang suka dan paste kan di
URL IMAGE BUTTON SCROLL TO TOP.
Step 5 :
Then save and preview, tengok menjadi ke tak...
Dibawah nie n0sa ada letakkan tiga jenis button 'back to top' untuk korang pilih. Korang just copy url dan letakkan pada
url image button scroll to top.
http://i.imgur.com/g9Ohv9B.png
http://i.imgur.com/KTVWT3w.png
http://i.imgur.com/IGIzRyB.png
...step by step I walk on my self...
Doodle : Back To Top
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
