Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot V2

back to top V2
Fitur Back To Top/Scroll To Top, seperti yang telah dijelaskan dalam Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), adalah fitur navigasi blog yang berfungsi sebagai shortcut agar pengunjung bisa kembali ke bagian atas halaman blog dengan cepat dan hanya dalam satu klik. 

Tombol back to Top Blogspot kali ini berjenis melayang (floating) dan berada di bagian pojok kanan bawah. Kodenya pun sedehana dan tidak menggunakan javascript/jquery sehingga waktu muatnya lebih pendek. Script ini dibuat berdasarkan perintah link yang mengacu ke wrapper (#) dengan ditambah aturan CSS position-styling. Easy.

Cara Memasang Back to Top Blogger/Blogspot V2:
1. Copy kode berikut:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>
Anda dapat mengganti title Scroll/Back to Top dengan kata-kata yang diinginkan. Ganti url gambar back to top blog dengan gambar back to top anda, atau copy salah satu dari beberapa gambar "Back To Top" di posting tips-tricks blogger sebelumnya: Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), atau bisa juga googling dengan keyword "back to top button image". Edit ukurannya sesuai dengan besar yang diinginkan, lalu upload. Masukkan url gambar yang telah diupload ke dalam script. 

2. Buka dashboard > Layout/Rancangan > Klik Add a/Tambah Gadget > Pilih opsi HTML/Javascript

3. Paste/letakkan kode tersebut, lalu save.

Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang menjadikannya melayang.

4. Done!

Have Fun with your Back to Top Button!

Update: mau tombol tombol kembali ke atas dengan efek fading dan smooth berbasis javascript yang super keren? Simak Back/Scroll to To Top dengan Jquery


© buka-rahasia.blogspot.com

Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot V2
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 59 Comment(s):

Awalk said...

KAlau kodenya di simpan pada sidebar, mungkin akan sedikit mengurangi pemandangan sidebar blog denganadanya widget yg terlihat kosong. Saya lebih suka menyimpan kodenya pada kode html template blog.Nice info...

Ahmad Khoirul Azmee said...

oh tidak bro, sifatnya invisible atau tidak menempel di dinding halaman, karena mengacu ke wrapper terluar. jadi dia tidak memiliki space di ruangan halaman yang nampak. kalo ada space, itu karena diakses oleh si pemilik blog yang sudah login, jadi ada semacam link shortcut ke edit widget,itupun cuma space kecil. sedangkan kalo dari pengunjung tidak. ya, bisa dimasukkan juga lewat edit html di atas tag penutup body, /body. thanks for visiting. :D

inimun said...

terimakasih tas infonya
http://www.inimun.co.cc
http://www.inibook.blogspot.com

cumplunk and dunk-dunk said...

terima kasih ,,,
sudah mengajarkan saya membuat back to top ...
jangan lupa kunjangi juga blog sederhana saya ,,,
http://blog-kitta.blogspot.com

:)

wildan said...

Terimakasih infonya. Walaupun blog saya wordpress tetapi tetap bisa.

Ahmad Khoirul Azmee said...

sip bro... ya karena itu cuma HTML, jadi untuk blog wordpress.com (yang widgetnya ga support javascript) tetap bisa.

ubae said...

mantabs om.. sukses buatnya..
lumayan buat memenuhin tampilan..hehehe

makasih om..

ow ya om gmn ni buat ganti font judul postingan.. dri kmrin2 gak dpt pencerahan ni..mungkin dapat pencerahan di sini..

Ahmad Khoirul Azmee said...

halo, bro.... kebetulan mau posting itu juga, agak panjang sih. tar sore yah aku posting soal ganti2 font, ga enak bikin posting di kantor, haha. lengkap sekalian, beberapa, jadi ga cuma font judul posting aja :D sabar yak

Muhammad Hauzan said...

masyaallah...thx bro! copas nih...

YantoSudar said...

Terima kasih Infonya bermanfaat sangat

abu's said...

terima kasih info nya gan salam kenal .....!!!

Dhicomp said...

Tk'y infonya Bos

Anonymous said...

Thanks gan

Admin Blog said...

thanks brother....silahkan kunjungi blog saya :
http://fr33zon3.blogspot.com/

couplax21 said...

thanks bangets nih gan,,, udah bisa

Anonymous said...

makasih bro infonya.. nice tips by the way.. :)

Nara said...

om saya uda coba dan sukses. tapi speed'y terlalu cepat.. bisa di perlambat gx speed back to top nya??
butuh pencerahan...

awan said...

oke masbro sepp :D

ryan mika said...

nice info

djawadreang said...

saya praktekin bagus gan., tapi sy oprek lagi di ilangin gambarnya., lihat contohnya di : djawadreang.com
makasih infonya., :D

Junianto Bara said...

thank gan scripnya sudah berhasil saya pasang di blog saya..

sailorman said...

thank you... its work on my blog
cek it !
http://encrypted-scramble.blogspot.com/

Danny Trinata said...

blogwalking, visit me back please :)

Admin ./Boriel Cyber ++== said...

Thankz infonya ya ??

Mintarja (Bang Jack) said...

Terimakasih ya infonya. Ijin pasang Bro. salam kenal.

Komu Basketball Competition IV said...

wah baus juga nih gan caranya mau coba dulu gan/....!

K2 Ichsan said...

Kereen, saya sudah menerapkannya & sukses.
Btw, langsung saja saya mohon ijinnya untuk menayangkan artikel ini di blog saya.
Jazaakumullah bi Khoiril Jazaa...

CorelDRAW & Photoshop For Beginners said...

Mantaaaaap......

Rohis Facebook said...

izin pake ya mas.., syukran *smile

zulhairi said...

thanks tutorialnya gan, udah saya di pakai di blogQ
BY : http://zulhairi88.blogspot.com/

Getmaxs said...

ijin pakai ^^

Habib Ismail said...

mas kok tiap ane klik tuh tombol di blog ane, alamat blog ane jadi ada tambahan tanda pagar ya? normal ga tuh? makasih ane msh newbie soalnya mas :)

Ahmad Khoirul Azmi said...

itu wajar, itu menunjukkan fungsinya untuk kembali ke bagian wrapper terluar yg ditandai dengan #

wanwan max said...

Keren-keren boss, artikelnya........
(www.wantec.co.cc)

"@.n.D" said...

gan, klo punya agan masih di atas kan g ada, muncul pas mulai scrol ke bawah. itu gimana y gan? *mauuuuu

fun Zoner's said...

nice share
trik ini dh aku coba ubah tapi kok masih belum bisa kaya punya ente bang?
sekali scroll langsung sampe ke atas ga pelan-pelan kaya punya ente?
mohon pencerahan :)

cassanova said...

Thanks kang udah di praktekin nih

EIGENAAR said...

mas gimana caranya supaya jadi agak lambat waktu back to topnya mas dan icon back to topnya cuma muncul pada saat ada di bagian bawah blog mohon pencerhannya mas

johannez al-bert said...

tombol down ny ada om ?

Ojezz Lastfriend said...

manteppp gan info'y , makasih bnyak nih ...
jngan lupa kunjungan balik ya ..

http://ojezzlastfriend.blogspot.com/

K2 Ichsan said...

Afwan sob, saya mau tanya.
Setelah saya perhatikan, kok punya saya beda ya dengan punya sobat. Kalau punya sobat, setelah sampai atas menghilang secara perlahan (keren euy). Sedangkan punya saya kok tidak ya?
Mohon pencerahannya sob...

Ahmad Khoirul Azmi said...

halo mas, itu saya pake jquery. besok2 akan saya posting scriptnya.

sekedar wawasan said...

kok nggak ada gambarnya sob..?sertakan gambarnya sekalian aja sob...

Informasi Dunia Samaran said...

terima kasih atas artikelnya

90animax said...

matep gan, thanks langsung praktek

yang suka anime mampir mari 90animax

Fahri Nuralim said...

Info Yang menarik nih Sobb

Udh di follow sobb

Di tunggu nie Folow Backnya

By : http://fahrinuralim.blogspot.com/

Desa Cilembu said...

ngga nongol kang, pake "tambah HTML.Jawvascript mah euy.

nuhun sudah dapet ilmu dan pengalamn disini

Heru Setyono said...

salam kenal, mau tanya, kog waktu halaman blog saya ada diatas, gambar back to top nya tetap g bisa ilang kaya di web agan ya? udah saya coba pake opera malah muncul javascriptnya, kalo pake firefox tetap muncul terus gan. tolong yah solusinya..
kunjungi blog baru saya ya di http://langitdesember.blogspot.com . terimakasih..

Ahmad Romadhon said...

Wah, Simpel banget kodenya Gan :D
Thanks ya...

Andy Borneo said...

Mantap sob.. udah ane coba..

DhaaN12 said...

keren banget blognya...

ɯɪɩɩɪɑɱ (―˛―“)ҧ said...

kok gak work ya di blog saya, bdw nice info deh :D

valvalavaleria said...

nuwun infone mas, tak gawene sikik. hehe
salam kenal.

Elvina Yanti said...

terimakasih mas .. tipsnya berguna.. udah saya coba dan sudah berhasil :)

Wisnu Widhi Wiwoho said...

gan, gimana caranya agar background gambarnya bisa transparan??

wisnuwidhiw.blogspot.com

ptikunm said...

terima kasih sdh share bro

getextension said...

@buka rahasia
saya sudah pasang tapi kok beda dengan punyanya sampeyan, tolong dong kode scriptnya di share lewat coment jg gpp biar bisa smoth scroll kaya punya sampean gimana scriptnya? apa saya harus cari tutorial dari blog lain.. nanti sya kasih cendol gan itung2 nambah penghasilan sesama bloger terimakasih

Adris Irawan said...

assalamualaikum

kalo saya boleh minta tolong tolong share script back to top seperti punya abang, tombol backtotopnya keluar hanya pas scroll di bawah, sedangkan pas scroll di atas tombol backtotop hilang

terima kasih banyak atar ilmunya semoga mas bisa mendapatkan berkah

Draf Haryono said...

udh bisa gan cukup membantuk,, tapi tadi ada yang saya tambahin utk ukuran gambar dan penempatan posisinya..

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