Hey sob? kali ini saya akan memperlihatkan cara bagimana menciptakan sebuah widget tombol back to top pada blogger atau tombol panah ke atas supaya setiap kita klik tombol tersebut kita sanggup kembali ke pada halaman teratas pada sebuah blog atau website. Mungkin bagi sebagian blogger tidak memakai fitur ini namun tidak ada salahnya untuk mencoba dan tombol ini juag sanggup mempermudah para pengunjung untuk kembali ketampilan atas tanpa harus scroll ke atas kembali.
Tombol Back To Top atau yang di artikan kedalam bahasa indonesia ialah Kembali ke Atas ialah sebuah gadget yang berbentuk tombol panah atas yang bila di klik akan membawa viewer ke tampilan paling atas sebuah halaman blog, sepakat bagi anda yang ingin mencoba gadget fotur yang satu ini sanggup lihat cara gampang berikut ini.
Cara Praktis Membuat Tombol Back to Top
1. Login ke blogger anda.
2. Masuk ke "Tata Letak" dan klik "Tambah Gadget".
3. Pilih hidangan "HTML/Javacript".
4. Copy code di bawah ini dan paste kan ke halaman "HTML/Javascript". Judul di kosongkan saja.
<!-- Start Gadget -->
<script type="text/j4vascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/j4vascript" >
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/AVvXsEh4OLI4neIP8PWlr-AFIp1fwmaszIOPfbKcHYOpdLV7-sIaqJWgh6pDlNTVkHjKL01Gp_2WywoIh1lfol2uMzlpnvOmQip4e7k3H89_9P_-4_nJnn9_WCqOesa8MAbGTJ6SQAB1f13r5Es/s400/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:'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>
<a href="www.blogsejutaumat.com"/>
<!-- End Gadget -->
5. Terakhir anda "Simpan" dan lihat hasilnya.
Screenshot :
Keterangan : Warna biru ialah gambar tombolnya, anda sanggup ganti dengan gambar yang lain dengan mengganti link gambar tersebut.
Oke gampang kan untuk menciptakan fitur gadget tombol kembali keatas?
Oke mungkin itu saja yang sanggup saya berikan mengenai artikel ini, semoga dengan apa yang sudah saya berikan ini sanggup bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapat isu serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan sanggup isi pada kolom komentar anda. Terimakasih.
Sumber http://www.blogsejutaumat.com/
