Kadang-kadang jika anda mengunjungi sebuah situs website atau blog yang memiliki artikel panjang dan dibahas hingga detail, Anda akan malas untuk kembali ke post bagian header atau bagian atas.
Sebenernya banyak sekali cara agar tidak terjadi hal seperti itu, misalnya membuat scroll pada halaman postingan atau dengan hanya menambahkan sebuah tombol back to top di pojok blog. Yang akan saya bahas kali ini adalah bagaimana cara membuat tombol back to top di blog. Akan saya bahas 2 cara pembuatan, yang satu sederhana dan yang satunya lagi dengan efek jquery.
1. Back To Top Sederhana
Bagi anda yang tertarik untuk memasang tombol ini di blog, silahkan ikuti step-step berikut ini.
1. Login terlebih dahulu ke akun blogger anda
2. Masuk ke bagian layout / tata letak
3. Tambah gadget
4. Pilh add HTML / Java script
5. Lalu simpan kode dibawah ini
2. Masuk ke bagian layout / tata letak
3. Tambah gadget
4. Pilh add HTML / Java script
5. Lalu simpan kode dibawah ini
<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZRke7f2YLsv6EXhAObPB9_TsnSF1fleXRLRqRC3mu0mb8rBba5TqXFErjWd0F-VkLq6TOGYQ6xQAQKj65wpXrieOYDY1EkrXzipheOJBipS6xyChs2eULB0eeyIhD_N8JQ2OzWFzF3zC/s1600/navigate-up-icon.png'/></a>
*) kode yang berwarna biru ganti dengan kata-kata yang ingin ditampilkan
*) kode yang berwarna merah ganti dengan url gambar yang ingin ditampilkan
6. Klik "Save", dan selesai.
2. Back To Top dengan efek fade dan smooth
.png)
.png)
3. Save dan cek apakah widget back to top sudah terpasang dengan baik.
*) kode yang berwarna merah ganti dengan url gambar yang ingin ditampilkan
6. Klik "Save", dan selesai.
2. Back To Top dengan efek fade dan smooth
Langkah Pemasangan:
1. Buka Layout > add widget > add HTML/Javascript. Masukan kode dibawah ini dan simpan
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script><script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script><script type="text/javascript" > var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZRke7f2YLsv6EXhAObPB9_TsnSF1fleXRLRqRC3mu0mb8rBba5TqXFErjWd0F-VkLq6TOGYQ6xQAQKj65wpXrieOYDY1EkrXzipheOJBipS6xyChs2eULB0eeyIhD_N8JQ2OzWFzF3zC/s1600/navigate-up-icon.png" />',
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 :
- startline: Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100
- scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.
- scrollduration: kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).
- fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.
- offsetx: nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.
- offsety: nilai posisi y tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke atas. Default 5.
2. Modifikasi terpenting adalah pada URL gambar back to top, masukkan URL gambar anda menggantikan teks berwarna merah diatas. Modifikasi tingkat lanjut (jika dibutuhkan) akan saya sampaikan di bagian akhir artikel. Untuk gambar back to top anda dapat mencari sendiri melalui Googling, atau bisa gunakan beberapa contoh berikut :
(save as/save image as, resize jika perlu, dan upload sendiri)
Important note:
- Jangan mencoba menambahkan script ke dalam template melalui HTML editor, karena akan terjadi kesalahan parsing, widget parsing dan template parsing Blogger berbeda.
Last Words
Jadi kesimpulannya, layaknya penyedia layanan jasa, jika kita merasa tidak nyaman kita akan pergi dan tidak akan kembali ke penyedia jasa tersebut. Jadi anda harus menyediakan pelayanan yang baik yang memudahkan pengunjung mengexplore blog anda, seperti menyediakan navigasi keatas atau kebawah. Sekian post tentang Cara Membuat Tombol Back To Top di Blog. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)
AD-BLOCKER DETECTED!
