Menambahkan Tombol Kembali Ke Atas di Blog

Ketika membuat postingan/artikel blog kita sering menuliskan alinea yang begitu banyak sehingga tampilan blog menjadi panjang ke bawah. Pengunjung blog yang telah selesai membaca artikel tersebut sering ingin kembali mengakses menu navigasi yang biasanya berada di bagian atas blog. Secara manual pengunjung perlu menscroll mouse mereka untuk kembali ke halaman atas, hal tersebut mungkin terlalu lama dan menyusahkan. Guna mempermudah pengunjung dalam mengakses halaman blog maka salah satunya dengan menambahkan tombol "kembali ke atas".

Menambahkan Tombol Kembali ke Atas di Blog

Fungsi tombol ini yaitu ketika di klik maka secara otomotis akan mengembalikan tampilan layar ke bagian atas blog. Fungsi tombol "kembali ke atas" ini sebenarnya sama persis fungsinya dengan tombol home pada keyboard, namun nampaknya masih jarang orang yang menekan tombol home untuk kembali. Lalu sekarang bagaimana cara membuat/memasang tombol "kembali ke atas" pada blog?

Berikut ini adalah beberapa langkah mudah untuk menambahkan tombol kembali ke atas di blog:

1. Buka blogger.com dan login ke blog anda.

2. Pilih Tata Letak (Layout) blog.

3. Pilih Tambahkan Gadget (Add Gadget) >> HTML/JavaScript.

4. Salin dan tempelkan kode script di bawah ini.

<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/AVvXsEhNAQzZPv0iQJqs_SrvokxZNqbGXNlsa126Nz4maBJY7JMBTebnD6Wnumr_JWqHbc4_nxyga2gqiQF4ylAEri7FTM2WwoHeHW164nFPKkys95pUUgY5qCUbNtNUwf6CpqpuzXUIIHsAO1il/s1600/navigate-up-icon.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:'Kembali ke Atas'}) .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>

Keterangan: 
Untuk mengganti tampilan dari tombol, anda cukup mengganti URL di bawah ini dengan URL Anda.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNAQzZPv0iQJqs_SrvokxZNqbGXNlsa126Nz4maBJY7JMBTebnD6Wnumr_JWqHbc4_nxyga2gqiQF4ylAEri7FTM2WwoHeHW164nFPKkys95pUUgY5qCUbNtNUwf6CpqpuzXUIIHsAO1il/s1600/navigate-up-icon.png

5. Klik Simpan (Save) >> Simpan Setelan untuk menampilkannya pada blog.

Apabila berhasil maka tombol akan tampil di pojok kanan bawah blog dan saat di klik maka blog akan kembali ke halaman paling atas.

Diperbarui pada 20 Januari 2017.