7 Design Fly Up Button (Back To Top) Dan Cara Memasangnya Pada Blog - SISHAWA DESIGN
test banner

Hot

28.2.17

7 Design Fly Up Button (Back To Top) Dan Cara Memasangnya Pada Blog

Ini adalah salah satu tombol yang sis suka. Bukan hanya kerana kehadirannya yang cukup membantu tetapi juga di sebabkan kita boleh design sendiri bentuknya mengikut kehendak yang kita suka. Cara nak pasangnya pun mudah saja.


Di dalam tutorial ini sis bukan saja akan berkongsi cara-cara untuk memasangnya pada blog malah sis juga akan berikan freebies Fly Up button yang ada dalam simpanan sis. Jangan risau semua design ni sis buat sendiri jadi awak boleh gunakan mana-mana design sepuas-puasnya tanpa sebarang rasa was-was.

Cara-cara untuk memasangnya...

1. Login ke akaun blogger >> Dashboard >> Layout >>  Add A Gadget >> Html/Javacript

2. Copy ke semua kod di bawah ini...
<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- &#169; Dynamic Drive DHTML code library(www.dynamicdrive.com)* Republish by Sis Hawa
***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://1.bp.blogspot.com/-xOBz897BOsI/WLSvTTTOCvI/AAAAAAAACPE/fNhvZeqw9LcQq70p-T3YobS-IyETZRLfwCLcB/s1600/BACK%2BTO%2BTOP.png" />',
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:'Scroll 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>

3. Paste ke semua code yang telah di copy tadi ke dalam kotak Html/Javacript.

4. Gantikan link yang sis highlightkan dengan warna merah dengan mana-mana link design fly up button yang telah sis sediakan di bawah ni.

https://1.bp.blogspot.com/-xOBz897BOsI/WLSvTTTOCvI/AAAAAAAACPE/fNhvZeqw9LcQq70p-T3YobS-IyETZRLfwCLcB/s1600/BACK%2BTO%2BTOP.png


https://2.bp.blogspot.com/-eOkOkONrunM/WLVwoQ9I0-I/AAAAAAAACRI/CWF8lg16EzYwzSgWV9bhSalRzge1awiLQCLcB/s1600/fly%2Bup%2Bbutton1.png


https://4.bp.blogspot.com/-fapkbv-ugOM/WLVwsKDJPdI/AAAAAAAACRM/eF3dPU_zaR4YzzO8x0p9CfPXt6rD5QbygCLcB/s1600/fly%2Bup%2Bbutton.png


https://2.bp.blogspot.com/-j3-y2LUrFGU/WLVwvN0XoTI/AAAAAAAACRQ/GtYWVF2mhnYSSFbJsmehjXuofdPzMdFZwCLcB/s1600/FLY%2BUP%2BBUTTON%2B2.png


https://1.bp.blogspot.com/-3mzWQy4t4fs/WLVy6Fo4rCI/AAAAAAAACRk/AMhCbsyblwEshfTcEGQQqFXSKakr_QUwACLcB/s1600/FLY%2BUP1.png


https://3.bp.blogspot.com/-Pua_ssICoyY/WLWEFqdLgkI/AAAAAAAACR0/9A3CrjUhZQspFe8qcDppHloqp71Rcw7twCLcB/s1600/FLY%2BUP1.png


https://1.bp.blogspot.com/-500VDuDZfrk/WLWFVz3EE3I/AAAAAAAACSA/KCcuUhp4r2onXUijyj-udRgYc0Y8O54-QCLcB/s1600/FLY%2BUP1.png


Macamana? Suka tak? Kalau suka komen lah sikit.... :D

2 comments: