Cara membuat tombol back to top pada blog dengan mudah, Salam, pada kali ini saya ingin berbagi kepada anda-anda semua bagaimana sih caranya membuat tombol back to top pada blog. Sebelumnya apa itu tombol back to top? Tombol back to top ialah tombol yang berfungsi agar kita bisa langsung menuju halaman paling atas dengan sekali klik. Tentu ini akan mempermudah para pengunjung blog dan juga pemilik blog itu sendiri. Back to top sendiri jika diartikan ke bahasa Indonesia adalah 'kembali ke atas', sehingga tombol ini sering juga dikenal dengan nama tombol kembali ke atas. O.k kita kembali ke tema kita kali ini yaitu Cara membuat tombol back to top pada blog dengan mudah.
Tombol back to top itu bermacam-macam, tidak hanya ada satu jenis. Tapi yang akan saya bagi ialah tombol back to top efek scroll lembut/halus dan efek scroll cepat. Ini dia caranya,
A. Tombol back to top efek scroll lembut/halus
1. Log in ke akun blogger kalian.
2. Masuk ke menu tata letak.
3. Pilih tambahkan gadget.
4. Pilih HTML/JavaScript.
5. Copy kode di bawah ini, lalu paste pada kotak HTML/JavaScript.
<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/AVvXsEjnF0AwThIMaCk5ZqMX6358WYs2ziMfyryhWryPWIu0vJiMBm8J-41VcM5PS8u0J-p9bc8K-UPQDLdVZ_NVLXdDOw-SP2UT80vhZzNQsMOh3HeVgvcgoz6W0pnRZ8xlF8CpIsIsXUnB8Sc/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>
B. Tombol back to top efek scroll cepat
Caranya persis seperti pada tombol back to top efek scroll halus/lembut, bedanya hanya pada javascriptnya. Copy kode java script di bawah ini, kemudian paste pada kotak HTML/JavaScript.
<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://nurulhedayat.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>
Untuk tampilan tombol back to top, bisa kalian pilih sesuai selera kalian. Yakni dengan mengganti tulisan berwarna merah dengan kode di bawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyu6PYCHPBhbAq3Z59GD2Y0zrUJrjZHMj1N7rz99X9CM1yl-QgSwVdK0DPdPmUapNFm7Q6Ga9ltOkN3OTUN5jT7-TOdL1_gmJn_wSqtl_cjBIOnUq-xhf9RPPI3RN_7ciFVIgco4RoYRxu/s1600/back+to+top10.gif
http://i1198.photobucket.com/albums/aa452/Lutfi14/back-to-top.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznvdPf3CS_po97sWZ9BgF49S-Cpp_zLsP4lIBiYkurKpxYWWflBCtDiQhLxkVn1R-bBu5XMGCZsGfZcSU5c_Q3YUvV5QausELwf2US4DcXIwy9437EcwEkPslIBBX2xTsZwZzA6-Ek25n/s1600/back+to+top15.png
Bagaimana? Mudahkan caranya? Sebenarnya, masih banyak pilihan gambar tombol back to top, tapi hanya
beberapa yang saya bagi. Kalian bisa mencarinya pada sumber-sumber lain. Semoga tulisan saya ini bermanfaat bagi kalian semua ya. Terima kasih sudah berkunjung ke blog saya yang sederhana ini. Selamat mencoba dan semoga sukses.