MEMBUAT TOMBOL BACK TO TOP PADA BLOG ~ Software-Zet

Assalamualaikum...

Membuat tombol Back To Top sangat bermafaat bagi seorang pengunjung, tombol ini berfungsi untuk mempercepat scrolling sehingga dapat kembali kebagian atas sebuah situs hanya dengan sekali klik. Tombol ini biasanya terletak dibagian pojok kanan bawah.

Oke langsung saja ke tahap pemasangannya.
Langkah-langkah membuat tombol back to top.

1.Login ke akun Blog anda.

2.Pilih menu “Tata letak”.

3.Pilih “Tambah gadget” (pilih widget yang paling bawah, agar tidak mengganggu widget yang lain).

4.Pilih Widget “HTML/Javascript”.
Lalu biarkan Judul tetap kosong, dan isikan Konten dengan kode dibawah,

<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={

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},

controlHTML: '<img src="ganti dengan URL gambar anda" />',

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>

Keterangan:
Perhatikan script berwarna biru! jika anda telah menggunakan Jquery pada Blog anda sebelumnya, maka hapus script tersebut agar tidak bentrok (untuk memeriksa bahwa anda telah menggunakannya atau belum silakan pilih menu template > edit html > CTRL+F temukan kode "jquery" (letaknya diantara kode <head>....</head>).
Sekarang lihat tulisan "ganti dengan URL image anda". Jika anda memiliki gambar yang bisa digunakan silakan masukan URL-nya, tapi jika anda belum memiliki gambarnya, anda bisa menggunakan salah satu gambar yang ada dibawah,

5.Jika sudah klik “Simpan”.

Selesai, sekarang lihat perubahan yang terjadi di Blog anda.

Sekian

Wassalam...

MEMBUAT TOMBOL BACK TO TOP PADA BLOG

Related Post