InternetWeb Hosting

"Up" butang untuk laman web: bagaimana untuk melakukannya

Fungsi seperti itu, seperti butang "naik" untuk tapak, menjadikan sumber Internet lebih mudah untuk pelawatnya. Ia membantu anda dengan mudah bergerak dari mana-mana halaman di bahagian atasnya. Ini hanya perlu untuk kedai dan laman web dalam talian dengan artikel besar yang memerlukan skrol panjang ke bawah.

Apa untuknya?

Pada masa ini, tidak ada fungsi sedemikian pada kebanyakan laman web sebagai butang "naik", dan tidak ada yang kritikal mengenai perkara ini. Tetapi penggunaannya dapat membawa banyak plus untuk sumber Internet, dan untuk pelawatnya.

Faedah untuk pelawat

Ia sering berlaku apabila halaman sumber Internet banyak dimuatkan dengan maklumat, apabila artikel maklumat memakan banyak ruang dan anda perlu menatal ke bawah halaman dengan roda tetikus. Di samping itu, pada akhir artikel terdapat banyak komen kepadanya.

Apabila pengunjung membaca artikel, tidak ada yang membosankan dalam menatal ke bawah halaman, tetapi apabila teks telah berakhir dan perlu untuk bergerak ke atas, ia mulai tayar sedikit. Kebanyakan orang hanya akan terlalu malas untuk memimpin skrol panjang, dan mereka hanya akan menutup laman web itu, dan bukannya berjalan-jalan melalui ekspansinya.

Menggunakan butang untuk bergerak ke bahagian atas halaman membuat hobi di tapak lebih mudah.

Faedah untuk sumber Internet

Sisi positif untuk sumber itu sendiri berdasarkan faktor masa lalu, kerana pergerakan mudah di laman web ini meningkatkan faktor tingkah laku, kerana semua pelawat akan lebih aktif dalam tindakan mereka dan berpindah ke laman lain.

Oleh itu, faktor tingkah laku ini mempengaruhi sikap semua enjin carian ke laman web dan membawa kepada penambahbaikan lokasi hasil carian.

Bagaimana untuk menjadikan butang "naik" di laman web anda sendiri

Kami lebih memahami. Butang tatal untuk tapak di mana-mana CMS boleh dilakukan sendiri, hanya beberapa langkah yang sangat mudah:

  • Penciptaan imej;
  • Penciptaan skrip;
  • Mewujudkan gaya butang;
  • Menambah ke laman web ini.

Imej butang

Untuk menambah butang "naik" di laman web ini, anda perlu membuat ikon itu sendiri terlebih dahulu, dengan mengklik mana pengguna akan bergerak ke halaman tersebut. Untuk melakukan ini, anda boleh menggunakan pilihan yang sudah siap, di antaranya anda sentiasa boleh memilih yang paling sesuai.

Untuk meningkatkan penampilan butang, perlu membuat beberapa penambahbaikan, iaitu membuat sprite, yang membolehkan anda menggabungkan imej latar belakang berdasarkan CSS, sehingga menghasilkan animasi dari mereka.

Untuk karya grafik, anda boleh menggunakan mana-mana editor. Tetapi pilihan yang paling mudah akan menjadi PIXLR perkhidmatan dalam talian, kerana tiada apa-apa untuk dimuat turun di sini dan anda boleh menggunakannya secara langsung dalam pelayar.

Untuk mula bekerja di tetingkap editor yang muncul, pilih medan "Muat naik imej dari komputer". Sebagai contoh, ambil gambar roket itu.

Jika dimensi ikon yang dipilih terlalu besar, maka penyesuaian kecil dimensi akan diperlukan. Untuk melakukan ini, pergi ke menu utama dan pilih medan "Edit", dan selepas "Transform percuma ..."

Selanjutnya di sebelah gambar terdapat penanda khas, memindahkannya, anda boleh menukar saiz imej. Untuk menyimpan perkadaran, anda boleh menggunakan kekunci Shift, yang, memegang, anda perlu memindahkan penanda biru. Pada akhir tindakan ini, imej roket diperolehi.

Langkah seterusnya adalah untuk membuat salinan lapisan.

Kini anda perlu memindahkan gambar roket dari lapisan baru sedikit. Untuk melakukan ini, mudah untuk menggunakan alat bergerak, yang terletak di lajur kedua menu kiri, dan anak panah "naik" pada papan kekunci.

Sekarang anda perlu membuat gambar teratas dalam warna hitam dan putih. Ini boleh dilakukan dengan menggunakan "Pembetulan" - "Hue / Saturation" di menu utama. Untuk penyembunyian warna lengkap, gelangsar Saturasi mesti ditetapkan kepada -100. Tindakan ini akan membolehkan anda membuat kesan apabila butang "Sehingga" bertukar dari hitam dan putih menjadi warna apabila anda melayang.

Sentuhan terakhir ialah penghapusan ruang yang berlebihan di sekeliling dua gambar. Untuk melakukan ini, pilih item "Tanaman" dari menu kiri dan pilih hanya dua peluru berpandu di segi empat tepat. Untuk melaksanakan tanaman, tekan kekunci Enter.

Hasilnya adalah imej di mana tidak ada ruang yang berlebihan. Ia adalah perlu untuk merakam lebar dan ketinggian imej yang terhasil, kerana data ini berguna pada langkah seterusnya.

Untuk menyimpan, anda perlu mengklik pada "Fail" - "Simpan", di mana di sebelah kiri "Komputer Saya" tulis nama imej (susun atur bahasa Inggeris sahaja), pilih format (dalam kes ini - PNG) dan klik butang "Ya".

Berkongsi skrip butang "atas"

Dalam kes ini, anda tidak perlu menulis skrip. Ia akan dapat memanfaatkan pilihan awam, membuat beberapa pembetulan dalam kod siap.

Untuk melakukan ini, anda perlu memuat turun sebarang editor kod. Versi yang paling popular dan percuma ialah Notepad ++. Selepas memasangnya, anda perlu menyalin dan menampal semua kod ini:

($). ($ (Ini) .scrollTop ()> 0) {$ ('# ('# Scroller') FadeOut ();}}); $ ('scroller'). Klik (function () {$ ('body, html'). Animasi ({scrollTop: 0}, 400); kembali palsu;});});

Kemudian klik pada menu atas "Fail" - "Simpan sebagai ...", dan kemudian simpan kod dalam format .js. Selepas itu, anda boleh menggunakan kod ini di laman web anda, memuat naik fail skrip dan imej ke dalamnya menggunakan sambungan FTP.

Pemasangan di laman web ini

Untuk menetapkan butang tatal untuk tapak, anda perlu meletakkan kod di lokasi yang dikehendaki. Anda mesti memasukkannya sebelum tag .

Mewujudkan gaya butang dalam CSS

Selalunya butang "naik" untuk laman web terletak di bahagian bawah ("ruang bawah tanah").

Dalam fail style.css tapak, anda perlu memasukkan kod berikut:

"/ * Atas butang * /

.scrollTop {
Latar belakang: url ('images / up.png') 0 0 no-repeat; / * jalan mudah ke imej * /
Lebar: 39px; / * lebar butang * /
Ketinggian: 96px; / * 50% ketinggian butang * /
Bawah: 5px; / * untuk kedudukan tetap, ruang di bawah * /
Kiri: 89%; / * mengimbangi ke kiri * /
}
.scrollTop: hover {background-position: 0 -108px; } / * Background offset * / "

Dalam kes ini, anda memerlukan lebar data dan ketinggian imej. Ia tetap hanya untuk memasukkan data ke dalam kod, dan butang "naik" untuk laman web ini akan siap! Apa lagi?

Butang up untuk laman Wordpress

Untuk CMS ini, butang "Up" boleh dilakukan dengan bantuan plug-in, dan juga secara berasingan.

Kaedah dengan plugin adalah paling mudah dan mudah dipasang, kerana ini hanya memerlukan klik pada butang pemasangan dan menyesuaikan semua fungsi dalam menu pemalam.

Pemilihan yang terakhir harus didekati dengan berhati-hati, kerana bersama-sama dengannya akan dapat dengan mudah membeli virus di laman web ini. Pilihan yang paling popular dan terbukti adalah pemalam yang dipanggil Tatal Belakang Ke Atas. Anda boleh memuat turun menggunakan carian plugin Wordpress standard.

Pelanjutan ini mempunyai pelbagai fungsi, dan ia akan menjadi sangat mudah untuk menyesuaikan butang "naik" untuk laman WordPress. Tidak perlu menukar semua nilai, anda hanya perlu mengkonfigurasi penampilan dan lokasi butang pada halaman tapak.

Seperti yang anda lihat, menetapkan butang "naik" dengan bantuan plugin adalah sangat mudah. Tetapi ada satu nuansa penting, yang setiap plugin yang dipasang memuatkan CMS. Ini boleh menjejaskan kelajuan sumber Internet. Itulah sebabnya kebanyakan pemilik tapak cuba melaksanakan semua perubahan secara langsung dalam kod itu, dan bukan dengan bantuan sambungan pihak ketiga. Anda boleh membuat butang "naik" untuk laman web di HTML, yang akan meminimumkan sumber yang digunakan.

Sebelum menukar semua fail sistem WordPress mesti membuat salinan sandaran mereka. Seterusnya, anda boleh mengikuti semua langkah untuk membuat butang anda sendiri, yang diterangkan di atas.

Knoka "naik" untuk Joomla

CMS Joomla juga menyokong pemasangan pemalam, seperti Wordpress. Versi yang paling berjaya dari "up" untuk tapak di Joomla 3 adalah lanjutan yang dipanggil Top of Page.

Dalam CMS ini, sebarang pemalam boleh dipasang melalui "Pengurus Sambungan". Untuk ini anda perlukan:

  • Muat turun pemalam di Internet;
  • Klik butang "Semak imbas" dalam Pengurus Sambungan;
  • Pilih arkib yang dimuat turun;
  • Klik "Muat turun" dan pasangkan.

Sekarang anda perlu mengaktifkannya dalam "Pengurus Plugin". Untuk melakukan ini, pergi ke bahagian ini, cari pemalam dan tukar statusnya ke "hidup".

Seterusnya, anda mengkonfigurasi semua tetapan untuk pelanjutan menggunakan bahagian yang sama di mana anda perlu mencari "Parameter Asas" pada pemalam ini di sebelah kanan.

Atas Halaman mempunyai fungsi berikut:

  • Jalankan dalam / pentadbir - membolehkan pilihan bukan sahaja pada sumber Internet, tetapi juga dalam CMS Joomla itu sendiri.
  • Posisi Menunjukkan Butang - berapa piksel yang pengguna perlu mundur supaya butang "naik" muncul.
  • Omit Button Text - teks pada butang.
  • Sentiasa di Atas - halaman laman web ini akan sentiasa dipaparkan dari awal. Apabila menggunakan "sauh" untuk menatal ke tempat tertentu pada halaman, pilihan ini tidak perlu diaktifkan.
  • Tatal Lancar - membuat penggilapan halaman lebih lancar.
  • Tempoh Tatal - masa di mana halaman sepenuhnya bergerak ke peringkat awal.
  • Tatal Peralihan - tambah menatal untuk kesan visual yang besar.
  • Transition Easing - "merendahkan" langkah ke bahagian atas halaman.
  • Lokasi Pautan - lokasi ikon. Secara standard, butang tersebut terletak di sudut kanan bawah.
  • Gunakan Gaya - gaya individu butang, yang boleh ditetapkan di medan di bawah. Jika anda menukar nilai negatif, maka semua tetapan gaya akan diambil dari tema tapak aktif.
  • Gaya Pautan - medan untuk memasukkan tetapan gaya butang anda.

Untuk menyesuaikan gaya butang "up" anda mesti mempunyai sekurang-kurangnya pengetahuan minimum CCS. Jika tidak, anda perlu menukar nilai parameter kedua ke "Tidak".

Satu lagi nuansa penting adalah bahawa tulisan biasa pada ikon mengandungi teks Inggeris: Kembali ke Atas. Di tapak bahasa Rusia, teks seperti itu tidak boleh hadir, jadi anda hanya mematikannya dalam tetapan pemalam atau mengubahnya kepada Rusia.

Untuk menukar prasasti ini, anda mesti pergi ke pelayan tapak menggunakan FTP atau pengurus fail hosting yang terbina dalam. Kemudian dalam direktori "/ administrator / bahasa / en-GB /" anda perlu mencari fail bernama "en-GB.plg_system_topofthepage.ini".

Sebelum menukar teks, anda perlu mengubah pengekodan dokumen ini ke UTF-8. Ini akan membuat paparan biasa huruf Rusia.

Selanjutnya kita dapati baris berikut:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Kembali ke Atas ""

Dan tukar frasa dalam sebut harga kepada bahasa Rusia. Anda boleh menggunakan frasa seperti "Up!", "Pada mulanya!" Atau "Up!".

Pada akhirnya, anda perlu menyimpan fail yang diubah suai dan semak butang "naik" untuk laman web di Joomla.

Butang untuk Ucoz

Tombol "up" untuk laman web di Ucoz perlu dilakukan dengan pengenalan kod, kerana plug-in untuk CMS ini tidak dapat disambungkan. Walau bagaimanapun, untuk melakukan ini, anda tidak perlu mempelajari fail sistem untuk masa yang lama dan mencari garis yang diperlukan, anda hanya perlu memasukkan kod kecil ke lokasi yang diperlukan.

Untuk memasang, kami perlukan:

  • Pergi ke "Panel Kawalan -> Reka Bentuk -> Pengurusan Reka Bentuk (Templat) -> Bawah Tapak;
  • Masukkan skrip (boleh didapati di laman web rasmi projek dan sumber pihak ketiga).

Kesimpulannya

Kemudian ikon akan muncul di sudut kanan bawah, memindahkan pengguna ke bahagian paling atas halaman.

Seperti yang anda lihat, menetapkan butang "Sehingga" untuk mana-mana CMS tidak begitu sukar. Anda boleh menggunakan kedua-dua kaedah pemasangan automatik (plug-in) dan manual. Walau bagaimanapun, pilihan kedua tetap menjadi yang paling sesuai, kerana ia tidak menjejaskan prestasi tapak.

Anda boleh menggunakan butang "naik" untuk laman web di HTML untuk meminimumkan penggunaan sumber tapak, kerana sejumlah besar pelanjutan boleh memberi kesan negatif terhadap prestasi sumber. Satu butang pemalam "naik" tidak boleh memberi kesan kepada masa beban halaman laman web, tetapi dalam kebanyakan kes, pengguna mempunyai sekurang-kurangnya selusin pemalam yang dipasang di CMS. Dalam kes ini, mana-mana pemalam boleh menjejaskan prestasi halaman laman web secara negatif.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ms.atomiyme.com. Theme powered by WordPress.