PpVYjUNPJxHpgz48ODtJ762UUZTduUYkOHyHjNeZ
Bookmark

Cara Membuat Tombol Back To Top Di Blogger

Membuat Back To Top


Pernahkah kamu melihat sebuah  tombol  pada sebuah website yang jika diklik halaman website tersebut akan  kembali keatas. Yah, itu adalah sebuah elemen navigasi website yang sering dinamai dengan tombol "Back To Top" atau "Kembali Ke Atas". Jika kamu belum pernah melihatnya, kamu bisa melihatnya secara langsung pada blog ini yang terletak dibagian bawah sebelah kanan.


Sayang sekali jika sebuah blog atau website tidak memasangnya. Bagaimana tidak? Jika ada sebuah fitur fungsionalis yang memiliki kelebihan tidak kita mamfaatkan. Nah... jika kamu beralasan tidak tahu cara membuatnya, maka pada artikel ini saya akan membagikan panduan untuk membuatnya.


Apasih kegunaan Tombol Back To Top?

Dalam pengalaman berselancar di situs web maupun blog, sering kali pengguna harus menggulir halaman ke bawah untuk menjelajahi konten yang lebih banyak. Namun, dengan adanya tombol "Back to Top" atau "Kembali ke Atas," pengguna dapat dengan mudah kembali ke bagian atas halaman tanpa harus melakukan guliran panjang. Tombol ini tidak hanya meningkatkan kenyamanan pengguna, tetapi juga membantu mengoptimalkan navigasi dan interaksi pengguna dengan situs blog atau web kamu.

Dengan mengikuti panduan ini, kamu akan memiliki alat yang berharga untuk meningkatkan pengalaman pengguna dalam menjelajahi situs web kamu. Dengan begitu, pengguna tidak hanya akan merasa lebih nyaman dan terbantu, tetapi kamu juga dapat menghadirkan elemen desain yang menarik dan fungsional pada halaman blog atau websitemu.

Setelah mulai membaca dari atas kamu sudah tahu  mamfaat dan kegunaan tombol back to top ini. Selanjutnya saya akan menjelaskan langkah-demi-langkah bagaimana membuat tombol "Back to Top" yang efektif dan menarik. Saya akan membahas cara implementasi yang dapat kamu gunakan untuk menghadirkan fitur ini dalam situs webmu.


Cara membuat tombol Back To Top

Cukup hanya menggunakan html dan css sederhana, kita bisa membuat tombol Back To Top yang ringan karena tidak menggunakan javascript tambahan. Untuk membuatnya silahkan ikuti panduan berikut.


1. Pertama - tama buka blogmu atau kunjungi blogger.com dan silahkan login jika belum. 

2. Setelah dibawah ke halaman dashboard blogger, buka menu kemudian pilih "Teme" > "Sesuaikan" > "Edit html".

3. Selanjutnya cari kode </head>, untuk lebih gampang gunakan fitur pencarian.

4. Salin kode link font awesome berikut dan tempelkan tepat diatas kode </head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Setelah font awesome ditambahkan maka ilustrasinya akan jadi seperti gambar berikut.



5. Cari kode  ]]> </b:skin>  kemudian salin kode css berikut dan tempelkan sebelum kode atau tepat diatas kode   ]]> </b:skin>   tadi.
.arsa-btn a{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: #2980b9;
  padding: 12px 12px;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15);
}

Setelah css ditambahkan, maka gambaranya akan seperti gambar berikut

Membuat back to top


6. Masih dihalaman edit html yang sama, silahkan cari kode </body>. Kemudian salin kode html berikut dan tempelkan sebelum kode atau tepat diatas kode </body> tadi.

 <div class="arsa-btn">
   <a href="#"><i class="fas fa-arrow-up"></i></a>
 </div>

Perhatikan bagian  atribut href, ubah value # dengan id navbar atau header kamu. Jika tidak ingin repot, tidak usah diubah, biarkan saja begitu.

Setelah html tadi ditambahkan maka kode yang kita pasang seharusnya seperti ini


7. Setelah mengikuti panduan dari nomor satu sampai nomor enam maka hasilnya akan seperti ini

Membuat back to top


Cara mengubah ukuran dan warna tombol Back To Top sebelumya.

Jika ingin mengubah warna font, warna latar belakang dan ukuran  tombol back to top tadi , silahkan ikuti panduan berikut.

1. Pada css tadi silahkan amati dulu(biar paham) dan ubah warna, background dan ukuranya dengan mengganti beberapa value  properti yang ditentukan.

Membuat back to top


2. Untuk mengganti warna fontnya silahkan ubah  value dari properti "color" dengan kode warna lain dan value defaultnya adalah "#fff". Untuk mengetahui kode warna lain bisa buka halaman Generator kode warna pada blog ini.

3. Untuk mengubah background, ubah value dari properti "background" dengan kode warna lain. Value defaultnya adalah "#2980b9" dan untuk mengganti warna lain, buka kembali Generator kode warna sebelumnya untuk melihat kode warna.

4. Untuk mengubah ukuran dari buttonya, ubah value dari dari properti "font-size". Value defaultnya adalah 18px, semakin tinggi angka pixel yang diubah maka semakin besar ukuran buttonnya begitu juga sebaliknya semakin kecil angka valuenya maka ukuranya juga semakin kecil.


Penutup

Itulah tadi panduan membuat tombol "Back To Top" diblogger hanya dengan menggunakan html dan css sederhana. Silahkan ikuti panduanya dengan benar dan teliti supaya kamu tidak menemukan masalah ketika membuatnya. Jika masih ada kendala, jangan sungkan berkomenter dibawah. Ikuti dan pantau blog ini terus untuk mendapatkan konten menarik dan bermamfaat, Terimah kasih.


Posting Komentar

Posting Komentar