Fungsi seperti tombol "naik" untuk situs membuat sumber daya Internet lebih nyaman bagi pengunjungnya. Ini membantu Anda dengan mudah berpindah dari mana saja di halaman ke bagian atas halaman. Ini adalah suatu keharusan untuk toko online dan situs dengan artikel besar yang membutuhkan scrolling ke bawah yang lama.
Untuk apa
Saat ini, sebagian besar situs tidak memiliki fungsi seperti tombol "naik", dan tidak ada yang penting dalam hal ini. Namun penggunaannya dapat membawa banyak keuntungan baik bagi sumber daya Internet maupun bagi pengunjungnya.
Manfaat bagi pengunjung
Hal ini sering terjadi ketika halaman sumber daya Internet sarat dengan informasi, ketika artikel informasi memakan banyak ruang dan Anda harus menggulir halaman ke bawah dengan roda mouse. Selain itu, di akhir artikel mungkin ada banyak komentar.
Ketika pengunjung membaca artikel, tidak ada yang melelahkan untuk menggulir halaman ke bawah, tetapi ketika teks telah berakhir dan Anda harus naik, itu mulai sedikit melelahkan. Kebanyakan orang akan terlalu malas untuk menggulir untuk waktu yang lama, dan mereka hanya akan menutup situs, daripada berjalan-jalan lagi di sekitar bentangannya.
Menggunakan tomboluntuk langsung pindah ke bagian atas halaman membuatnya lebih nyaman untuk menghabiskan waktu di situs.
Manfaat untuk sumber daya Internet
Positif untuk sumber itu sendiri berasal dari faktor masa lalu, karena navigasi situs yang lebih mudah meningkatkan faktor perilaku karena semua pengunjung akan lebih aktif dalam tindakan mereka dan pindah ke halaman lain.
Dengan demikian, faktor perilaku ini memengaruhi sikap semua mesin pencari terhadap situs dan mengarah pada peningkatan posisi dalam hasil pencarian.
Cara membuat tombol "naik" di situs sendiri
Berurusan lebih lanjut. Anda selalu dapat membuat sendiri tombol gulir ke atas untuk situs di salah satu CMS dengan mengikuti beberapa langkah yang sangat sederhana:
- pembuatan gambar;
- membuat skrip;
- buat gaya tombol;
- menambahkan ke situs.
Gambar tombol
Untuk menambahkan tombol "naik" di situs, pertama-tama Anda harus membuat ikon itu sendiri, ketika diklik, pengguna akan pindah ke bagian atas halaman. Untuk melakukan ini, Anda dapat menggunakan opsi yang sudah jadi, di antaranya Anda selalu dapat memilih yang paling cocok.
Untuk meningkatkan tampilan tombol, kita perlu melakukan beberapa perbaikan, yaitu membuat sprite yang memungkinkan kita menggabungkan gambar latar berbasis CSS, sehingga membuat animasi darinya.
Untuk karya grafis, Anda dapat menggunakan editor apa pun. Tetapi opsi yang paling nyaman adalah layanan online. PIXLR, karena tidak ada yang dapat diunduh di sini dan Anda dapat menggunakannya langsung di browser Anda.
Untuk memulai, di jendela editor yang muncul, pilih bidang "Unggah gambar dari komputer". Mari kita ambil gambar roket sebagai contoh.
Jika dimensi ikon yang dipilih terlalu besar, maka Anda perlu melakukan penyesuaian ukuran kecil. Untuk melakukan ini, buka menu atas dan pilih bidang "Edit", dan setelah "Transformasi gratis …"
Selanjutnya, spidol khusus muncul di sebelah gambar, bergerak yang dapat Anda ubah ukuran gambarnya. Untuk mempertahankan proporsi, Anda dapat menggunakan tombol Shift, menahan yang Anda perlukan untuk memindahkan penanda biru. Pada akhir langkah ini, gambar roket diperoleh.
Langkah selanjutnya adalah membuat salinan layer.
Sekarang Anda perlu memindahkan gambar roket dari lapisan baru sedikit ke atas. Untuk melakukan ini, akan lebih mudah menggunakan alat pindah, yang terletak di kolom kedua menu kiri, dan panah atas pada keyboard.
Sekarang kita perlu membuat gambar atas menjadi hitam putih. Ini dapat dilakukan dengan menggunakan item "Koreksi" - "Hue / Saturation" di menu atas. Untuk desaturasi lengkap, penggeser Saturasi harus diatur ke -100. Tindakan ini akan memungkinkan Anda untuk membuat efek di mana tombol "Naik" akan berubah dari hitam putih menjadi berwarna saat Anda mengarahkan kursor ke atasnya.
Sentuhan terakhir adalah menghilangkan ruang ekstra di sekitar dua gambar. Untuk melakukan ini, pilih item "Pangkas" dari menu sebelah kiri dankami memilih hanya dua roket dalam persegi panjang. Untuk melakukan cropping, tekan tombol Enter.
Hasilnya adalah gambar yang tidak memiliki ruang kosong tambahan. Anda perlu menuliskan lebar dan tinggi gambar yang dihasilkan, karena data ini akan berguna pada langkah berikutnya.
Untuk menyimpan, Anda perlu mengklik "File" - "Save", di mana di paragraf kiri "My Computer" kami menulis nama gambar (hanya tata letak bahasa Inggris), pilih format (dalam hal ini case, PNG) dan klik tombol "Ya".
File dengan skrip tombol "naik"
Anda tidak perlu menulis skrip dalam kasus ini. Dimungkinkan untuk menggunakan versi publik, membuat beberapa perubahan pada kode yang telah selesai.
Untuk melakukannya, Anda perlu mengunduh editor kode apa pun. Opsi yang paling populer dan juga gratis adalah Notepad++. Setelah menginstalnya, Anda perlu menyalin dan menempelkan semua kode ini ke dalamnya:
| $(dokumen).ready(fungsi(){ $(jendela).scroll(fungsi () {if ($(ini).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function() {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Selanjutnya, klik di menu atas "File" - "Save as …", setelah itu kita simpan kode dalam format.js. Setelah itu, Anda dapat menggunakan kode ini di situs Anda dengan mengunggah file skrip dan gambar ke dalamnya menggunakan koneksi FTP.
Instal di situs
Untuk mengatur tombol gulir ke atas untuk situs, Anda harus menempatkan dikode tempat yang diperlukan. Anda harus memasukkannya sebelum tag.
Membuat Gaya Tombol dengan CSS
Paling sering, tombol "naik" untuk situs terletak di bagian bawah ("footer").
Kode berikut harus ditambahkan ke file style.css situs:
|
/Tombol Atas/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/jalur gambar asli/ width:39px;/ tombol lebar/ tinggi:96px;/50% tinggi tombol/ bottom:5px;/lapisan bawah pada posisi tetap/ kiri:89%;/geser ke kiri/ }.scrollTop:hover{ background-position:0 -108px; } /background offset/" |
Dalam hal ini, data lebar dan tinggi gambar tersebut akan dibutuhkan. Tetap hanya memasukkan data yang diterima ke dalam kode, dan tombol "naik" untuk situs akan siap! Apa lagi?
Tombol Naik untuk situs Wordpress
Untuk CMS ini, tombol "Naik" dapat dibuat menggunakan plugin, maupun secara mandiri.
Metode plugin adalah yang paling nyaman dan mudah dipasang, karena Anda hanya perlu mengklik tombol instal dan mengkonfigurasi semua fungsi di menu plugin.
Pilihan yang terakhir harus didekati dengan hati-hati, karena dengan itu akan mudah untuk mendapatkan virus di situs. Opsi yang paling populer dan terbukti adalah plugin bernama Scroll Back To Top. Anda dapat mengunduhnya menggunakan pencarian standar untuk plugin Wordpress.
Ekstensi ini memilikibanyak fungsi, dan akan sangat mudah untuk menyesuaikan tombol "naik" untuk situs Wordpress. Tidak perlu mengubah semua nilai sama sekali, Anda hanya perlu mengkonfigurasi tampilan dan lokasi tombol di halaman situs.
Seperti yang Anda lihat, mengatur tombol naik dengan plugin sangat mudah. Tetapi ada satu nuansa penting, yaitu setiap plugin yang diinstal memuat CMS. Ini dapat mempengaruhi kecepatan sumber daya Internet. Itulah sebabnya sebagian besar pemilik situs mencoba membuat semua perubahan langsung dalam kode, dan bukan dengan bantuan ekstensi pihak ketiga. Anda dapat membuat tombol "naik" untuk situs HTML, yang akan meminimalkan sumber daya yang dikonsumsi.
Sebelum mengubah semua file sistem Wordpress, Anda harus mencadangkannya. Kemudian Anda dapat mengikuti semua langkah untuk membuat tombol Anda sendiri, yang dijelaskan di atas.
Tombol "naik" untuk Joomla
CMS Joomla juga mendukung instalasi plugin, seperti Wordpress. Versi paling sukses dari tombol "naik" untuk situs di Joomla 3 adalah ekstensi yang disebut Top of the Page.
Dalam CMS ini, plugin apa pun dapat diinstal melalui "Extension Manager". Untuk ini Anda perlu:
- unduh plugin di Internet;
- klik tombol "Jelajahi" di pengelola ekstensi;
- pilih arsip yang diunduh;
- klik "Unduh" dan instal.
Sekarang Anda perlu mengaktifkannya di "Pengelola Plugin". Untuk iniAnda harus pergi ke bagian ini, temukan plugin dan alihkan statusnya ke "diaktifkan".
Langkah selanjutnya adalah mengkonfigurasi semua parameter ekstensi menggunakan bagian yang sama di mana Anda perlu menemukan "Parameter dasar" plugin ini di sisi kanan.
Top of the Page memiliki fungsi berikut:
- Run in/ administrator - mengaktifkan opsi tidak hanya di sumber daya Internet, tetapi juga di panel CMS Joomla itu sendiri.
- Button Reveal Position - berapa banyak piksel yang harus dimundurkan pengguna agar tombol atas muncul.
- Abaikan Teks Tombol - keberadaan teks pada tombol.
- Always at Top - halaman situs akan selalu ditampilkan dari atas. Saat menggunakan jangkar untuk menggulir ke lokasi tertentu pada halaman, opsi ini tidak perlu diaktifkan.
- Gulir Halus - membuat pengguliran halaman menjadi lebih lancar.
- Durasi Gulir - waktu setelah halaman akan benar-benar pindah ke awal.
- Transisi Gulir - Menambahkan lebih banyak efek visual ke pengguliran.
- Transition Easing - "melemahkan" gerakan ke bagian atas halaman.
- Link Lokasi - lokasi ikon. Secara default, tombol ini terletak di sudut kanan bawah.
- Gunakan Gaya – gaya tombol individual, yang dapat diatur di bidang di bawah ini. Jika dialihkan ke nilai negatif, maka semua pengaturan gaya akan diambil dari tema aktif situs.
- Link Style - kolom untuk memasukkan parameter gaya tombol Anda.
Untuk menyesuaikan gaya tombol "naik", Anda harus memiliki setidaknya minimalpengetahuan CCS. Jika tidak, Anda harus mengganti nilai parameter kedua dari belakang ke "Tidak".
Nuansa penting lainnya adalah tulisan biasa pada ikon berisi teks bahasa Inggris: Kembali ke Atas. Teks seperti itu tidak dapat ditampilkan di situs berbahasa Rusia, jadi Anda cukup menonaktifkannya di parameter plugin atau mengubahnya ke bahasa Rusia.
Untuk mengubah prasasti ini, Anda harus pergi ke server situs menggunakan FTP atau pengelola file yang ada di dalam hosting. Selanjutnya, di direktori "/administrator/language/en-GB/" Anda perlu menemukan file bernama "en-GB.plg_system_topofthepage.ini".
Sebelum mengubah teks, Anda harus mengubah penyandian dokumen ini ke UTF-8. Ini akan membuat tampilan huruf Rusia menjadi normal.
Selanjutnya kita menemukan baris berikut:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Kembali ke Atas"" |
dan ubah frasa dalam tanda kutip ke bahasa Rusia. Anda dapat menggunakan frasa seperti "Naik!", "Ke atas!" atau “Naik!”.
Pada akhirnya, Anda perlu menyimpan file yang dimodifikasi dan memeriksa tombol "naik" untuk situs di Joomla.
Tombol Naik untuk Ucoz
Tombol "naik" untuk situs di Ucoz harus dilakukan menggunakan injeksi kode, karena plugin untuk CMS ini tidak dapat dihubungkan. Namun, ini tidak memerlukan studi panjang file sistem dan mencari baris yang diperlukan, Anda hanya perlu menempelkan kode kecil di tempat yang tepat.
Untuk menginstal kamidiperlukan:
- pergi ke "Panel Kontrol -> Desain -> Manajemen Desain (templat) -> Bagian bawah situs;
- masukkan skrip (dapat ditemukan di situs web resmi proyek dan sumber pihak ketiga).
Kesimpulan
Setelah itu, sebuah ikon akan muncul di sudut kanan bawah, memindahkan pengguna ke bagian paling atas halaman.
Seperti yang Anda lihat, menyiapkan tombol kembali untuk CMS mana pun tidak terlalu sulit. Anda dapat menggunakan metode instalasi otomatis (plugin) dan manual. Namun, opsi terakhir tetap yang paling cocok, karena tidak mempengaruhi kinerja situs.
Anda dapat menggunakan tombol "kembali ke atas" untuk situs HTML untuk meminimalkan konsumsi sumber daya situs, karena sejumlah besar ekstensi dapat berdampak negatif pada kinerja sumber daya. Satu plugin tombol "naik" tidak akan dapat mempengaruhi waktu pemuatan halaman situs secara signifikan, tetapi dalam kebanyakan kasus, pengguna memiliki setidaknya selusin plugin yang diinstal pada CMS. Dalam hal ini, plugin apa pun dapat berdampak buruk pada kinerja halaman situs.
