Tombol Back/Scroll To Top Dengan Pengaruh Fading & Smooth Untuk Blogger

Sudah banyak kawan blogger yang menanyakan tentang tombol back to top (tombol kembali ke atas) Blogger yang saya gunakan, alasannya berlawanan dengan tombol yang sebelumnya sudah saya bagi. Jika yang usang cuma menggunakan fungsi hashtag pada url HTML (#top atau #), maka yang saya gunakan menggunakan fungsi javascript dan jquery. Tapi saya sempat agak resah untuk meningkatkan alasannya script yang saya gunakan saya host secara tersendiri di server lain dan sudah mengalami penyesuaian sarat sehingga cuma cocok untuk template saya. Jika saya memberikannya secara mentah maka sungguh susah untuk dimodifikasi sesuai prospek sobat. Padahal setiap performa blog berbeda, pengaruh yang dikehendaki kawan pada tombol scroll to top mungkin juga berbeda, dan yang paling penting merupakan memasang tombol dengan mudah tanpa perlu melakukan penyesuaian pada javascript menyerupai yang saya lakukan.

So, pada prosesnya, saya sudah mendapatkan script back/scroll to top yang jauh lebih cocok, bikinan widget/gadget editor), sehingga penyesuaian sanggup dijalankan sewaktu-waktu tanpa mesti mengupload dan meng-host file javascript ke server lain.

Sudah banyak kawan blogger yang menanyakan tentang Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger

Apa yang Berbeda?

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

1. Perampingan script biar tidak memperberat loading blog

2. Pengurangan, perampingan, dan penyesuaian bab script biar sesuai dengan Blogger.

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

4. Panduan penyesuaian sarat pada script untuk memperlihatkan pengaruh yang personal, biar sesuai dengan konsep blog dan keinginan.

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

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

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

Jquery merupakan script yang sudah sungguh umum 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 kemudian search (CTRL+F) dengan keyword jquery, letaknya ada di dalam elemen head (antara <head> dan </head>). Jika sudah ada, tidak perlu lagi menyertakan 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 model IE6 ke bawah untuk loose check, juga untuk menyaksikan 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 melakukan pengecekan jquery dan ternyata sudah ada (note: minimal model jquery yang sanggup dipakai merupakan 1.3.0), hapus script jquery di bab atas, yaitu:

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

3. Modifikasi paling penting merupakan pada URL gambar back to top, masukkan URL gambar anda mengambil alih teks URL Gambar Back To Top. Modifikasi tingkat lanjut (jika dibutuhkan) akan saya sampaikan di bab final artikel. Untuk gambar back to top anda sanggup mencari sendiri lewat Googling, atau sanggup 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 mengusik widget lain, dan diangkut belakangan, tetapkan widget di posisikan di bab paling bawah. Geser widget baik ke bab 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 melakukan penyesuaian pengaruh pada tombol back to top, amati poin-poin berikut:

- startline: Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya memiliki arti tombol akan ditampilkan lebih ke bawah sehabis user scroll down. Nilai default di atas merupakan 100

- scrollto: Integer, tujuan scroll sehabis tombol diklik. Nilai 0 (dalam pixel) menyerupai default di atas memiliki arti scroll akan kembali ke bab paling ujung atas (titik nol). Menambah nilainya memiliki arti akan menurunkan titik tujuan scroll.

- scrollduration: kecepatan/durasi scroll (dalam miliseconds), kian tinggi nilainya, kian lambat. Default merupakan 1000 (1 detik).

- fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama merupakan nilai fade in, yang kedua merupakan nilai fade out. Nilai default di atas merupakan 500 dan 200.

- offsetx: nilai posisi x tombol back to top (dalam pixel), kian ditambah kian menjorok ke dalam. Default 5.

- offsety: nilai posisi y tombol back to top (dalam pixel), kian ditambah kian menjorok ke atas. Default 5.

Important note:

Jangan menjajal menyertakan script ke dalam template lewat HTML editor, alasannya 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 panduan di atas tidak cuma memberi faedah dalam hal pemasangan tombol back to top, namun juga memamerkan sedikit citra mengenai penggunaan javascript. Have a nice blogging, as always.

Javascript Navigation/Menu Widgets