Cara Buat Tombol Back To Top di Blogspot - Tips Trik Blogger, Tutorial SEO, Info

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='http://bloggerpeer.googlecode.com/files/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



thumbnail Cara Buat Tombol Back To Top di Blogspot
Author: Komang Gede
4.5 - 1 Reviewed by Blogger Peer
Silahkan bagikan artikel tentang Cara Buat Tombol Back To Top di Blogspot ini kepada teman anda dengan meng-KLIK tombol diatas

74 comments "Cara Buat Tombol Back To Top di Blogspot"

mls otak-atik html takut menjadi berat loadnya

nice info gan

ijin gan, makasih infonya :) mampir balik ya gan

Mantap Gan Jgn lupa Mampir Ke blo ane yaa

Sukses berat gan,,,,

makasih banyak,,,

mampir balik ya...

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

ikut komeng aja deh gan, sekalian blog walking

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

keren gan nice info :D

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

makasih ilmunya...Gan

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

thanks sudah share

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

Makasih atas infonya,, saya coba jga berhasil ^^

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

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

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

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

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

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


makasiih

mantap infonya :D

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

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

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

Makasih. Berhasil nih dipasang di blogku.

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

http://dyan-seller.blogspot.com

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

Sangat Memuaskan ...tengkyu gan...

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

ane nyari2 scriptnya ga nemu2 :(

thank banget infonya gan
:D

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

Makasih gan tipsnya..

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

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

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

helpful banget nih
thanks

makasih caranya bang...

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

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

Salam

thanks kak :-bd

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

Makasih masbray tutorialnya...membantu sekali !

mantap gan tq banget info nya

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

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

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

ini dia yang gue cari. nice post

visit balik ya madereastu.blogspot.com

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

ijin coba kang/ makasi info nya :)

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

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

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

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

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

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

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

http://wisnudewaonlineshop.blogspot.com/

Mantap!!!! :-h

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

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

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

http://wisnudewaonlineshop.blogspot.com/

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

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

makasih ilmunya..

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

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

Berhasil gan.. thanks tutorialnya gan..

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

Klik expand di blog saya blm ada...

Post a Comment “Cara Buat Tombol Back To Top di Blogspot

Baca dulu ya! Suka dengan emotikon? lihat kodenya
 
Back To Top Blogger