Sayangnya, tidak banyak yang tahu cara membuat scroll to top button dengan benar. Yakni, membuat posisi tombolnya tepat sesuai yang diinginkan. Agar tidak "menghalangi" atau sebaliknya ditutupi oleh tampilan iklan sticky (sticky ads/anchor ads).
Begitu pula cara memodifikasi tombol pintas tersebut tak banyak orang tahu. Supaya warna dan bentuknya sesuai dengan warna tema atau tampilan blog. Padahal cara tersebut amatlah mudah. Hanya memerlukan teknik editing kode html sederhana.
Tombol back to top bukan hanya untuk asesoris maupun gagah-gagahan. Lebih dari itu, ia bisa memanjakan pengunjung. Hanya sekali tekan, pembaca blog bisa kembali ke bagian atas halaman dengan cepat. Tanpa perlu menggerak-gerakan jari.
Dengan begitu mood (keadaan hati) para pengguna internet tetap terjaga. Merasa termanjakan, sehingga betah berlama-lama di blog. Harapannya kesan positif tertanam di benak mereka. Akhirnya di kemudian hari kemungkinan berkunjung lagi.
1. Cara Memasang Tombol Back to Top
a. Bukan akun blogger kalian lalu pilih menu "Tema" dan tekan tombol "Edit HTML"
b. Sebelum melanjutkan langkah selanjutnya, pastikan blog kalian sudah terpasang font awesome. Yakni, font yang memuat icon-icon tinggal pakai di web penyedianya. Bila belum silakan tambahkan kode di bawah ini tepat sebelum kode </head>. Untuk mencarinya, letakkan krusor di halaman edit lalu tekan tombol Ctrl+F di keyboard.
a. Bukan akun blogger kalian lalu pilih menu "Tema" dan tekan tombol "Edit HTML"
b. Sebelum melanjutkan langkah selanjutnya, pastikan blog kalian sudah terpasang font awesome. Yakni, font yang memuat icon-icon tinggal pakai di web penyedianya. Bila belum silakan tambahkan kode di bawah ini tepat sebelum kode </head>. Untuk mencarinya, letakkan krusor di halaman edit lalu tekan tombol Ctrl+F di keyboard.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
c. Cari kode ]]></b:skin>. Kemudian letakkan kode di bawah ini tepat di sebelah atasnya.
#back-to-top{background:#4169E1;color:#ffffff;padding:6px 8px;font-size:24px;border-radius:4px} .back-to-top{position:fixed!important;position:absolute;bottom:120px;right:40px;z-index:999}
d. Cari kode </body>. Lalu letakkan kode berikut tepat di atasnya.
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> <i class='fa fa-chevron-up'/> </a></div> <script> $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; }); </script>
e. Langkat terakhir tekan tombol "Simpan tema". Selamat kalian telah berhasil membuat tombol back to top.
Catatan:
Hasil di atas belum tentu cocok dengan kondisi blog kalian. Sebab posisi dan warnanya kemungkinan sangat mengganggu. Alih-alih mempercantik blog justru bikin ilfil. Oleh sebab itu kami berikan panduan memodifikasi tombol scroll to top button.
 |
| Tombol back to top (sumber gambar) |
2. Cara Memodifikasi Back to Top Button
Supaya tampilan back to top button sesuai dengan kondisi blog maka kalian perlu memperhatikan cara berikut.
1. Silakan pahami dulu kode di bawah ini yang tadi telah kalian salin-tempel (copy-paste) tepat di atas kode </b:skin>.
#back-to-top{background:#4169E1;color:#ffffff;padding:6px 8px;font-size:24px;border-radius:4px} .back-to-top{position:fixed!important;position:absolute;bottom:120px;right:40px;z-index:999}
2. Dari kode itu kita dapat mengerti tentang ukuran tombol (button) tersebut. Yakni perbandingan lebar dan tinggi dengan nilai 6:8. Guna merubah ukurannya kalian bisa menggantinya dengan angka lain.
3. Adapun untuk mengatur posisi tombol agar sesuai dengan kebutuhan kalian, silakan ganti angka 120 dan 40 pada kode di atas. Angka 120 menunjukkan posisi vertikal (atas-bawah) tombol. Serta angka 40 merupakan posisi horizontal (kiri-kanan) tombol.
4. Dari kode di atas kita juga tahu tentang warna background tombol tersebut adalah biru (royal blue) seperti tampil di gambar bawah. Nah, untuk merubah warnanya kalian hanya perlu mengganti kode #4169E1 yang berwarna merah di atas dengan warna sesuai blog kalian. Adapun #ffffff merupakan kode warna putih tanpa panah.
3. Adapun untuk mengatur posisi tombol agar sesuai dengan kebutuhan kalian, silakan ganti angka 120 dan 40 pada kode di atas. Angka 120 menunjukkan posisi vertikal (atas-bawah) tombol. Serta angka 40 merupakan posisi horizontal (kiri-kanan) tombol.
4. Dari kode di atas kita juga tahu tentang warna background tombol tersebut adalah biru (royal blue) seperti tampil di gambar bawah. Nah, untuk merubah warnanya kalian hanya perlu mengganti kode #4169E1 yang berwarna merah di atas dengan warna sesuai blog kalian. Adapun #ffffff merupakan kode warna putih tanpa panah.
Berikut daftar kode yang bisa digunakan untuk memilih warna yang sesuai:
| Nama Warna | HEX | RGB | |
|---|---|---|---|
.
| Alice Blue | #F0F8FF | rgb(240, 248, 254) |
.
| Antique White | #FAEBD7 | rgb(251, 235, 217) |
.
| Aqua | #00FFFF | rgb(0, 255, 254) |
.
| Aquamarine | #7FFFD4 | rgb(115, 255, 216) |
.
| Azure | #F0FFFF | rgb(239, 255, 255) |
.
| Beige | #F5F5DC | rgb(245, 245, 223) |
.
| Bisque | #FFE4C4 | rgb(255, 227, 200) |
.
| Black | #000000 | rgb(0, 0, 0) |
.
| Blanched Almond | #FFEBCD | rgb(255, 234, 208) |
.
| Blue | #0000FF | rgb(0, 0, 255) |
.
| Blue Violet | #8A2BE2 | rgb(138, 43, 226) |
.
| Brown | #A52A2A | rgb(165, 42, 42) |
.
| Burly Wood | #DEB887 | rgb(222, 184, 135) |
.
| Cadet Blue | #5F9EA0 | rgb(95, 158, 160) |
.
| Chartreuse | #7FFF00 | rgb(127, 255, 1) |
.
| Chocolate | #D2691E | rgb(210, 105, 30) |
.
| Coral | #FF7F50 | rgb(251, 127, 80) |
.
| Cornflower Blue | #6495ED | rgb(100, 149, 237) |
.
| Cornsilk | #FFF8DC | rgb(225, 248, 220) |
.
| Crimson | #DC143C | rgb(220, 20, 60) |
.
| Cyan | #00FFFF | rgb(62, 254, 255) |
.
| Dark Blue | #00008B | rgb(0, 0, 139) |
.
| Dark Cyan | #008B8B | rgb(29, 139, 139) |
.
| Dark Golden Rod | #B8860B | rgb(184, 134, 11) |
.
| Dark Gray | #A9A9A9 | rgb(169, 169, 169) |
.
| Dark Green | #006400 | rgb(19, 100, 0) |
.
| Dark Khaki | #BDB76B | rgb(189, 183, 107) |
.
| Dark Magenta | #8B008B | rgb(139, 0, 140) |
.
| Dark Olive Green | #556B2F | rgb(85, 107, 47) |
.
| Dark Orange | #FF8C00 | rgb(251, 140, 1) |
.
| Dark Orchid | #9932CC | rgb(153, 50, 204) |
.
| Dark Red | #8B0000 | rgb(139, 5, 0) |
.
| Dark Salmon | #E9967A | rgb(233, 150, 122) |
.
| Dark Sea Green | #8FBC8F | rgb(143, 188, 144) |
.
| Dark Slate Blue | #483D8B | rgb(72, 61, 139) |
.
| Dark Slate Gray | #2F4F4F | rgb(47, 79, 79) |
.
| Dark Turquoise | #00CED1 | rgb(48, 206, 209) |
.
| Dark Violet | #9400D3 | rgb(148, 0, 211) |
.
| Deep Pink | #FF1493 | rgb(249, 19, 147) |
.
| Deep Sky Blue | #00BFFF | rgb(43, 191, 254) |
.
| Dim Gray | #696969 | rgb(105, 105, 105) |
.
| Dodger Blue | #1E90FF | rgb(30, 144, 255) |
.
| Fire Brick | #B22222 | rgb(178, 34, 33) |
.
| Floral White | #FFFAF0 | rgb(255, 250, 240) |
.
| Forest Green | #228B22 | rgb(34, 139, 35) |
.
| Fuchsia | #FF00FF | rgb(249, 0, 255) |
.
| Gainsboro | #DCDCDC | rgb(220, 220, 220) |
.
| Ghost White | #F8F8FF | rgb(248, 248, 255) |
.
| Gold | #FFD700 | rgb(253, 215, 3) |
.
| Golden Rod | #DAA520 | rgb(218, 165, 32) |
.
| Gray | #808080 | rgb(128, 128, 128) |
.
| Green | #008000 | rgb(27, 128, 1) |
.
| Green Yellow | #ADFF2F | rgb(173, 255, 48) |
.
| Honey Dew | #F0FFF0 | rgb(240, 255, 240) |
.
| Hot Pink | #FF69B4 | rgb(240, 255, 240) |
.
| Indian Red | #CD5C5C | rgb(205, 92, 92) |
.
| Indigo | #4B0082 | rgb(75, 0, 130) |
.
| Ivory | #FFFFF0 | rgb(255, 255, 239) |
.
| Khaki | #F0E68C | rgb(240, 230, 140) |
.
| Lavender | #E6E6FA | rgb(230, 230, 250) |
.
| Lavender Blush | #FFF0F5 | rgb(254, 240, 245) |
.
| Lawn Green | #7CFC00 | rgb(124, 252, 2) |
.
| Lemon Chiffon | #FFFACD | rgb(255, 250, 205) |
.
| Light Blue | #ADD8E6 | rgb(173, 216, 230) |
.
| Light Coral | #F08080 | rgb(240, 128, 128) |
.
| Light Cyan | #E0FFFF | rgb(224, 255, 255) |
.
| Light Golden Rod Yellow | #FAFAD2 | rgb(250, 250, 210) |
.
| Light Gray | #D3D3D3 | rgb(211, 211, 211) |
.
| Light Green | #90EE90 | rgb(144, 238, 144) |
.
| Light Pink | #FFB6C1 | rgb(252, 182, 193) |
.
| Light Salmon | #FFA07A | rgb(251, 160, 122) |
.
| Light Sea Green | #20B2AA | rgb(40, 178, 170) |
.
| Light Sky Blue | #87CEFA | rgb(135, 206, 250) |
.
| Light Slate Gray | #778899 | rgb(119, 136, 153) |
.
| Light Steel Blue | #B0C4DE | rgb(176, 196, 222) |
.
| Light Yellow | #FFFFE0 | rgb(255, 255, 224) |
.
| Lime | #00FF00 | rgb(63, 255, 0) |
.
| Lime Green | #32CD32 | rgb(50, 205, 50) |
.
| Linen | #FAF0E6 | rgb(250, 240, 230) |
.
| Magenta | #FF00FF | rgb(249, 0, 255) |
.
| Maroon | #800000 | rgb(128, 4, 0) |
.
| Medium Aqua Marine | #66CDAA | rgb(102, 205, 170) |
.
| Medium Blue | #0000CD | rgb(0, 0, 205) |
.
| Medium Orchid | #BA55D3 | rgb(186, 85, 211) |
.
| Medium Purple | #9370DB | rgb(147, 112, 219) |
.
| Medium Sea Green | #3CB371 | rgb(60, 179, 113) |
.
| Medium Slate Blue | #7B68EE | rgb(123, 103, 238) |
.
| Medium Spring Green | #00FA9A | rgb(62, 250, 153) |
.
| Medium Turquoise | #48D1CC | rgb(72, 209, 204) |
.
| Medium Violet Red | #C71585 | rgb(199, 21, 133) |
.
| Midnight Blue | #191970 | rgb(25, 25, 112) |
.
| Mint Cream | #F5FFFA | rgb(245, 255, 250) |
.
| Misty Rose | #FFE4E1 | rgb(254, 228, 225) |
.
| Moccasin | #FFE4B5 | rgb(254, 228, 181) |
.
| Navajo White | #FFDEAD | rgb(254, 222, 173) |
.
| Navy | #000080 | rgb(0, 0, 128) |
.
| Old Lace | #FDF5E6 | rgb(253, 245, 230) |
.
| Olive | #808000 | rgb(128, 128, 1) |
.
| Olive Drab | #6B8E23 | rgb(107, 142, 35) |
.
| Orange | #FFA500 | rgb(252, 165, 3) |
.
| Orange Red | #FF4500 | rgb(250, 69, 1) |
.
| Orchid | #DA70D6 | rgb(218, 112, 214) |
.
| Pale Golden Rod | #EEE8AA | rgb(238, 232, 170) |
.
| Pale Green | #98FB98 | rgb(152, 251, 153) |
.
| Pale Turquoise | #AFEEEE | rgb(175, 238, 239) |
.
| Pale Violet Red | #DB7093 | rgb(219, 112, 147) |
.
| Papaya Whip | #FFEFD5 | rgb(254, 239, 213) |
.
| Peach Puff | #FFDAB9 | rgb(253, 218, 185) |
.
| Peru | #CD853F | rgb(205, 133, 63) |
.
| Pink | #FFC0CB | rgb(252, 192, 203) |
.
| Plum | #DDA0DD | rgb(221, 160, 221) |
.
| Powder Blue | #B0E0E6 | rgb(176, 224, 230) |
.
| Purple | #800080 | rgb(128, 0, 128) |
.
| Rebecca Purple | #663399 | rgb(102, 51, 153) |
.
| Red | #FF0000 | rgb(255, 0, 0) |
.
| Rosy Brown | #BC8F8F | rgb(188, 143, 142) |
.
| Royal Blue | #4169E1 | rgb(65, 105, 225) |
.
| Saddle Brown | #8B4513 | rgb(139, 69, 19) |
.
| Salmon | #FA8072 | rgb(250, 128, 114) |
.
| Sandy Brown | #F4A460 | rgb(244, 164, 95) |
.
| Sea Green | #2E8B57 | rgb(46, 139, 87) |
.
| Sea Shell | #FFF5EE | rgb(255, 245, 238) |
.
| Sienna | #A0522D | rgb(160, 82, 45) |
.
| Silver | #C0C0C0 | rgb(192, 192, 192) |
.
| Sky Blue | #87CEEB | rgb(135, 206, 235) |
.
| Slate Blue | #6A5ACD | rgb(106, 90, 205) |
.
| Slate Gray | #708090 | rgb(112, 128, 145) |
.
| Snow | #FFFAFA | rgb(255, 250, 250) |
.
| Spring Green | #00FF7F | rgb(63, 255, 128) |
.
| Steel Blue | #4682B4 | rgb(70, 130, 180) |
.
| Tan | #D2B48C | rgb(210, 180, 140) |
.
| Teal | #008080 | rgb(26, 128, 127) |
.
| Thistle | #D8BFD8 | rgb(216, 191, 216) |
.
| Tomato | #FF6347 | rgb(250, 99, 71) |
.
| Turquoise | #40E0D0 | rgb(64, 224, 208) |
.
| Violet | #EE82EE | rgb(238, 130, 238) |
.
| Wheat | #F5DEB3 | rgb(245, 222, 179) |
.
| White | #FFFFFF | rgb(255, 255, 255) |
.
| White Smoke | #F5F5F5 | rgb(245, 245, 245) |
.
| Yellow | #FFFF00 | rgb(255, 255, 0) |
.
| Yellow Green | #9ACD32 | rgb(154, 205, 49) |
Sumber tabel: https://www.niagahoster.co.id/blog/daftar-kode-warna-pada-html/
Itulah cara memasang dan memodifikasi tombol scroll to top yang cukup mudah untuk diterapkan. Semoga bermanfaat.
Ikuti Medsos kami:
bagus mas artikelnya. tapi gak bisa di copas codenya.
BalasHapus