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

Back To Top Blogspot
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.

Demo Back To Top Button

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.
<!--Back to top script by dynamicdrive.com and buka-rahasia.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 jika template sudah menggunakan jquery-->
/*********************************************** 
* 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>
<!--Back to top script by dynamicdrive.com and buka-rahasia.blogspot.com end-->
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 :
top button 1 top button 2 top button 3 top button 4 top button 5 top button 6
(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.

© 2013 - 'til drop. buka-rahasia.blogspot.com. All rights reserved.

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.

add a comment 52 Comment(s):

Ardian Tokotua said...

Keren... di coba pak :) thanks

Nana Khaira said...

terima kasih pak, dengan mengikuti bimbingan dari bapak, saya akhirnya bisa masang scroll back to top ini ke blog saya.

salam kenal, pak
:))

Fajrin Ilham H said...

lama ane tak mampir dan pastinya keren nih.. ane mau coba ah :D tetap jaya mas

Ahmad Khoirul Azmi said...

@Ardian: Thanks, sukses buat forexnya :)
@nana: Great, glad you did it well!
@Fajrin: selamat datang kembali dan silahkan dicoba

Agung Talaga 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..

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

Ahmad Khoirul Azmi said...

kapan-kapan akan saya tuliskan tutorialnya, karena panjang. Basic-nya menggunakan CSS3. Ditunggu ya

DIAN MALIK Alamsyah said...

Okey mas azmi, saya tunggu... terima kasih

yAhyA riDwAn said...

keren mas,, aq pasang sudah.. keren. thanks ya :)

Putra Naufal said...

Bisa di coba nich, keliatannya asih, jika diklik back tu top langsung menuju keatas

Arie Purnomo 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.

Ahmad Khoirul Azmi said...

@Arie: Tidak bisa, semua itu langsung dari server Blogger. Kita tidak bisa mengontrolnya. Comment system blogger dan mekanismenya diatur langsung dari server Blogger

Ridwan Sogan said...

gan request ..
membuat tabview ..
ane kok kemaren nyari" kagak ada yang sempurna ...

Ahmad Khoirul Azmi said...

@Ridwan: request masuk daftar tunggu antrian posting :)

Egi Aday said...

info yg sangat bermanfaat soob .

ditunggu kunjugan balinya sekalian tukar link yaa :D
koran-informasi.blogspot.com

Ardiansyah ZMB 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..

Ahmad Khoirul Azmi said...

@Ardiansyah: Lihat tutorialnya di sini:
Facebook, Twitter, G+ Button di atas/bawah Post

Annur Diana 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.

Ahmad Khoirul Azmi said...

@Annur: Wah dah terlanjur dipublish tuh ;)
Met belajar aja ya

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

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 ?

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

Ahmad Khoirul Azmi 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.

Hayardin Putra 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....

Ahmad Khoirul Azmi said...

Saya pake fitur title blogger sebagai nama blog lengkap. oke silahkan

Annur Diana said...

he he he he, ga mudeng aku om,...template ku ribet nih,..gmana kasih tombol back to up ya, makasih om,..

Ahmad Khoirul Azmi said...

hey nur... kasih url blogmu ya, aku lupa soale. sama undang aku jadi admin blogmu. biar nanti takpasangke..

Alief Rezki said...

Maaf pak, saya tidak mengerti, kok error ya saat masukkan kode ini, mohon penjelasannya ya mas

Ahmad Khoirul Azmi said...

Dimasukkan ke mana kodenya?

mencintai dengan sederhana said...

mas bagaimana posisinya diubah sebelah kiri.....

Cyber4rt_cirebon said...

bang , bisa buat menu horizontal efek smooth jika di scroll ke bawah....?

Ahmad Khoirul Azmi said...

@Cyber: maksudnya menu horizontal dropdown dengan efek jquery smooth?

Alief Rezki said...

di antara dan kan? hilangkan a nya

maria yuniarti said...

Mohon ijin nyoba diblogku ya gan scrool back nya
Thanks

Sony Herlambang said...

Dicoba dolo bray ...kunjungan balik yah...

Harry Adem Sary said...

mantafffppp..
langsung uji coba...
tankyou...blogebanghar.blogspot.com

Andri Pormes said...

maaf, mas boleh nanya kadang saya kalau posting itu hasinya akan muncul tulisan " Normal 0 false false false IN X-NONE X-NONE ..." pada hasil postingnya sebelum read more. bisa nggak dihalangkan?

IDjo Royo Royo 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...

Machfud Ilahi said...

keren gan, makasih infonya...

Ahmad Nayar said...

mantap sekali kang nanti langsung sy coba di blogku

Belajar Islam said...

terimakasih ya pak

Yogi Vipre said...

sukses gan,.

maksih tutor nya ya gan,.

e sunardi said...

cantik gan scroolnya.
ada yg laen lg gak?

Ronny Supriyonggo said...

Thk's scriptnya, sukses

Pred said...

Keren..keren..^^

BENY HERMAWAN said...

bagus mas azmi artikel nya .... wah2 perlu banyak belajar nih .. heee

Agung Rangga said...

terima kasih banyak tutorialnya pak~ :)
sukses diterapkan di blog saya~

kadut hokcay said...

thanks mas langsung di coba ternyata berhasil juga back to top di pasang di blog ane,salam kenal

Rika Rastikawati said...

thank you so much! this helpful for me and my blog..

Pondok Lengkap said...

mantab gan infonya ..

Randi Saputra said...

mantap gan, terimakasih ya atas tutorialnya... (y)

Eko Estillo said...

keren nih buat blog baru ku, makasih mas :)

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap