Hey sob? kali ini saya akan memberikan cara bagimana membuat sebuah widget tombol back to top pada blogger atau tombol panah ke atas agar setiap kita klik tombol tersebut kita dapat kembali ke pada halaman teratas pada sebuah blog atau website. Mungkin bagi sebagian blogger tidak menggunakan fitur ini namun tidak ada salahnya untuk mencoba dan tombol ini juag dapat 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 adalah sebuah gadget yang berbentuk tombol panah atas yang jika di klik akan membawa viewer ke tampilan paling atas sebuah halaman blog, oke bagi anda yang ingin mencoba gadget fotur yang satu ini bisa lihat cara mudah berikut ini.
Cara Mudah Membuat Tombol Back to Top
1. Login ke blogger anda.
2. Masuk ke "Tata Letak" dan klik "Tambah Gadget".
3. Pilih menu "HTML/Javacript".
4. Copy code di bawah ini dan paste kan ke halaman "HTML/Javascript". Judul di kosongkan saja.
<!-- Start Gadget -->
<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/AVvXsEgYhAyQig2nQGireAyCKhWwKiUoBIQctpIaJn6lVGISZ_gcAcu7Tc1xc2i6xQX-UZqQH8rdV9s5hL9oaRykakFDo9jNScMHZvQ3vvv5iXsCM-hhjwctfAjtC9Xo2aEeQglzvyXly4bMs8o/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 adalah gambar tombolnya, anda bisa ganti dengan gambar yang lain dengan mengganti link gambar tersebut.
Oke mudah kan untuk membuat fitur gadget tombol kembali keatas?
Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Membuat Tombol Back To Top pada Blogger" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.
Posting Komentar