Wednesday, 9 September 2015

Cara Membuat Tombol Back To Top di Blog

Tutorial_cara_membuat_tombol_back_to_top_di_blog

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

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

Download free icon back to top Download free icon back to top Download free icon back to top Download free icon back to top

Download free icon back to top Download free icon back to top Download free icon back to top Download free icon back to top Download free icon back to top


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/


45 comments:

  1. mantep nih tapi ada yang gambar roket gak mba,, biar kaya ada animasinya gitu :D

    ReplyDelete
    Replies
    1. gak ada ewh...belum sempet bikin yg aneh2 mas XD

      Delete
  2. gambar back to top bisa di variasi dg gambar sendiri ya.. mantep

    ReplyDelete
  3. Siiip tenan dek....aku baru mau pasang nih.. :D

    ReplyDelete
  4. keren... saya nyari tutorial gini nih.. makasih ya mba....

    ReplyDelete
  5. makasih tutorialnya mba. saya bukmark dulu :)

    ReplyDelete
  6. Kemarin buat widget about me, sukses hasilnya. Mudah bet. Nah ntar yg ini saya coba juga ah...:D

    ReplyDelete
  7. heheheee....
    salah ketik aku delete kok jadinya begitu,,begini dan hasilnya agak typho :)
    ada cara buat tambah music mba ?
    mau coba deh caranya :)
    makasih sudah sharing ^_^

    ReplyDelete
  8. wahhhh. sangat membantu informasinya. mari di coba untuk diaplikasikan

    ReplyDelete
  9. mak,, makasih banget,,, langsung dieksekusi, dan alhamdulillah Berhasil,,berhasil,,berhasil,,,hore (gaya Dora the explorer) xixix,, makasih mak,, kecup deh ah,,,

    ReplyDelete
  10. Kalau dipakai di template wordpress bisa gak?

    ReplyDelete
  11. Wah.. pake js ya, mbak? Ini akan nambah berat loading blog lho. :)

    ReplyDelete
    Replies
    1. Iya sih, tapi pilihanlah mas...kalau mau diaplikasikan silakan, gak juga gak papa hahhaa...

      Delete
  12. aaahh makasiih kaka... akhirnyaa bisa punya back to top hihihi

    ReplyDelete
  13. wah... mantap tutorialnya nih Mbak. Makacih ya....

    ReplyDelete
  14. Biar lebih rapi. mending kode HTML nya di masukin ke kotak teks, teh...

    Tadi saya main ke Halaman about me, contact us, dan privacy policy..
    Keren. Setuju untuk mengakui kelahiran 95. Meskipun dengan berat hati. Hahaha

    ReplyDelete
    Replies
    1. Hahaha...jangan berat dong ringanin aja :P

      Delete
  15. Thanks 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.

    ReplyDelete
  16. Kebetulan template bawaan saya udah pakai tombol ini mbak, tapi pengen juga ganti gambarnya soalnya gambar yang sekarang itu terlalu pasaran, udah banyak yang makai.

    ReplyDelete
  17. Yesss dapet tutorialnya di sini. Makacieeeeh :*

    ReplyDelete
  18. Aku gak ada yang beginian T^T Aku mau aku mau aku mau~ **gaya mei mei**

    Bakalan dicoba ntar malem ini **senyum2 gak jelas**

    http://farrelandmerry.blogspot.co.id/

    ReplyDelete
  19. berhasil berhasil hore!

    btw kalo mau kasih credit di "back to top" button nya gimana yak?

    maacihhhh

    ReplyDelete
  20. Blog kamu helpssss me A LOT,, Thanksssss handdriati.. Good job.. Aku udah baca setengah dr semua post kamu hahahhahahhaha... *ampe subuh.. Ayo tanggung jawab ahahahahahha...

    Oiaaa, 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

    ReplyDelete
    Replies
    1. Aaaaaaaaaaa....Sama-sama Mba Roos dan makasih banyak...Iya, sudah aku follback juga ya mba :)
      Wih...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 :*

      Delete
  21. Hae, Mbak. Thank you tutorialnya, membantu banget!
    Sudah tak cobain langsung di blog. Cuss~ :))

    ReplyDelete
  22. Mbak, kemaren aku gagal bikin. Sekarang aku coba lagi dan berhasil..
    wiih, makasih ya. Nanti mau coba bikin gambar sendiri :)

    ReplyDelete
  23. mau coba juga aaahhh.. thanks for share yah Mbak :)

    ReplyDelete
  24. thumbs up up up lah, makasih bgt sharenya kak, dan pastinya tuk coding-nya juga

    ReplyDelete
  25. terima kasih atas informasinya mbak dan sudah saya terapkan di blog saya www.pergipedia.com
    monggo mampir mbak!

    ReplyDelete
  26. Nice info mba, mau kucoba ..mks mba

    ReplyDelete

Terimakasih sudah berkomentar yang sopan dan membangun. Jangan bosan untuk berkunjung lagi ya. :)