menjelaskan bagaimana Cara Membuat Tombol Kembali Keatas / Back To Top ke blog anda sekalian sebelumnya fungsi ini sangatlah simple dimana ketika anda menggeser kursor anda kebawah ketika membaca artikel yang memanjang kebawah dari blog maka akan secara otomatis tombol Kembali Keatas / Back To Top akan muncul dan ketika diklick secara otomatis akan kembali keatas, begitulah fungsi dari tombol kembali keatas / back to top akan tetapi dilain hal ketika blog atau artikel bacaannya tidak terlalu panjang maka tombol back to top / kembali keatas tidak akan muncul dikarenakan fungsi javascript ini tidak berlaku untuk artikel yang terlalu pendek atau halaman blog yang pendek, baiklah kita lanjut cara memasangkan tombol kembali keatas ini kedalam blog anda :1. Log in ke Blogger / Blog anda sendiri
2. Klick Tata Letak
3. Tambahkan Gadget baru dan pilih HTML / Javascript
4. Masukan code dibawah ini kedalam HTML / Javascript yang sudah anda tambahkan tadi :
Kode script I - Cara Membuat Tombol Back To Top Efek Scroll Lembut5. Setelah itu klick tombol Save Template dan lihat hasilnya
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ifTprOxstAGzHH5zwA6T-r0bDPKLE3rT0FlUDDNx23PzEuueUnu3qdRXThcZiFf4mlY50X0Lt5NdobI0IFjkTsMjVYgHDDH_eNku6CREEjYALm1JRlbifqH3knEDxFXhyphenhyphenj81iGhg43s/s1600/TO-TOP.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var 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 exists
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 //not IE or IE7+ browsers in standards mode
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()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Kode script II - Cara Membuat Tombol Back To Top Efek Scroll Cepat<br /><script type="text/javascript">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* Republish by http://sahabatblogger77.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var 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 exists
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 //not IE or IE7+ browsers in standards mode
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()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Keterangan Code yang berwarna merah bisa anda ganti dengan kode gambar dibawah ini sesuai kesuakaan anda sekalian :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxkqWGYYu5KB5NQWXeuRadPerSA8IsA2-DU02eXHhjJhVSw4-mNT-1R1s-LbxSgYzdYTtqRXVHbvfyc3-JgG6PLxyuD40PHow6-pFGmh_59WrY5LmUorKUafsG1bcCGgcILg_91Ljw48/s1600/back+to+top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmjUXPZSTg7FWAxwBOAIESttHqcpR0nxIVcC98TjrlGbf7t7-AWDjbZUWxHX2XDvJYwDKNobV8fjuhKtt2wKCD7GajewD-EGuRPAqTo-qLO0WSnweaN0a77EYxS3vPJk55ZHVAUC2Ci2Q/s1600/back-to-top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcdq6KdvsiwlXP5SZN80PVCTF1YN-W-w_yVaxGrzAIHQZrA6QpXmBov3sLbhvKmEIytaJtndSPvSLF_tZI3u3WDT5j1Jr9Q-eSiGsF-MidZ7BULrPU1aqn7-2oleUxB1SkW4GEKh8p41s/s1600/index+copy.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3-75fS9Kfoxd8UovpzgWgQtWXXhAgs68WJChIPkS3dW9VLmCHPPFuyXDY0v9CzIPj7HopnJlMzpa-pPLkcW0ifL1H6OrD7ElgmwWojWoN0vzBKeh5Fl3kogsQhpmFtQK53R0gbJ9NhE/s1600/kopi+copy.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyMMbJh1CrhA_IywJTdrvFosw1FEiGxHlNnbjJlWRYrSyyZ7vDE5nTintVGp__bM-Nbkm9Qx2QLs2EDTUGq39rk242gxbg9WQtMxustbON1puDo273nkttPSTYdxNO2S0OC4EklzY3z8s/s1600/siptop+copy.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo-YRSq_a3gxPlI2izqMwiniiouQE6ea6o2hWluXfbE02psvAmpzh-sWfgH9QeOEu_5iFCWqMgihy01FYw3QX_sd3_wq8aG4KGJUVjntyflyc1GRLi6f8rHhcYlO3Gh5MHHgoc3Ui9rWU/s1600/TOP1.png
Silahkan pilih gambar sesuai yang diinginkan dan tempelkan kode gambar tersebut kedalam code yang berwarna merah, sekian saja semoga bermanfaat dan lebih bagus lagi blognya !
Jangan lupa mampir ke artikel menarik lainnya hanya di http://flasmaweb.blogspot.com/
