Tombol Back/Scroll To Top Dengan Efek Fading & Smooth Untuk Blogger
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 berbagi script scroll/back to top (kembali ke atas), yang berbeda pada script back to top pada tutorial ini yaitu:
1. Perampingan script agar tidak memperberat loading blog
2. Pengurangan, perampingan, dan modifikasi belahan script semoga sesuai dengan Blogger.
3. Efek fading dan imbas smooth sekaligus (dengan tunjangan jquery)
4. Panduan modifikasi penuh pada script untuk menampilkan imbas yang personal, supaya 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 serpihan, yang pertama ialah script fungsi back to top itu sendiri, dan yang kedua script jquery untuk membantu dampak smooth dan fading (in and out).
Jquery adalah 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.
Langkah Pemasangan:<!--Back to top script by dynamicdrive.com and buka-membisu-membisu.blogspot.com--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" ><!-- hapus script di atas kalau template sudah memakai jquery-->/************************************************ Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* Advanced modification by buka-membisu-diam.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().topelsedest=0this.$body.animate(scrollTop: dest, this.setting.scrollduration);,keepfixed:function()var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$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 : falseif (this.state.shouldvisible && !this.state.isvisible)this.$control.stop().animate(opacity:1, this.setting.fadeduration[0])this.state.isvisible=trueelse 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($))scrolltotop.init()</script><!--Back to top script by dynamicdrive.com and buka-rahasia.blogspot.com end-->
1. Copy code script di atas
2. Jika sudah melakukan pengecekan jquery dan ternyata sudah ada (note: minimal versi jquery yang bisa digunakan adalah 1.3.0), hapus script jquery di bagian atas, yaitu:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>3. Modifikasi terpenting adalah pada URL gambar back to top, masukkan URL gambar anda menggantikan teks URL Gambar Back To Top. Modifikasi tingkat lanjut (jikalau diharapkan) akan saya sampaikan di belahan tamat artikel. Untuk gambar back to top anda dapat mencari sendiri melalui Googling, atau bisa gunakan beberapa contoh berikut :
.png "Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger"){kind=icon}
.png "Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger"){kind=icon}
(save as/save image as, resize jika perlu, dan upload sendiri)
4. Masuk ke dashboard > Layout > Add/tambah gadget.5. Pilih jenis gadget HTML/Javascript.
6. Masukkan seluruh kode ke dalam kotak editor dan save.
7. Agar tidak mengganggu widget lain, dan dimuat belakangan, pastikan widget di posisikan di bagian paling bawah. Geser widget baik ke bagian 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 sehabis user scroll down. Nilai default di atas yakni 100
- scrollto: Integer, tujuan scroll sehabis tombol diklik. Nilai 0 (dalam pixel) ibarat default di atas berarti scroll akan kembali ke kepingan 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 ialah nilai fade in, yang kedua yaitu nilai fade out. Nilai default di atas yakni 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, karena 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.
Belum ada Komentar untuk "Tombol Back/Scroll To Top Dengan Efek Fading & Smooth Untuk Blogger"
Posting Komentar