Membuat Tombol Back to Top Di Blogger Blogspot

Membuat Tombol Back To Top Di Blogger Blogspot – Hallo Teman-teman blogger yang saya cintai,dan saya banggakan. Kali ini saya akan membuat tombol back to up atau tombol kembali ke atas. Pasti kamu bertanya kan…. kenapa sebuah blog atau website di kasih tombol kembali ke atas????,gunanya untuk mempermudahkan para visitor melihat layar atas tanpa harus scroll pake mouse,tinggal klik tombol sudah sampai. Ini juga tips agar para visitor kita betah berlama-lama di blog kita,bahkan besoknya kembali lagi. Jarang kita jumpai di sebuah blog maupun website yang menerapkan sistem ini,jadi langsung saja ya lihat caranya.

1. Silahkan anda copypaste kode di bawah ini,lalu taruh di atas kode skin ]]></b:skin> Atau Mulai dari kode <style type=’text/css’> sampai kode penutup </style>

#BounceToTop { background: #3498DB; text-align: center; position: fixed; bottom: 14px; right: 20px; cursor: pointer; width: 30px; height: 30px; padding: 5px; display: none;}
#BounceToTop:before { content: ""; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #444 transparent; line-height: 0; transition: all 0.3s ease-out;}
#BounceToTop:hover:before { content: ""; position: absolute; bottom: 10px; right: 5px; width: 0; height: 0; border-style: solid; border-width: 0 15px 20px 15px; border-color: transparent transparent #ddd transparent; line-height: 0;}
#BounceToTop:after {  border-color: transparent transparent #3498DB transparent; content: ""; position: absolute; bottom: 10px; right: 11px; width: 0; height: 0; border-style: solid; border-width: 0 9px 12px 9px; line-height: 0;}

2. Setelah itu cari kode </body>
3. Lalu taruh kode di bawah ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function () {

$(window).scroll(function () {

if ($(this).scrollTop() > 100) {

$('#BounceToTop').slideDown(200);}
        else {

$('#BounceToTop').slideUp(300);}

});

$('#BounceToTop').click(function () {

$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);

});
});
//]]>
</script>
  <div id='BounceToTop'/>

Note: Untuk template yang saya bagikan taro kodenya di atas kode  &lt;!–</body>–&gt;&lt;/body&gt;

4. Setelah itu simpan dan lihat hasilnya.

Selamat mencoba,semoga visitornya makin banyak ya.

Kesimpulan

Tombol Back to Top adalah fitur sederhana namun sangat berguna untuk meningkatkan kenyamanan pengunjung blog, terutama jika konten kamu cukup panjang. Dengan sedikit modifikasi HTML, CSS, dan JavaScript, kamu bisa membuat blog di Blogger (Blogspot) terasa lebih profesional dan user-friendly.

FAQ – Membuat Tombol Back to Top di Blogger (Blogspot)

1. Apa fungsi tombol Back to Top di blog?

Tombol ini membantu pengunjung kembali ke bagian atas halaman blog dengan cepat, terutama saat membaca artikel panjang. Ini meningkatkan kenyamanan dan navigasi pengguna.

---

2. Apakah tombol Back to Top bisa dipasang di semua template Blogger?

Ya, tombol ini bisa diterapkan di hampir semua template Blogger. Namun, hasil tampilan bisa sedikit berbeda tergantung pada struktur dan gaya CSS dari tema yang digunakan.

---

3. Apakah saya perlu menggunakan JavaScript untuk fitur ini?

Ya. JavaScript dibutuhkan agar tombol bisa muncul saat pengguna scroll ke bawah dan agar efek scroll ke atas berjalan otomatis dengan halus.

---

4. Di mana sebaiknya saya meletakkan kode tombol Back to Top di HTML Blogger?

• Kode HTML dan JavaScript: Tempatkan sebelum tag penutup </body>
• Kode CSS: Letakkan sebelum tag penutup </head>

---

5. Bagaimana jika tombol tidak muncul setelah saya pasang kodenya?

Beberapa hal yang bisa dicek:

• Pastikan kode JavaScript dan CSS tidak tertimpa oleh script lain
• Cek apakah ada kesalahan ketik saat menyalin kode
• Periksa apakah class="back-to-top" ditulis dengan benar
• Lihat di halaman langsung, bukan di mode pratinjau (preview)

---

6. Apakah tombol ini bekerja di versi mobile?

Secara umum, iya. Tapi kamu mungkin perlu menyesuaikan ukuran dan posisi tombol lewat media query CSS agar lebih cocok tampil di layar kecil.

Sharing is Caring:

Facebook 0

Twitter 0

Copy 0