Cara Pasang Tombol Back To Top Di Blog

Diposting pada
Cara Pasang Tombol Back To Top Di Blog

Cara Pasang Tombol Back To Top Di Blog, Tombol ini sangat cocok blogger yang blognya lebih 200 kata. Serta sangat berguna bagi pengunjung untuk kembali ke atas tanpa repot scroll mouse.

Sering juga kita dapati tombol ini pada situs – situs modern seperti situs berita hampir semua negara di dunia.

Saya akan bagikan cara pasang dengan cara mudah serta ringan agar tidak mengganggu tingkat responsive pada blog anda.

   Baca Juga:

Berikut ini Cara Pasang Tombol Back To Top Di Blog seperti halnya seperti situs saya kali ini. Cara pasangnya sangatlah mudah:

1. Pada menu Dashboard Blogger pilih Template > Edit HTML
2. Copy Paste kode dibawah ini tepat diatas kode letakkan tulisan disini </body>.

<script type="text/javascript" >//<![CDATA[
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.gif" alt="back to top"/>',
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($){

3. Simpan. Dan lihatlah.

Kode berwarna Merah ialah link gambar panah yang kita gunakan, apabila anda ingin merubahnya silahkan cari gambar di google terus copy paste pada link warna merah diatas.

Pastikan dalam template anda sudah terpasang kode jQuery seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

Demikianlah artikel Cara Pasang Tombol Back To Top Di Blog ini, semoga bermanfaat dan berguna. Kalau bingung cara pasang silahkan komentar dibawah.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *