Cara Buat Tombol Back To Top di Blogspot

Blogger, jQuery, Tips dan Trik, Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Cara Buat Tombol Back To Top di BlogspotFitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

 

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

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

  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://1.bp.blogspot.com/-FjrYiE6C8ZY/TqJMQWu2osI/AAAAAAAAADI/GFdFWFPlO6o/s1600/back-to-top.gif'/></a>

  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
80 comments
about "Cara Buat Tombol Back To Top di Blogspot"
Add comments
1:57 PM ×

mls otak-atik html takut menjadi berat loadnya

Balas
avatar
admin
3:03 PM ×

nice info gan

Balas
avatar
admin
1:31 AM ×

ijin gan, makasih infonya :) mampir balik ya gan

Balas
avatar
admin
4:18 PM ×

Mantap Gan Jgn lupa Mampir Ke blo ane yaa

Balas
avatar
admin
2:41 PM ×

Sukses berat gan,,,,

makasih banyak,,,

mampir balik ya...

Balas
avatar
admin
2:47 PM ×

Thanks bro...

Balas
avatar
admin
8:09 PM ×

Berhasil Kawan, udah saya pasang di blog saya Terima Kasih tips nya. Kunjung-in balik ya kalo sudi mampir ke blog saya yg gak seberapa ini :)

Balas
avatar
admin
2:44 PM ×

Nice Gan

Balas
avatar
admin
2:34 PM ×

ikut komeng aja deh gan, sekalian blog walking

Balas
avatar
admin
3:03 PM ×

Kebetulan saya lagi eprek template dan sepertinya bisa dicoba juga nie tutorialnya
trims gan..

Balas
avatar
admin
12:54 AM ×

keren gan nice info :D

Balas
avatar
admin
4:28 AM ×

Makasi GAN ..., kalau yang ni bisa jadi....,
salam kenal lagi GAN......, bY SUKARIM

Balas
avatar
admin
10:13 PM ×

makasih ilmunya...Gan

Balas
avatar
admin
9:10 PM ×

nice info gaan... 8-}
buat yang punya koneksi minim, masuk sini gan...
http://xendapcgames.blogspot.com | muraah & aman pastinya ;)

Balas
avatar
admin
6:01 PM ×

thanks sudah share

Balas
avatar
admin
5:16 PM ×

Makasih infonya mas,untuk gambar bisa diganti-ganti kan?

Balas
avatar
admin
8:35 PM ×

Makasih atas infonya,, saya coba jga berhasil ^^

Balas
avatar
admin
2:41 AM ×

nice artikelnya gan.
bertambah pengetahuan saya setelah membaca artikel diatas.

Balas
avatar
admin
11:09 PM ×

thankz gan http://amminessalafy.blogspot.com/

Balas
avatar
admin
7:08 AM ×

ajiiib gan berhasill :)

Balas
avatar
admin
12:46 AM ×

makasih sob tutorialnya..........

Balas
avatar
admin
8:44 PM ×

wasik sekali nih.....ok banget lumayan cepat sob...

Balas
avatar
admin
7:32 PM ×

mantap! beta cuma kasih 3 jempol, kl beta kasih 4.. beta jatuh

Balas
avatar
admin
10:06 AM ×

blogwalking sekalian baca-baca artikel na,,,
follow2an yuu om.. :)


makasiih

Balas
avatar
admin
7:10 PM ×

mantap infonya :D

Balas
avatar
admin
2:53 AM ×

@katilsIni make jQuery sob.. jadi ringan banget di-load

Balas
avatar
admin
2:55 AM ×

@Om BebJaaahhhh... untung aja jari ente ga jempol semua sob, hehe..

Balas
avatar
admin
6:07 PM ×

@mbahjeckBisa mas.. yg penting script nya udah benar :-bd

Balas
avatar
admin
2:05 PM ×

Makasih. Berhasil nih dipasang di blogku.

Balas
avatar
admin
9:02 PM ×

@BloggerPeer Bener bgt tuh .. di blog ane juga jadi ringan kok ..!!

http://dyan-seller.blogspot.com

Balas
avatar
admin
11:57 AM ×

@Raden Van DjokoBener GAN...
ane udah pasang nih, tapi gambarnya udah ku ganti
VISIT : www.sobatsoftware.net
Terima Kasih infonya...^_^

Balas
avatar
admin
2:59 AM ×

Sangat Memuaskan ...tengkyu gan...

Balas
avatar
admin
12:20 AM ×

maaf ne sblmnya cmmnt na kluar topik hehe
tampilan mobile blogger bisa kya tampilan detik.com ga gan?

ane nyari2 scriptnya ga nemu2 :(

Balas
avatar
admin
10:26 PM ×

thank banget infonya gan
:D

Balas
avatar
admin
10:16 PM ×

wow,,,,,makasih gan ilmunya,,,ijin y...
ane coba pasang,,,

Balas
avatar
admin
5:59 PM ×

Makasih gan tipsnya..

Balas
avatar
admin
11:14 AM ×

I love your blog, I look forward to seeing more from you. Do you run any other sites? thanks

Balas
avatar
admin
10:16 AM ×

Ternyata mudah triknya, :-bd
tapi bisa dipasang di blog saya HUKUM KEHUTANAN
TERTIMAKASIH TELAH BERBAGI
Mohon dibantu gimana caranya kalo posisi atau gambarnyanya
mau dirubah

Balas
avatar
admin
11:48 AM ×

Thanks ya gana,, ane pasang langsung di blog ane http://gratisdownloadgame.blogspot.com ...thanks banget

Balas
avatar
admin
7:12 AM ×

helpful banget nih
thanks

Balas
avatar
admin
11:12 AM ×

makasih caranya bang...

Balas
avatar
admin
2:00 PM ×

mantep sob,ijin nyoba ya....tombol to top'a emang top,simpel,keren !!!

Balas
avatar
admin
4:23 PM ×

trims atas sharingnya, tapi kira2 kalo pake yang tipe JS, mempengaruhi berat blog gak gan?

Salam

Balas
avatar
admin
8:57 PM ×

thanks kak :-bd

Balas
avatar
admin
3:58 AM ×

Thanks untuk Share Tutorial Scroll Back to Top yang di post-kan tanggal 21/11/2011, tetap bermanfaat bagi Blogger untuk membuat Blogg tampil menarik dan memudahkan pengunjung Blogg dengan tampilan tombol simpel tapi keren, load script-nya ringan walaupun ditempatkan di footer body. Say good by to manual-scrooling-page. :-bd

Balas
avatar
admin
5:14 PM ×

Makasih masbray tutorialnya...membantu sekali !

Balas
avatar
admin
9:16 PM ×

mantap gan tq banget info nya

sumber :http://www.wartasatu.net/2012/11/waletbet-promo-bonus-100-sportsbook-dan.html

Balas
avatar
admin
5:08 PM ×

mantap gan,.
langsung berhasil,.
oya, aku udah follow blog agan, agan jgn lupa folback ya,.

Balas
avatar
admin
2:08 AM ×

mau tnya neh..
btw itu ko bisa floating yah follow blognya, caranya gmn mas?

Balas
avatar
admin
1:05 AM ×

ini dia yang gue cari. nice post

visit balik ya madereastu.blogspot.com

Balas
avatar
admin
2:50 PM ×

Gue mau nanya, cara meningankan load blogger gimana sih? biar loadnya secepat kilat hehe

Balas
avatar
admin
7:05 PM ×

ijin coba kang/ makasi info nya :)

Balas
avatar
admin
9:15 AM ×

Trims infonya mas bro, bermanfaat dan bisa langsung diaplikasikan (y)

Balas
avatar
admin
6:48 AM ×

thx Info'a gan..., visit juga Blog saya neoplaizaz.blogspot.com

Balas
avatar
admin
9:19 AM ×

ijin sedot gan

Balas
avatar
admin
2:53 PM ×

Silakan SUBMIT artikelnya di http://www.cyber4rt.com
It's free and boost your traffic ;)

Balas
avatar
admin
7:15 PM ×

Visit My Blog... http://artikel-pro.blogspot.com - BlogWalking

Balas
avatar
admin
1:43 PM ×

makasih sebelumnya gan, bru kali ini ku berhasil pasang menu top down, heee
simple, mudah n berhasil

Balas
avatar
admin
9:39 PM ×

mantep sob...
===========================
visit cirebon4rt.blogspot.com

Balas
avatar
admin
10:19 PM ×

thanks gan..

Balas
avatar
admin
8:25 AM ×

mantep sob...
===========================

http://wisnudewaonlineshop.blogspot.com/

Balas
avatar
admin
7:54 PM ×

Mantap!!!! :-h

Kunjungi blog saya juga: zlfs-1995.blogspot.com

Balas
avatar
admin
10:05 PM ×

Bermanfaat nih sob,
Kunjung balik ya sob http://www.threadmix.blogspot.com

Balas
avatar
admin
9:44 PM ×

kunjung balik sob ^_^
===========================

http://wisnudewaonlineshop.blogspot.com/

Balas
avatar
admin
1:48 PM ×

manteepp kang

Balas
avatar
admin
12:11 PM ×

sudah saya pasang dan berjalan dengan mulus, mantab gan. scriptnya nggak nambah-in berat loading page :-bd

Balas
avatar
admin
8:44 PM ×

Coba Dolo ah
http://animasiindoku.blogspot.com/

Balas
avatar
admin
12:31 AM ×

makasih ilmunya..

Balas
avatar
admin
6:55 PM ×

terimaksih sobat mantap ilmunya lihat hasilnya di web ane http://www.bookingvillaistanabunga.com cuma ganti url gambarnya aja

Balas
avatar
admin
1:24 PM ×

Numpang nyimak yah.
http://melancong94.blogspot.com/

Balas
avatar
admin
2:36 PM ×

Berhasil gan.. thanks tutorialnya gan..

Balas
avatar
admin
3:04 PM ×

Bener GAN...
ane udah pasang nih, tapi gambarnya udah ku ganti
VISIT : www.bangjakwae.blogspot.com
Terima Kasih infonya...^_^

Balas
avatar
admin
1:02 PM ×

Klik expand di blog saya blm ada...

Balas
avatar
admin
10:29 PM ×

berhasil gan, thanks infonya

Balas
avatar
admin
1:17 AM ×

Makasih mas, tak cobain dah bisa...

Balas
avatar
admin
10:51 AM ×

makasih bos tips nya sudah di coba,dan sudah berhasil.salam kenal.

Balas
avatar
admin
12:04 PM ×

Mantab broo :D
Maksih banget yah.. smoga malam anda trcatat di sisi Allah SWT..

Mampir mas bro http://andrey-2111.blogspot.com/

Balas
avatar
admin
4:04 PM ×

gan kalo yang tombol back to top di samping kiri atas ada ga ?

Balas
avatar
admin

Silahkan berkomentar dengan bijak sesuai topik, komentar tidak di-moderasi karena saya percaya seorang Blogger bijak terlihat dari caranya berkomentar. Thanks..!
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar