3 Cara Membuat Tombol Back to Top Keren di Blogger

3 Cara Membuat Tombol Back to Top Keren di Blogger - KUBIS.online - Dalam dunia blogging, kenyamanan pengunjung adalah salah satu faktor penting yang tidak boleh diabaikan. Salah satu fitur sederhana namun sangat bermanfaat untuk meningkatkan pengalaman pengguna adalah tombol back to top.

Fitur ini memungkinkan pengunjung untuk kembali ke bagian atas halaman hanya dengan satu klik, tanpa harus melakukan scroll panjang yang melelahkan.

Terutama pada artikel dengan konten panjang, keberadaan tombol ini bisa membuat navigasi menjadi jauh lebih praktis dan efisien.

Selain dari segi fungsi, tombol back to top juga memiliki peran penting dalam mempercantik tampilan blog. Dengan desain yang tepat, tombol ini bisa menjadi elemen visual yang menarik dan terlihat profesional.

Tidak heran jika banyak blog modern saat ini, termasuk situs seperti kubis.online, sudah menggunakan tombol back to top dengan desain yang minimalis namun tetap elegan.

Hal ini menunjukkan bahwa detail kecil seperti ini dapat memberikan kesan besar terhadap keseluruhan tampilan website.

Disini kamu tidak perlu menggunakan plugin tambahan atau kemampuan coding yang rumit untuk membuat tombol back to top di Blogger.

Dengan beberapa baris kode sederhana, kamu sudah bisa menghadirkan fitur ini di blog kamu. Bahkan, kamu bisa menyesuaikan desainnya agar sesuai dengan tema dan gaya tampilan blog yang kamu miliki.

Nah langsung saja berikut ini saya akan membagiakn beberapa cara mudah untuk membuat tombol back to top yang keren dan fungsional di Blogger.

Mulai dari versi sederhana hingga desain yang lebih modern dengan efek animasi, semuanya bisa kamu terapkan dengan cepat. Yuk, simak langkah-langkahnya berikut ini!

Cara Menggunakan Kode CSS di Blogger

Agar tombol back to top bisa berfungsi dengan baik, kamu perlu menambahkan kode CSS ke dalam template Blogger. Tenang saja, caranya sangat mudah dan bisa dilakukan oleh pemula sekalipun.

Pertama, masuk ke dashboard Blogger kamu, lalu pilih menu Tema. Setelah itu klik tombol Edit HTML untuk membuka kode template blog.

Selanjutnya, tekan CTRL + F pada keyboard untuk mencari bagian kode CSS. Biasanya ditandai dengan tag <style> atau <b:skin>.

Jika sudah ketemu, silakan scroll ke bagian paling bawah dari kode tersebut, lalu tempelkan kode CSS yang sudah kamu salin tepat di atas penutup </style> atau </b:skin>.

 /* Tempel kode CSS di sini */

Setelah itu, klik tombol Simpan untuk menerapkan perubahan.

Untuk kode HTML tombolnya, kamu bisa menempatkannya tepat sebelum tag penutup </body>. Sedangkan untuk JavaScript, letakkan juga di bagian bawah sebelum </body> agar tidak mengganggu loading halaman.

Setelah semua kode terpasang, silakan buka blog kamu dan coba scroll ke bawah. Jika berhasil, tombol back to top akan muncul dan bisa digunakan dengan baik.

Dengan cara ini, kamu bisa dengan mudah menambahkan berbagai fitur keren ke blog tanpa harus menguasai coding secara mendalam.

Back to Top Sederhana

Gunakan kode berikut untuk membuat tombol sederhana tanpa efek tambahan.


<a href="#" class="back-to-top">↑</a>


.back-to-top{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#000;
  color:#fff;
  padding:10px 15px;
  border-radius:50px;
  text-decoration:none;
  font-size:18px;
}

Back to Top dengan Efek Scroll

Tombol akan muncul saat halaman di-scroll dan memiliki efek halus.


<button id="backTop">↑</button>


#backTop{
  position:fixed;
  bottom:20px;
  right:20px;
  display:none;
  background:#000;
  color:#fff;
  border:none;
  padding:10px 15px;
  border-radius:50%;
  cursor:pointer;
}


var btn = document.getElementById("backTop");

window.onscroll = function() {
  if (document.documentElement.scrollTop > 200) {
    btn.style.display = "block";
  } else {
    btn.style.display = "none";
  }
};

btn.onclick = function() {
  window.scrollTo({top:0, behavior:'smooth'});
};

Back to Top Modern dengan Animasi

Tampilan lebih modern dengan efek hover dan animasi smooth.


<div id="topBtn">↑</div>


#topBtn{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#111;
  color:#fff;
  width:45px;
  height:45px;
  text-align:center;
  line-height:45px;
  border-radius:50%;
  cursor:pointer;
  display:none;
  transition:all .3s;
}

#topBtn:hover{
  background:#333;
  transform:translateY(-5px);
}


var topBtn = document.getElementById("topBtn");

window.addEventListener("scroll", function(){
  if(window.scrollY > 300){
    topBtn.style.display = "block";
  }else{
    topBtn.style.display = "none";
  }
});

topBtn.onclick = function(){
  window.scrollTo({top:0, behavior:'smooth'});
};

Dengan menggunakan salah satu cara di atas, kamu bisa membuat tampilan blog menjadi lebih rapi dan profesional. Pilih desain yang paling sesuai dengan gaya template kamu agar hasilnya maksimal.

Penutup

Itulah 3 Cara Membuat Tombol Back to Top Keren di Blogger yang bisa saya bagikan pada kesempatan kali ini, semoga bisa bermanfaat untuk teman - teman blogger pemula seperti saya, yang suka oprek - oprek templatenya agar tampilannya menjadi lebih keren, selamat mencoba. klik Ikuti Web ini

🌐 Baca Juga

Mr.Surya

TEACHER | BLOGGER | CONTEN WRITER