Thursday, April 2, 2020

Yuk pasang tombol back to top pake css sama html

Hasan Askari : Yuk pasang tombol back to top pake css sama html

Basa-basi

Salah satu fitur blog yang sayang untuk dilewatkan ialah fitur back to top. Yang mana apabila kita menekan tombol tersebut, maka kita akan diarahkan ke bagian teratas.
Fitur ini sudah banyak dimiliki oleh Blog ternama hingga yang kecil-kecil. Sebab keberadaannya memang sangat berguna bagi pengunjung. Sehingga, pengunjung pun tak perlu scroll ke atas secara manual.
Namun, sampai detik ini ada saja beberapa blog yang belum dipasang fitur back to top ini. Entah karena pemilik blog enggan memasangnya atau memang tak tau cara memasangnya. Padahal jika tidak dipasang, bakal membuat pengunjung capek scroll ke atas. Apalagi bila isi artikelnya panjang sekali.
Nah, di sini saya ingin mengajak sobat Blogger yang belum memakai tombol back to top untuk menggunakannya, supaya tidak menyengsarakan pengunjung.

Sebagai catatan, back to top di sini akan dibuat menggunakan css dan html. Sehingga, bisa terasa lebih ringan dibandingkan menggunakan javascript atau lainnya (?)

Kode back to top pake css dan html

Untuk kode dan cara memasangnya ialah sebagai berikut:
1. Cadangkan template terlebih dahulu untuk mengatasi apabila terjadi eror, melalui menu tema > cadangkan/download > download
2. Masuk ke menu edit template melalui menu tema > edit html
3. Silakan gunakan kolom pencarian untuk mempermudah pengeditan dengan menekan tombol F4
4. Masukkan kode html ini tepat di bawah tag <body>

<a href="#" class="backTop">&#10140;</a>

5. Masukkan kode css berikut ini tepat di atas kode ]]</b:skin>

.backTop {

font-size:200%;

background-color: transparent;

color: teal;

text-decoration:none;

position:fixed;

bottom:30px;

right:20px;

transform:rotate(-90deg);

z-index:9999;

}


html{

scroll-behavior:smooth

}


6. Simpan tema Jika langkah tersebut dilakukan dengan benar, maka tombol back to top seharusnya muncul di blog kita

Penjelasan kodenya

Bagi sobat yang penasaran maksud kode-kode tersebut, mari simak ya berikut ini:

Penjelasan kode html

Tadi kan kita menambahkan kode html ini:
<a href="#" class="backTop">&#10140;</a>

Fungsi-fungsinya ialah ini:
<a href="#">&#10140;</a> fungsinya supaya tombol tersebut apabila diklik, maka langsung pergi ke atas. Sebenarnya sampai di sini saja kita sudah membuat tombol back to top. Akan tetapi, tombolnya tidak smooth alias kasar. Sehingga jika kita menggunakan ini saja tanpa css, maka saat kita di bawa ke atas, malah tidak ada efek scrollnya. Untuk itu kita perlu menambahkan kode css.
Adapun kode ini [ &#10140; ] fungsinya untuk memunculkan icon panah ini [ ➜ ]. Akan tetapi karena arah iconnya ke kanan, maka kita perlu css lagi supaya bisa diputar ke atas.
class="backTop" digunakan untuk memanggil kode cssnya. Kan tadi cssnya ditaruh sebelum tag ]]></b:skin>, sedangkan tombolnya diletakkan di bawah tag <body>. Sehingga css nya harus dipanggil terlebih dahulu supaya cssnya bisa berjalan.
Untuk memanggil css sebenarnya ngga cuma make class=" ", melainkan bisa juga menggunakan kode id=" ". Akan tetapi, di sini kebetulan menggunakan class saja. Oh ya, keduanya biasa disebut sebagai atribut, loh.

Penjelasan kode css

Sedangkan, untuk fungsi kode cssnya ialah:
.backTop digunakan sebagai variabel (penampung data). Tanda titik sebelum kata backTop berguna supaya bisa dipanggil menggunakan kode atribut class. Adapun jika kita ingin memanggil kode css menggunakan atribut id=" ", maka kita perlu mengganti titiknya menjadi tanda pagar. Sehingga menjadi seperti ini: #backTop

Tanda { dan } berfungsi untuk membatasi data yang ditampung oleh .backTop. Sehingga bisa dibatasi penggunaannya. Nah, di dalam tanda { dan }, barulah kita memasukkan kode untuk mendesain tombolnya. Desain yang dibuat di sini ialah:
  • font-size:200%; digunakan untuk mengatur ukuran tombol sebesar 200% dari ukuran defaultnya
  • background-color: transparent; digunakan untuk mewarnai background-color dengan warna transparan
  • color: teal; digunakan untuk mewarnai tombol back to topnya dengan warna teal
  • text-decoration:none; digunakan untuk menghilangkan garis bawah pada tombol. Sebab secara default, tombol tersebut akan bergaris bawah dikarenakan menggunakan tag <a>tombol</a>.
  • position:fixed; digunakan supaya posisi tombolnya tetap dan tidak berubah-ubah walaupun halaman di-scroll ke atas atau ke bawah
  • bottom:30px; setelah ditetapkan position:fixed; maka kita perlu mengatur posisi ingin di taruh di mana. Kode tersebut berguna untuk meletakkan tombol berada 30px dari layar paling bawah.
  • right:20px; fungsinya mirip seperti sebelumnya, akan tetapi ini letaknya 20px dari kanan. Sehingga tombolnya kini berada 20px dari kanan, dan 30px dari bawah.
  • transform:rotate(-90deg); ini digunakan untuk memutar tombol 90 derajat berlawanan arah jarum jam. Sehingga tombol yang awalnya arahnya ke kanan, kini bisa berubah ke atas.
  • z-index:9999; digunakan supaya tombol berada di lapisan paling depan. Jika kita pernah mengedit foto, biasanya ada pengaturan to front. Nah, fungsinya z-index ini sama, yakni mengatur lapisan-lapisannya. Adapun jika ada css yang z-indexnya melebihi 9999, maka tombol ini akan tertutupi oleh css lain tersebut.


Itu semua baru mendesain tombolnya, loh. Sedangkan supaya mendapatkan efek scroll ketika tombol back to top ditekan, kita perlu menambahkan kode ini

html{

scroll-behavior:smooth

}

html digunakan sama seperti .backTop tadi. Akan tetapi, jika kita bertanya-tanya, mengapa kok gak ada titik atau tanda pagar sebelumnya? Maka jawabannya ialah karena html merupakan tag. Sedangkan tag dalam css itu tidak boleh dikasih titik atau tagar sebelumnya, melainkan menuliskannya secara langsung.
Terakhir, kode scroll-behaviour:smooth sendiri digunakan supaya ketika efek scroll pada html menjadi smooth atau halus.

Akhir kata

Itu dia tentang back to topnya. Mari permudah pengunjung kita dalam mengakses blog kita. Jangan lupa untuk memasangnya.

Semoga bermanfaat.

Disqus Codes
  • Untuk menulis teks tebal , sila gunakan atau
  • Untuk menulis teks miring, sila gunakan atau
  • Untuk menulis teks bergaris bawah , sila gunakan
  • Untuk menulis teks bergaris tengah , sila gunakan
  • Untuk menulis kode HTML, silakan pakai atau
    or

    dan gunakan parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Dapatkan Kabar Terbaru Melalui Email