Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger

Sudah banyak teman blogger yang menanyakan wacana tombol back to top (tombol kembali ke atas) Blogger yang saya gunakan, sebab berbeda dengan tombol yang sebelumnya sudah saya bagi. Jika yang lama hanya menggunakan fungsi hashtag pada url HTML (#top atau #), maka yang saya gunakan menggunakan fungsi javascript dan jquery. Tapi saya sempat agak resah untuk mengembangkan sebab script yang saya gunakan saya host secara tersendiri di server lain dan telah mengalami modifikasi penuh sehingga hanya cocok untuk template saya. Jika saya memberikannya secara mentah maka sangat sulit untuk dimodifikasi sesuai impian sobat. Padahal setiap tampilan blog berbeda, efek yang diinginkan teman pada tombol scroll to top mungkin juga berbeda, dan yang terpenting yaitu memasang tombol dengan mudah tanpa perlu melaksanakan modifikasi pada javascript menyerupai yang saya lakukan.

So, pada prosesnya, saya telah menemukan script back/scroll to top yang jauh lebih cocok, buatan widget/gadget editor), sehingga modifikasi dapat dilakukan sewaktu-waktu tanpa harus mengupload dan meng-host file javascript ke server lain.

Apa yang Berbeda?

Telah banyak tutorial blog yang mengembangkan script scroll/back to top (kembali ke atas), yang berbeda pada script back to top pada tutorial ini adalah:

1. Perampingan script biar tidak memperberat loading blog

2. Pengurangan, perampingan, dan modifikasi adegan script biar sesuai dengan Blogger.

3. Efek fading dan efek smooth sekaligus (dengan santunan jquery)

4. Panduan modifikasi penuh pada script untuk menampilkan efek yang personal, biar sesuai dengan desain blog dan keinginan.

5. Pemasangan melalui widget/gadget (layout editor).

Cara Buat dan Pasang Tombol Back To Top dengan Efek Fading & Smooth Blogger

Script ini memiliki dua bagian, yang pertama yaitu script fungsi back to top itu sendiri, dan yang kedua script jquery untuk membantu efek smooth dan fading (in and out).

Jquery yaitu script yang sudah sangat lazim digunakan, sehingga apabila blog anda sudah menggunakan jquery, tidak perlu lagi menambahkannya. Cek apakah blog anda sudah menggunakan jquery atau belum, masuk ke Edit HTML lalu search (CTRL+F) dengan keyword jquery, letaknya ada di dalam elemen head (antara <head> dan </head>). Jika sudah ada, tidak perlu lagi menambahkan script jquery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >



/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Advanced modification by buka-rahasia.blogspot.com

* This notice MUST stay intact for legal use

* Visit Project Page at http://www.dynamicdrive.com for full source code

***********************************************/

var scrolltotop={

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

controlHTML: '<img src="URL Gambar 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($){

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 terang biar 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>

Langkah Pemasangan:
1. Copy code script di atas
2. Jika sudah melaksanakan pengecekan jquery dan ternyata sudah ada (note: minimal versi jquery yang mampu digunakan yaitu 1.3.0), hapus script jquery di adegan atas, yaitu:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

3. Modifikasi terpenting yaitu pada URL gambar back to top, masukkan URL gambar anda menggantikan teks URL Gambar Back To Top. Modifikasi tingkat lanjut (jika dibutuhkan) akan saya sampaikan di adegan tamat artikel. Untuk gambar back to top anda dapat mencari sendiri melalui Googling, atau mampu gunakan beberapa pola berikut :

(save as/save image as, resize jikalau perlu, dan upload sendiri)

4. Masuk ke dashboard > Layout > Add/tambah gadget.
5. Pilih jenis gadget HTML/Javascript.
6. Masukkan seluruh instruksi ke dalam kotak editor dan save.
7. Agar tidak mengganggu widget lain, dan dimuat belakangan, pastikan widget di posisikan di adegan paling bawah. Geser widget baik ke adegan footer widget (jika ada) atau di sidebar paling bawah.
8. Save lagi dan cek apakah widget back to top sudah terpasang dengan baik.

Advanced modification pada Tombol Scroll/Back to Top

Untuk melaksanakan modifikasi efek pada tombol back to top, perhatikan poin-poin berikut:

- 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 yaitu 100

- scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) menyerupai default di atas berarti scroll akan kembali ke adegan 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 yaitu 1000 (1 detik).

- fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama yaitu nilai fade in, yang kedua yaitu nilai fade out. Nilai default di atas yaitu 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.

Important note:

Jangan mencoba menambahkan script ke dalam template melalui HTML editor, sebab akan terjadi kesalahan parsing, widget parsing dan template parsing Blogger berbeda.
Never remove the attributions on the script, respect creators.

Okay that's it. Semoga tutorial di atas tidak hanya memberi manfaat dalam hal pemasangan tombol back to top, tapi juga memperlihatkan sedikit gambaran mengenai penggunaan javascript. Have a nice blogging, as always.