Cara Memasang Back To Top Tersembunyi Di Blog

Ketika kita memiliki postingan yang terlalu panjang dan navigasi blog berada di bagian atas, maka pengunjung akan sangat terbebani untuk menscroll blog kita untuk kembali keatas hal ini akan cukup berdampak pada bounce rate blog anda ( Baca Juga : Cara Menurunkan Bounce Rate Di Blog ). Pada widget back to top ini tombolnya tidak akan muncul langsung ke layar anda, melainkan tombol tersebut akan muncul ketika kita sudah sampai di bagian footer blog.

Agar anda bisa memahami lebih cepat dan tepat silahkan cek demo berikut

Demo

Cara Pemasangan

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak/layout
• Step 3  Buka tambahkan gadget
• Step 4  Pilih HTML/javascript
• Step 5  Copy kode berikut dan pastekan dalam kotak pada HTML/javascript tadi

<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="URLGAMBARANDA" />', //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>

• Step 6  back to top ini  berada di bawah kanan blog jika ingin mengubahnya silahkan ganti kode berwarna biru dengan left/right
• Step 7  Ubah tulisan " URLGAMBARANDA " dengan link url dari gambar-gambar berikut
• Step 8  Simpan ,dan lihat hasilnya 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSHhz_SWBjEblNH3R6GoAnIjAIYFmBVtzXyCcJTm-pR1tRscb_Y7V3tZNpx4JOdEZAyfweHCVqG_GN3jHOKh9_f5gOkNqvWJyAA0bwiLXxtNKdLL6WWnYVZNycrGz0zWC91dXinacSavo/s1600/back+to+top+biru.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgCn9nLi-V4zA6mJ2Ebh1f6ykEfy5iInz3NxiKWNyEHW8Xnfn-JlPw6L7a4XdL0yQ5JKuNBH2Yy9tUq1dJ8uFq1y0U5RO-Q9DXjSSKf7gUkJWIXu_u8nzi4RBs5M9so-HH95AyFi-vkk/s1600/back+to+top+hijau.jpg

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqqXM0WIEylv9oGP8yxWeSTvMj33SqzJMXfED_rEPSzZRSmKeMtIfjvnExXH7V8T_tKIvt5hdbz_BMqG6o96FlaoK6Pd7w47GU6A3ayG5-XaijAPf4ftetNLkO-BC2NjR3UiEjTHH2wl4/s1600/back+to+top+kecil.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD3HxoS5XJaQq-5bYXDAYjHsXeupFBbBJCGuSbe1Su095QgFUsI0fgSlbWVpp88cGU0NTzS7pe6Dbe-eMs4b21arTPOSegyRlOU6nLU05TxK6Rw5GdUvtmZ5oOssSg_T-rwpEdv3sS1zo/s1600/back+to+top+panah.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiXNXl7rIR0eIZY5jbXMnWvPoZZQ_2DAvK0G5jVTMNOAvhljm3QWUv74dnMvo8dHRZz5KUSj4QFQ3DjNPcwJx6P5wCvp_KEB0b84vraHTUURD2Q4UDcgsoBJ973jRwJi33XJAg2nhmhAo/s1600/back+to+top+tangan.jpg

oke sekian dari saya jika ada kesalahan url bisa langsung komen dan terimakasih kepada
sumber script