Home » Javascript » Navigation/Menu » Widgets » Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger

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

Sudah banyak sobat blogger yang menanyakan tentang tombol back to top (tombol kembali ke atas) Blogger yang saya gunakan, karena 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 bingung untuk berbagi karena 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 keinginan sobat. Padahal setiap tampilan blog berbeda, efek yang diinginkan sobat pada tombol scroll to top mungkin juga berbeda, dan yang terpenting adalah memasang tombol dengan mudah tanpa perlu melakukan modifikasi pada javascript seperti yang saya lakukan.

So, pada prosesnya, saya telah menemukan script back/scroll to top yang jauh lebih cocok, buatan dynamicdrive, dan dapat dengan mudah saya modifikasi sehingga cocok untuk Blogger. Script ini nantinya dihost sendiri di server Blogger (dimasukkan melalui 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 adalah:

1. Perampingan script agar tidak memperberat loading blog

2. Pengurangan, perampingan, dan modifikasi bagian script agar sesuai dengan Blogger.

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

4. Panduan modifikasi penuh pada script untuk menampilkan efek yang personal, agar 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 adalah script fungsi back to top itu sendiri, dan yang kedua script jquery untuk membantu efek 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.

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

Langkah Pemasangan:
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 (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)

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 melakukan 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 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.

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 memberikan sedikit gambaran mengenai penggunaan javascript. Have a nice blogging, as always.

Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

<a href="https://buka-rahasia.blogspot.com/2013/01/tombol-backscroll-to-top-dengan-efek-fading-smooth-blogger.html">Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger</a>

50 Comment(s):

Diansah said...: Keren... di coba pak :) thanks; Tuesday, 01 January, 2013
Nana said...: terima kasih pak, dengan mengikuti bimbingan dari bapak, saya akhirnya bisa masang scroll back to top ini ke blog saya.

salam kenal, pak
:)); Tuesday, 01 January, 2013
Fajrin said...: lama ane tak mampir dan pastinya keren nih.. ane mau coba ah :D tetap jaya mas; Tuesday, 01 January, 2013
Unknown said...: @Ardian: Thanks, sukses buat forexnya :)
@nana: Great, glad you did it well!
@Fajrin: selamat datang kembali dan silahkan dicoba; Tuesday, 01 January, 2013
Gunawan said...: Makasih Bang atas informasinya. Saya sdh pernah pasang icon backt to top pada blog saya kemarin dengan menggunakan Jquery seperti di atas tapi karena membuat loading blog saya bertambah lama makanya saya buka aja tapi menurut penjelasan di atas, icon back to top yg ini tidak akan mempengaruhi lagi loading blog, saya coba aja dulu untuk dipasang pada blog saya..; Wednesday, 02 January, 2013
Malik Alamsyah said...: mas aazmi saya mau tanya, bagaimana cara buat gambar menjadi berputar2 saat terkena kursor, seperti logo tulisan buka rahasia diatas itu...hehe makasi..; Wednesday, 02 January, 2013
Unknown said...: kapan-kapan akan saya tuliskan tutorialnya, karena panjang. Basic-nya menggunakan CSS3. Ditunggu ya; Wednesday, 02 January, 2013
Malik Alamsyah said...: Okey mas azmi, saya tunggu... terima kasih; Thursday, 03 January, 2013
Unknown said...: keren mas,, aq pasang sudah.. keren. thanks ya :); Friday, 04 January, 2013
Anonymous said...: Bisa di coba nich, keliatannya asih, jika diklik back tu top langsung menuju keatas; Friday, 04 January, 2013
Unknown said...: mau nanyak ni mas, maaf lari dri materi d atas. saat kita berkomentar dan setelah menekan publish , disana ada kalimat "Your comment was published" setelah komentar muncul saat kita publish. nah, bisa gak kalau kalimat tersebut kita ubah ?? jika bisa, ap yg hrus sya lakukan ??

trimakasih sebelumnya.; Sunday, 06 January, 2013
Unknown said...: @Arie: Tidak bisa, semua itu langsung dari server Blogger. Kita tidak bisa mengontrolnya. Comment system blogger dan mekanismenya diatur langsung dari server Blogger; Sunday, 06 January, 2013
MeTechTech said...: gan request ..
membuat tabview ..
ane kok kemaren nyari" kagak ada yang sempurna ...; Monday, 07 January, 2013
Unknown said...: @Ridwan: request masuk daftar tunggu antrian posting :); Tuesday, 08 January, 2013
Unknown said...: mas, gimana cara mmebuat script tombol like google plus, facebook dan twitter letaknya berada sama seperti di blog mas ini, karna saya cari di google adanya cuma yang buat di bawah postingan aja..

maaf jika melenceng dari artkelnya..
terima ksih..; Tuesday, 08 January, 2013
Unknown said...: @Ardiansyah: Lihat tutorialnya di sini:
Facebook, Twitter, G+ Button di atas/bawah Post; Tuesday, 08 January, 2013
annd said...: Assalammualaikum, cuma mapir om Khaerul, bener itu kalo comment dimoderasi,...komen in ga usah di publish om. aku lgi belajar dari blog in. makasih,..wsl.; Wednesday, 09 January, 2013
Unknown said...: @Annur: Wah dah terlanjur dipublish tuh ;)
Met belajar aja ya; Wednesday, 09 January, 2013
Bli Putu said...: nice info bang,,, ane baru tw jadinya maaf ane masi nwebei ama blog bank, trimakasi visit back juga bank di http://serbawow.blogspot.com; Saturday, 12 January, 2013
hayardin said...: saya sudah lihat Demonya Pak,,,sepertinya saya mau mengganti tombol back to top milik saya setelah mengikuti tutorial blognya Bapak...tapi apa ini tidak membuat berat blog Pak ?; Tuesday, 15 January, 2013
hayardin said...: Assalamu alaikum wr.wb Pak Ahmad Khoirul Azmi...

Minta maaf ini menganggu Pak, mungkin pertanyaan saya agak melenceng dari materi yang di bahas di atas. saya ingin bertanya kepada Bapak mengenai Penulisan Title Blog yang SEO

Begini Pak, biasanya kalau kita menembak keyword seperti "cara membuat blog gratis", "tips SEO" dan "tutorial Blog" maka keyword keyword tersebut kita tempatkan di belakang title utama blog kita, dimana title utama blog saya adalah "HAYARDIN BLOG"

Yang saya tanyakan Pak, sebenarnya dimana sih paling bagus Keyword keyword itu kita tulis, Apa di bagian Preferensi
Penelusuran pada tampilan baru blogger sehingga menjadi Hayardin Blog | cara membuat blog gratis-Tutorial Blog-Tips SEO

atau keyword keyword itu kita tulis dalam Template blog Pak

Terimakasih banyak Pak sebelumnya; Tuesday, 15 January, 2013
Unknown said...: @hayardin: script di atas sudah saya rampingkan dan modifikasi, jadi jauh lebih ringan.

Sebenarnya keduanya sama saja, bedanya jika melalui fitur edit title blogger, nama blog anda adalah semua yang anda isikan di sana. Jika di tambahkan pada tag title melalui edit HTML, maka nama blog anda tetap yang ada di data:blog.title, tapi title tag yang dihasilkan sama saja. Jadi pilih saja salah satunya, pengaruhnya sama terhadap title tag yang dibaca google.; Tuesday, 15 January, 2013
hayardin said...: Alhamdulillah akhirnya pertanyaan saya di jawab sama Bapak,terimakasih banyak pak atas penjelasannya...Kalau boleh tahu Bapak menggunakan yang mana dalam menuliskan title buka rahasia blogspot ?

Kalau begitu saya ijin yaa pak pakai script tombol kembali ke atas milik Bapak karena lebih ringan....; Wednesday, 16 January, 2013
Unknown said...: Saya pake fitur title blogger sebagai nama blog lengkap. oke silahkan; Wednesday, 16 January, 2013
annd said...: he he he he, ga mudeng aku om,...template ku ribet nih,..gmana kasih tombol back to up ya, makasih om,..; Sunday, 27 January, 2013
Unknown said...: hey nur... kasih url blogmu ya, aku lupa soale. sama undang aku jadi admin blogmu. biar nanti takpasangke..; Sunday, 27 January, 2013
Unknown said...: Maaf pak, saya tidak mengerti, kok error ya saat masukkan kode ini, mohon penjelasannya ya mas; Saturday, 02 February, 2013
Unknown said...: Dimasukkan ke mana kodenya?; Saturday, 02 February, 2013
Anonymous said...: mas bagaimana posisinya diubah sebelah kiri.....; Saturday, 09 February, 2013
Unknown said...: bang , bisa buat menu horizontal efek smooth jika di scroll ke bawah....?; Wednesday, 13 February, 2013
Unknown said...: @Cyber: maksudnya menu horizontal dropdown dengan efek jquery smooth?; Wednesday, 13 February, 2013
Unknown said...: di antara dan kan? hilangkan a nya; Wednesday, 20 February, 2013
Unknown said...: Mohon ijin nyoba diblogku ya gan scrool back nya
Thanks; Friday, 22 February, 2013
Anonymous said...: Dicoba dolo bray ...kunjungan balik yah...; Thursday, 07 March, 2013
Unknown said...: mantafffppp..
langsung uji coba...
tankyou...blogebanghar.blogspot.com; Sunday, 14 April, 2013
Unknown said...: Kalau yang work di hape ada tidak mas?
Saya coba script seperti di atas namun jika via hape hanya muncul, tetapi fungsinya tidak seperti jika dijalankan via pc...; Wednesday, 22 May, 2013
Machfud ilahi said...: keren gan, makasih infonya...; Thursday, 01 August, 2013
Ahmad Nayar said...: mantap sekali kang nanti langsung sy coba di blogku; Saturday, 31 August, 2013
Rmaasy90 said...: terimakasih ya pak; Wednesday, 18 September, 2013
Anonymous said...: sukses gan,.

maksih tutor nya ya gan,.; Wednesday, 02 October, 2013
Unknown said...: cantik gan scroolnya.
ada yg laen lg gak?; Monday, 14 October, 2013
Mega Filter said...: Thk's scriptnya, sukses; Tuesday, 15 October, 2013
Pred said...: Keren..keren..^^; Thursday, 05 December, 2013
Unknown said...: bagus mas azmi artikel nya .... wah2 perlu banyak belajar nih .. heee; Sunday, 22 December, 2013
gung said...: terima kasih banyak tutorialnya pak~ :)
sukses diterapkan di blog saya~; Wednesday, 15 January, 2014
kaduthokcay said...: thanks mas langsung di coba ternyata berhasil juga back to top di pasang di blog ane,salam kenal; Wednesday, 16 July, 2014
Unknown said...: thank you so much! this helpful for me and my blog..; Saturday, 30 August, 2014
Pondok Lengkap said...: mantab gan infonya ..; Monday, 29 September, 2014
Randi said...: mantap gan, terimakasih ya atas tutorialnya... (y); Monday, 27 October, 2014
ABS Pallet said...: keren nih buat blog baru ku, makasih mas :); Thursday, 23 April, 2015