Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot 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.
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.
Author:
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...
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
terimakasih tas infonya
http://www.inimun.co.cc
http://www.inibook.blogspot.com
terima kasih ,,,
sudah mengajarkan saya membuat back to top ...
jangan lupa kunjangi juga blog sederhana saya ,,,
http://blog-kitta.blogspot.com
:)
Terimakasih infonya. Walaupun blog saya wordpress tetapi tetap bisa.
sip bro... ya karena itu cuma HTML, jadi untuk blog wordpress.com (yang widgetnya ga support javascript) tetap bisa.
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..
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
masyaallah...thx bro! copas nih...
Terima kasih Infonya bermanfaat sangat
terima kasih info nya gan salam kenal .....!!!
Tk'y infonya Bos
thanks bangets nih gan,,, udah bisa
makasih bro infonya.. nice tips by the way.. :)
oke masbro sepp :D
saya praktekin bagus gan., tapi sy oprek lagi di ilangin gambarnya., lihat contohnya di : djawadreang.com
makasih infonya., :D
thank gan scripnya sudah berhasil saya pasang di blog saya..
thank you... its work on my blog
cek it !
http://encrypted-scramble.blogspot.com/
blogwalking, visit me back please :)
Thankz infonya ya ??
Terimakasih ya infonya. Ijin pasang Bro. salam kenal.
wah baus juga nih gan caranya mau coba dulu gan/....!
Kereen, saya sudah menerapkannya & sukses.
Btw, langsung saja saya mohon ijinnya untuk menayangkan artikel ini di blog saya.
Jazaakumullah bi Khoiril Jazaa...
Mantaaaaap......
izin pake ya mas.., syukran *smile
thanks tutorialnya gan, udah saya di pakai di blogQ
BY : http://zulhairi88.blogspot.com/
ijin pakai ^^
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 :)
itu wajar, itu menunjukkan fungsinya untuk kembali ke bagian wrapper terluar yg ditandai dengan #
Keren-keren boss, artikelnya........
(www.wantec.co.cc)
gan, klo punya agan masih di atas kan g ada, muncul pas mulai scrol ke bawah. itu gimana y gan? *mauuuuu
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 :)
Thanks kang udah di praktekin nih
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
tombol down ny ada om ?
manteppp gan info'y , makasih bnyak nih ...
jngan lupa kunjungan balik ya ..
http://ojezzlastfriend.blogspot.com/
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...
halo mas, itu saya pake jquery. besok2 akan saya posting scriptnya.
kok nggak ada gambarnya sob..?sertakan gambarnya sekalian aja sob...
terima kasih atas artikelnya
matep gan, thanks langsung praktek
yang suka anime mampir mari 90animax
ngga nongol kang, pake "tambah HTML.Jawvascript mah euy.
nuhun sudah dapet ilmu dan pengalamn disini
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..
Wah, Simpel banget kodenya Gan :D
Thanks ya...
Mantap sob.. udah ane coba..
keren banget blognya...
kok gak work ya di blog saya, bdw nice info deh :D
nuwun infone mas, tak gawene sikik. hehe
salam kenal.
terimakasih mas .. tipsnya berguna.. udah saya coba dan sudah berhasil :)
gan, gimana caranya agar background gambarnya bisa transparan??
wisnuwidhiw.blogspot.com
terima kasih sdh share bro
@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
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
udh bisa gan cukup membantuk,, tapi tadi ada yang saya tambahin utk ukuran gambar dan penempatan posisinya..
Post a Comment