
Tombol Back To Top adalah membuat sebuah tombol kembali ke atas dengan efek geser yang halus ke atas bisa jadi merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat dengan tampilan dan sentuhan yang cukup elegan.
Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.
Sedangkan tombol ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya.
Bisa jadi jika sebuah blog yang sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidaklah memberatkan, serta tombol ini juga kompatibel untuk hampir kebanyakan browser/peramban.
Dengan kode tersebut dibawah anda pun dapat mengedit sebagaimana mestinya sesuai keinginan, seperti efek fade in dan fade out, serta gambar tombolnya.
Tutorial dibawah ini menunjukan cara membuat tombol back to top dengan mudah dan cukup singkat, hanya memerlukan waktu beberapa menit saja. Untuk Membuat Tombol Back To Top:
1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode </head>
menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode </head>
Tapi jika anda sudah menerapkan kode ini, maka lewati langkah ini. Kode dibawah ini sangat umum digunakan di berbagai blog dengan banyak versi.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
Catatan: jika telah ada maka lewati langkah diatas, tapi usahakan menggunakan versi 2.x
7. Masih di tempat yang sama – Cari kode </head>
8. Masukan script dibawah ini diatas </head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
Keterangan script tombol back to top
Warna Biru adalah jarak tombol back to top muncul dan tersembunyi
Warna Hijau adalah kecepatan pada saat melompat ke atas
9. Cari kode ]]></b:skin>
atau </style>
10. Masukan kode CSS dibawah ini diatas ]]></b:skin>
atau </style>
di bagian head.
#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}
Warna Hijau adalah posisi dari tombol tersebut.
11. Cari kode </body>
12. Masukan kode di bawah ini di atas </body>
<div id='ScrollToTop'><img alt='Back to top' src='//4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>
Warna pink adalah link dari gambar tombol back to top, sebaiknya diganti / disave dan upload menggunakan tempat upload gambar masing-masing.
13. Save Template dan lihat hasilnya.
Demikian cara membuat tombol back to top dengan tampilan yang cukup menarik, semoga dapat bermanfaat.
Patrick Galugu
Keren, thank you.
Anonim
lol =D
Indri Lidiawati
Lumayan banyak scriptnya ya mas,,, tapi keren jadinya nanti :-bd
btw ini rupanya adminnya suka ma'em gado2 ya mas,,, sama dunk seperti saya, hehehe 😀
Silakan mampir ke gubuk derita saya, hmmm 🙂
Aditya-Web.com
Bagus mas, kebetulan sudah saya terapkan di blog saya. :-bd
Tatang Gunawan S
ya begitulah 🙂 saya suka mampir ko… hampir sama setiap yang komen..
Rickonblog
wah…keren sob..pake js…dlunya sy cm taunya dtmbh # aja…thanks ya….
Anonim
lollol
@@,
😉
:-bd
:p
Apk
langsung dicoba mas bro…. thank ya
Eni Mart
http://4.bp.blogspot.com/-WBrX4uPIuis/Ul1iffRZnII/AAAAAAAAHGs/0U4tYBEKK_g/s1600/jempol2.gif
Ahmad Sayadi
Lik
obat kolesterol
terimakasih atas informasinya, semoga bermanfaat.
dedi prayogi
thx mas, lngsung tk coba ey :-bd
sahabatblogger77
jika masangnya menggunakan gadget kode CSSnya apa gan…soalnya banyak banget yang harus dibuat kodenya
Terimakasih
info menarik
thank infonya gan :-bd
yahya25.id
Keren postingannya!
Garuda Web Development
Tengkiw sharingnya…
Jeng Susan
Terimakasih sudah berbagai. Sukses selalu untuk website anda.. Salam
Muhyiddin
Thanks sangat membantu,
btw cara membuat blockquote seperti diatas bagaimana ya?
jangan lupa kunjungi blog saya https://infodigitalis.blogspot.com/
Fantastis
Dapet dari Blog Kang Ismet, trus di modif dikit… udah lama