Cara Membuat Tombol Back To Top di Blog. Yang blognya belum ada button back to top nya boleh banget baca postingan saya ini. Jadi, kali ini saya mau berbagi sedikit tutorial cara membuat tombol back to top dengan cara yang mudah dan pastinya gampang dipahami. Jadi, menurut saya kenapa harus ada tombol back to top pada sebuah blog adalah selain untuk memperindah tampilan blog pada intinya adalah untuk memudahkan navigasi untuk pembaca blog kita. Apalagi kalau blognya/ postinganya memanjang kebawahkan ya, suka males gak sih scroll mouse manual ke atas? *kalau saya sih males kadangan* hahhaa...
Oke, tanpa berpanjang-panjang lebar mari disimak cara mudah membuat tombol back to top di blog berikut ini. Buat yang sudah tahu boleh di close tab, yang masih mau belajar bareng saya stay tuned nyampe postingan ini habis ya! Oiya, saya kasih BONUS BUTTON BACK TO TOP juga loh. XD
Ini hanya untuk platform blogspot ya...Wordpress saya gak tahu caranya, maklum belum pengalaman pakai wordpress hehe...
1. Langkah pertama yang pasti adalah kamu harus login blogspot kamu dulu. Sudah tahukan ya?
2. Kemudian pada dashboard klik Template > Edit HTML. Oiya, supaya safety silakan kamu backup dulu HTMLnya ya dengan cara klik Tombol Backup/ Restore di sebelah kanan atas.
3. Sudah? Kalau sudah balik lagi klik Edit HTML, cari kode <head> terus paste-kan kode dibawah ini. Kemudian klik Save Template.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Note: Sebelum kamu pastekan kode diatas, harap pastikan bahwa dibawah kode <head> belum ada kode tersebut. Kalau sudah ada jangan dipastekan lanjut saja ke step nomor 4.
4. Sekarang klik Layout > Klik Add Gadget > Pilih HTML/ Javascript. Dan pastekan kode dibawah ini. Lalu klik Save.
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="MASUKKAN URL GAMBAR KAMU" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="MASUKKAN URL GAMBAR KAMU" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
Nah, huruf yang saya kasih warna merah itu silakan diganti dengan URL dari gambar yang akan kamu gunakan. Bisa diupload terlebih dahulu di photobucket, blog, dll suka-suka kamu. Dan copy pastekan link URL gambar tersebut di text yang berwarna merah.
Nih saya kasih bonus button back to top nya. Oiya, tinggal klik aja salah satu gambar dibawah ini yang kamu sukai (kalau ada yang suka sih hahaha...) trus copy aja link URL-nya. Mudah bukan? Mau di Save As juga boleh kakak. :)
Selamat mencoba, semoga tutorial kali ini bisa membantu dan bermanfaat.
Lihat lebih banyak artikel seperti ini disini, TUTORIAL.
Source: http://www.carrieloves.com/2014/08/how-to-install-a-scroll-to-top-button/

mantep nih tapi ada yang gambar roket gak mba,, biar kaya ada animasinya gitu :D
ReplyDeletegak ada ewh...belum sempet bikin yg aneh2 mas XD
Deletegambar back to top bisa di variasi dg gambar sendiri ya.. mantep
ReplyDeleteyap...bisa banget XD
DeleteSiiip tenan dek....aku baru mau pasang nih.. :D
ReplyDeletesemoga berhasil bun :)
Deletekeren... saya nyari tutorial gini nih.. makasih ya mba....
ReplyDeletesama2 mas....
Deletemakasih tutorialnya mba. saya bukmark dulu :)
ReplyDeletesilakan mba riana :)
Deletenice! makasih infonya mbak ...
ReplyDeletesama2 :)
DeleteKemarin buat widget about me, sukses hasilnya. Mudah bet. Nah ntar yg ini saya coba juga ah...:D
ReplyDeletesemoga berhasil mba oka :)
Deleteheheheee....
ReplyDeletesalah ketik aku delete kok jadinya begitu,,begini dan hasilnya agak typho :)
ada cara buat tambah music mba ?
mau coba deh caranya :)
makasih sudah sharing ^_^
asiikk, nunggu tips selanjutnya :D
ReplyDeletewahhhh. sangat membantu informasinya. mari di coba untuk diaplikasikan
ReplyDeletemak,, makasih banget,,, langsung dieksekusi, dan alhamdulillah Berhasil,,berhasil,,berhasil,,,hore (gaya Dora the explorer) xixix,, makasih mak,, kecup deh ah,,,
ReplyDeletebookmark duyuuuu
ReplyDeleteKeren...
ReplyDeleteKalau dipakai di template wordpress bisa gak?
ReplyDeleteYang ini gak bisa sepertinya mas...
DeleteWah.. pake js ya, mbak? Ini akan nambah berat loading blog lho. :)
ReplyDeleteIya sih, tapi pilihanlah mas...kalau mau diaplikasikan silakan, gak juga gak papa hahhaa...
Delete*menunggu yang wp*
ReplyDelete:)
aaahh makasiih kaka... akhirnyaa bisa punya back to top hihihi
ReplyDeleteUtk mana dong?
ReplyDeleteapanya yang mana mba non? XD
Deletewah... mantap tutorialnya nih Mbak. Makacih ya....
ReplyDeleteBiar lebih rapi. mending kode HTML nya di masukin ke kotak teks, teh...
ReplyDeleteTadi saya main ke Halaman about me, contact us, dan privacy policy..
Keren. Setuju untuk mengakui kelahiran 95. Meskipun dengan berat hati. Hahaha
Hahaha...jangan berat dong ringanin aja :P
DeleteThanks sharingnya Mba. Saya baru pasang juga tombol back to top sekitar 2 minggu yang lalu. Mampir ya ke blog saya. Nuhun. Salam sejuk dari Kota Bandung.
ReplyDeleteKebetulan template bawaan saya udah pakai tombol ini mbak, tapi pengen juga ganti gambarnya soalnya gambar yang sekarang itu terlalu pasaran, udah banyak yang makai.
ReplyDeleteYesss dapet tutorialnya di sini. Makacieeeeh :*
ReplyDeleteAku gak ada yang beginian T^T Aku mau aku mau aku mau~ **gaya mei mei**
ReplyDeleteBakalan dicoba ntar malem ini **senyum2 gak jelas**
http://farrelandmerry.blogspot.co.id/
berhasil berhasil hore!
ReplyDeletebtw kalo mau kasih credit di "back to top" button nya gimana yak?
maacihhhh
keren nie mbak, ijin copas yaw
ReplyDeleteBlog kamu helpssss me A LOT,, Thanksssss handdriati.. Good job.. Aku udah baca setengah dr semua post kamu hahahhahahhaha... *ampe subuh.. Ayo tanggung jawab ahahahahahha...
ReplyDeleteOiaaa, kalau boleh... Ajarin dong cara bikin tempilan untuk : Other Articles dibawah setiap post itu hihihihihihii..
Trussssss... Makasih banyakkk untuk semua ilmunya yaaa.. Upahmu besar di surgaaaa.. Amennnnnnn... Btw i'll follow ur sosmed ya... Makasihhh makasihhhhhh..
ROOSVANSIA | IM THE ONLY DAUGHTER
Aaaaaaaaaaa....Sama-sama Mba Roos dan makasih banyak...Iya, sudah aku follback juga ya mba :)
DeleteWih...sampai subuh? Hebaaattt....Semangat Mba hihihi...*terharu*
OK mba, nanti aku tulisin ya di artikel blogging tips.
Senang kalau bisa bermanfaat dan membantu Mba Roos :*
Hae, Mbak. Thank you tutorialnya, membantu banget!
ReplyDeleteSudah tak cobain langsung di blog. Cuss~ :))
Mbak, kemaren aku gagal bikin. Sekarang aku coba lagi dan berhasil..
ReplyDeletewiih, makasih ya. Nanti mau coba bikin gambar sendiri :)
mau coba juga aaahhh.. thanks for share yah Mbak :)
ReplyDeletethumbs up up up lah, makasih bgt sharenya kak, dan pastinya tuk coding-nya juga
ReplyDeleteterima kasih atas informasinya mbak dan sudah saya terapkan di blog saya www.pergipedia.com
ReplyDeletemonggo mampir mbak!
Nice info mba, mau kucoba ..mks mba
ReplyDeleteSangat bermanfaat.
ReplyDeleteMampir ya ke blog saya di: sulukserah.blogspot.com :-)
Keren postingannya!
ReplyDeleteMampir juga ke sini ya http://www.yahya25.id/2017/05/membuat-back-to-top-yang-menarik.html
Makasih Mbak, sudah saya dipasang di Blog
ReplyDelete