Cara mengatur posisi tombol back to top

Assalamualaikum sahabat blogger,sahabat inverter dan saya ucapkan selamat malam juga buat sahabat  Jt ,
 buat para pengunjung salam manis selalu ya..😊,

Postingan kali ini saya akan membahas

Cara mengatur posisi tombol back to top

"Mengapa to tombol back to rop harus diatur posisinya ?"

Ya tentunya tombol ini bisa saja akan berhimpitan dengan widget lainnya jika tanpa harus diatur posisinya,suatu contoh ketika kita memasang tombol share melayang yang berada dibagian bawah maka akan terlihat berdampingan dengan  tombol kembali keatas atau tombol back to top tersebut.

Cara mengatur posisi tombol back to top
Tombol berhimpitan

Pada gambar diatas terlihat kurang nyaman dipandang jika letaknya berada dipinggir dan kurang pas,selebihnya lagi terlalu berdekatan dengan tombol share.

"Jadi bagaimana cara merubah posisinya 

Untuk merubah posisi tombol kembali keatas kita hanya perlu sedikit merubah ukuran px yang terletak pada bagian css

/* Back To Top */ #back-to-top{background:#336699color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:10px;z-index:999}

Dari kode css diatas pada bagian yang telah saya tandai dengan warna adalah elemen yang menjadi pokok bahasan pada postingan kali ini.

Berikut adalah kesimpulan dari kode warna diatas;

  • 8 px;
Pada bagian ini adalah untuk mengatur posisi  icon back to top akan melebar kesamping apabila ukuran 8 px diperbesar

Contoh dari 8 px diubah 80 px

Cara mengatur posisi tombol back to top
Melebar kesamping

  • 10 px
Untuk mengatur ukuran panjang keatas semakin besar ukuran px nya maka semakin panjang

  • 24 px 
Semakin besar ukuran px nya maka icom back to top akan besar pula

  • 20 px
Untuk mengatur icon agar terletak naik keatas 

Contoh dari 20 px menjadi 100 px

Cara mengatur posisi tombol back to top
Tombol keatas gif

  • Terakhir 10 px 
Untuk mengatur letak kesamping kiri,

Contoh dari 10 px diubah 40 px

Cara mengatur posisi tombol back to top
Back to gif


Nah demikianlah penjelasan dari saya,semoga bermanfaat.

Wassalam 

No comments for "Cara mengatur posisi tombol back to top"