Tombol
Back To Top adalah sebuah tombol yg berfungsi untuk mengembalikan posisi halaman web ke posisi paling atas dari halaman web tersebut dengan hanya sekali klik, tanpa harus menggulir scroll mouse berulang-ulang kali. Bagi pemilik blog, memasang tombol ini akan dapat memudahkan pengunjung dalam menelusuri blog kita, dan tentunya pemasangan tombol back to top ini juga tidak terlalu memberatkan loading web. Dan bagi kalian yg ingn menambahkan tombol back to top ini ke halaman web kalian, silahkan ikuti panduan berikut ini.
1. Log in ke dasbor blog kalian.
2. Pada menu "tata letak", tambahkan widget "HTML/javascript"
3. kosongkan judul widget, kemudian pastekan kode berikut ini.
<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:[2000, 2000]}, controlHTML: '<img src="Gambar Back To Top"/>', //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: 'Scroll Back To 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>
5. Kode yg berwarna merah, bisa kalian ubah nilainya dengan keterangan sebagai berikut.
keterangan :
-. Starline : Ukuran tinggi dalam pixel setelah halaman digulir kebawah, diamana tombol Back To Top akan muncul. Nilai defaultnya adalah 100.
-. Scrollto : Posisi tujuan tombol Back To Top setelah diklik, dihitung dari paling atas 0 artinya 0 pixel dari atas halaman.
-. Scrollduration : Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.Defaultnya adalah 1000 (1 detik)
-. Fadeduration : Kecepatan atau durasi fade, fade adalah gerakan muncul. yang pertama nilai Fade In dan yang kedua nilai Fade Out. Nilai defaultnya adalah 500 dan 100.
-. Offsetx : Posisi tombol Back To Top, semakin ditambah maka akan merapat kedalam. Defaultnya adalah 5.
-. Scroll Back To Top : Kata-kata yang muncul pada tombol apabila mouse melewati tombol Back To Top. Bisa dirubah dengan kata-kata yang diinginkan.
6. Setelah selesai silahkan simpan widget untuk menyelesaikan pemasangan tombol back to top.
Ikon tang dan obeng atau nama lainnya adalah tombol quickedit ini biasanya akan muncul pada sudut-sudut atau area pada setiap widget atau elemen blog. Menurut saya dampak positif dan negatif dari adanya tombol quickedit ini adalah 40:60, sisi positifnya memang benar ikon quickedit ini akan membantu kita dalam pengeditan suatu elemen blog tanpa harus masuk ke area dasbos, sehingga kita cukup meng klik tombol quickedit pada elemen/widget mana yg akan kita edit, tetapi pada sisi negatifnya akan berdampak pada pengunjung blog, karna apa ? karna kecuali sang admin blog, tombol quickedit ini tidak akan ada guna nya, yg ada hanya akan mengganggu sedikit struktur/tampilan dari blog itu sendiri. Untuk itu bagi kalian pada blogger yg ingin menghapus tombol quickedit ini, silahkan ikuti tutorial berikut ini.
.jpg)
.jpg)
.jpg)
