Membuat tombol kembali keatas (back to top) pada blog dengan menggunakan kode HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini adalah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah menggunakan mouse untuk keatas.
Memasang Tombol Kembali ke Atas
Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) kode berikut:</head>
1. Membuat Tombol Kembali ke Atas dengan Efek Halus
Langkah 1. Letakkan kode berikut diatas </head><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
Langkah 2. Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Masukkan kode berikut di dalamnya.
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.png'/></div>
2. Membuat Tombol Kembali ke Atas dengan Efek Memantul
Penjelasan dari efek memantul ini adalah ketika tombol back to top di klik maka layar akan terlihat memantul sesaat layaknya seperti bola.Langkah 1. Letakkan kode berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
Langkah 2. Lihat ke Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.png'/></div>
3. Membuat Tombol Kembali ke Atas dengan Efek Fading
Penjelasan dari efek fading ini adalah ketika tombol di klik maka visibilitas dari objek akan secara perlahan muncul. Biasa pada editing video kita mengenal fade in dan fade out.Langkah 1. Letakkan kode berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Langkah 2. Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L0CQ4rJkukOuBYFPHiC71Q2OqMAw3uFTt0hKit5hNbWlx4LsIqje6_H-A7HE_lherSugrinAionz3opcun9yM5lMVclKQNWWGwIgO9D8OKn8q9Tm7kky4EAW36fjuf_bQ9S9yQ-XPkrd/s1600/arrow-up_basic_blue.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 //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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Catatan: Text Merah adalah gambar tombol yang dapat anda ganti sesuai keinginan.
Text Biru adalah kode jQuery, cukup anda tambahkan 1 kali apabila menggunakannya.
Tips: Anda dapat mengkompres kode diatas sebelum diaplikasikan pada template blog.
Selamat Mencoba..
Komentar
Posting Komentar