Butonul "Up" pentru site: cum se face
Această funcție, ca și butonul "sus" pentru un site,face resursa de Internet mai convenabilă pentru vizitatorii săi. Vă ajută să vă mișcați cu ușurință de oriunde din pagină până la vârf. Acest lucru este necesar doar pentru magazinele online și site-urile cu articole mari care necesită o defilare lungă în jos.
Pentru ce este?
În prezent, pe cele mai multe site-uri, cum ar fifuncții, cum ar fi butonul "sus", nu, și nu există nimic critic în legătură cu acest lucru. Dar utilizarea sa poate aduce multe plusuri atât pentru resursele de internet, cât și pentru vizitatorii săi.
Beneficii pentru vizitatori
Se întâmplă de multe ori atunci când pagina de resurse de Internetputernic încărcate cu cantitatea de informații, atunci când articolul de informații are o mulțime de spațiu și trebuie să deruleze în josul paginii folosind rotița mouse-ului. Plus la aceasta, la sfârșitul articolului poate prezenta o mulțime de comentarii la aceasta.
Când un vizitator citește un articol, nimicobositoare în derularea paginii nu este, dar când textul sa terminat și este necesar să se miște în sus, începe să se obosească puțin. Majoritatea oamenilor vor fi pur și simplu leneși pentru a conduce o lungă parcurgere și vor închide site-ul, în loc să se plimbe încă prin expansiuni.
Utilizarea butonului pentru a vă deplasa instantaneu în partea de sus a paginii face ca jocul pe site să fie mai convenabil.
Beneficii pentru o resursă de internet
Latura pozitivă a resurselor în sine provinedin factorii anteriori, deoarece este mai ușor de navigat site-ul îmbunătățește factorii de comportament, ca toți vizitatorii vor fi mai activi în acțiunile lor și să se mute în alte pagini.
Astfel, acești factori comportamentali afectează atitudinea tuturor motoarelor de căutare pe site și conduc la o îmbunătățire a localizării rezultatelor căutării.
Cum de a face butonul "sus" pe site-ul dvs.
Înțelegem în continuare. Butonul de derulare în sus pentru un site de pe oricare din CMS poate fi întotdeauna făcut singur, doar câțiva pași foarte simpli:
- crearea unei imagini;
- Crearea unui scenariu;
- crearea unui stil de buton;
- adăugarea la site.
Imaginea butonului
Pentru a adăuga un buton "sus" pe site, pentruva trebui să faceți pictograma în sine, când faceți clic pe acesta, utilizatorul va deplasa pagina în sus. Pentru a face acest lucru, puteți utiliza opțiunile gata făcute, dintre care puteți alege întotdeauna cel mai potrivit.
Pentru a îmbunătăți aspectul butonului, trebuie să faceți unele îmbunătățiri, și anume, să creați o sprite, care vă permite să combinați imaginile de fundal pe baza CSS, creând astfel o animație de la ei.
Pentru lucrări grafice, puteți utiliza orice editor. Dar cea mai convenabilă opțiune va fi serviciul online PIXLR, deoarece nu trebuie să descărcați nimic aici și îl puteți folosi chiar în browserul dvs.
Pentru a începe să lucrați în fereastra de editor care apare, selectați câmpul "Încărcați o imagine de pe computer". Ca exemplu, luați imaginea rachetei.
Dacă mărimea pictogramei selectate este prea mare, atunciva trebui să faceți o mică ajustare a mărimii. Pentru a face acest lucru, mergeți la meniul de sus și selectați câmpul "Edit" și după "Free transform ..."
Pe lângă imaginea de mai jos sunt specialemarcatori, prin mutarea care, puteți redimensiona imaginea. Pentru a salva proporțiile, puteți utiliza tasta Shift, prin fixarea acesteia, trebuie să mutați marcatorii albastre. La sfârșitul acestor acțiuni, se obține imaginea rachetei.
Următorul pas este să creați o copie a stratului.
Acum trebuie să mutați imaginea racheteiun nou strat puțin mai sus. Pentru a face acest lucru, va fi convenabil de a utiliza instrumentul de mutare, care se află în a doua coloană a meniului din stânga și săgeată „sus“ de pe tastatură.
Acum trebuie să faceți imaginea de sus în alb și negru. Acest lucru se poate face folosind elementul "Corecție" - "Hue / Saturation" din meniul de sus. Pentru decolorarea completă, glisorul Saturație trebuie să fie setat la -100. Această acțiune va face ca butonul "Sus" să se transforme de la alb-negru în culoare atunci când îl plasați pe hartă.
Atingerea finală este eliminarea spațiului în excesîn jurul a două imagini. Pentru aceasta, selectați elementul "Decupați" din meniul din stânga și selectați numai două rachete în dreptunghi. Pentru a executa decuparea, apăsați tasta Enter.
Rezultatul este o imagine în care nu există spațiu în exces. Va fi necesar să înregistrați lățimea și înălțimea imaginii rezultate, deoarece aceste date vor fi utile în etapa următoare.
Pentru a salva, faceți clic pe "Fișier" -"Salvați", unde în imaginea stângă "My Computer" scrieți numele imaginii (numai în limba engleză), selectați formatul (în acest caz - PNG) și faceți clic pe butonul "Da".
Fișier cu butonul de sus în sus
În acest caz, nu este necesar să scrieți un script. Va fi posibil să profitați de opțiunea publică, făcând unele corecții la codul finit.
Pentru a face acest lucru, trebuie să descărcați orice editor de coduri. Cea mai populară și gratuită versiune este Notepad ++. După instalare, trebuie să copiați și să inserați în el tot acest cod:
| <script type = "text / javascript"> $ (document).gata () {$ (fereastra) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ (" ({{scrollTop: 0}, 400); return (false);} () () );}); </ script> |
Apoi faceți clic pe meniul superior "File" - "Save"ca ... ", atunci salvăm codul în formatul .js. După aceasta, puteți utiliza acest cod pe site-ul dvs., încărcând fișierele și imaginile de script folosind o conexiune FTP.
Instalarea pe site
Pentru a seta butonul de derulare în sus pentru site, trebuie să plasați codul în locația dorită. Trebuie să o introduceți înainte de etichetă </ body>.
Crearea unui stil de buton în CSS
Cel mai adesea, butonul "sus" pentru site este situat în partea de jos ("subsol").
În fișierul site.css al site-ului, trebuie să introduceți următorul cod:
"/ * Butonul Sus * / .scrollTop { |
În acest caz, aveți nevoie de lățimea și înălțimea datelor pentru imagine. Rămâne doar să introduceți datele în cod, iar butonul "sus" pentru site va fi gata! Ce altceva?
Butonul Sus pentru site-ul Wordpress
Pentru acest CMS, butonul "Sus" poate fi realizat cu ajutorul plugin-urilor, precum și independent.
Metoda cu plugin-uri este cea mai convenabilă și mai ușor de instalat, pentru că acest lucru necesită doar clic pe butonul de instalare și ajustați toate funcționalitățile din meniul plugin.
Alegerea acestuia din urmă ar trebui să fie abordată de laprudență, deoarece împreună cu acesta va fi posibil să obțineți cu ușurință un virus pe site. Opțiunea cea mai populară și dovedită este un plug-in numit Derulare înapoi în sus. Puteți să o descărcați utilizând căutarea standard a pluginului Wordpress.
Această extensie are multiplefuncțional și va fi foarte simplu să individualizați butonul "sus" pentru site-ul Wordpress. Toate valorile nu trebuie modificate, trebuie doar să configurați aspectul și locația butonului de pe pagina site-ului.
După cum puteți vedea, setați butonul cuplugin-uri este foarte simplu. Dar există o nuanță importantă, că fiecare plugin instalat încarcă CMS. Acest lucru poate afecta viteza resursei Internet. De aceea, majoritatea proprietarilor de site-uri încearcă să execute toate modificările direct în cod, și nu cu ajutorul extensiilor de la terțe părți. Puteți face butonul "sus" pentru site-ul HTML, ceea ce va reduce la minimum resursele consumate.
Înainte de a schimba toate fișierele de sistem WordPress trebuie să facă copii de rezervă. Apoi, puteți urma toți pașii pentru a crea un buton propriu, descris mai sus.
Knoka "sus" pentru Joomla
CMS Joomla acceptă, de asemenea, instalarea de plug-in-uri, cum ar fi Wordpress. Versiunea cea mai de succes a butonului "up" pentru un site pe Joomla 3 este o extensie numită Top of the Page.
În acest CMS, orice plugin poate fi instalat prin "Extension Manager". Pentru a face acest lucru aveți nevoie de:
- descărcați plug-in-ul pe Internet;
- Dați clic pe butonul "Răsfoiți" din Managerul de extensii;
- selectați arhiva descărcată;
- faceți clic pe "Descărcați" și instalați.
Acum trebuie să o activați în "Managerul de pluginuri". Pentru a face acest lucru, mergeți la această secțiune, găsiți plug-in-ul și comutați starea acestuia la "on".
Apoi, configurați toate opțiunile de extensie folosind aceeași secțiune unde trebuie să găsiți "Parametrii de bază" ai acestui plug-in pe partea dreaptă.
Începutul paginii are următoarele funcționalități:
- Rulați în / administrator - activați opțiunea nu numai pe resursele de Internet, ci și în CMS Joomla în sine.
- Poziția de afișare a butonului - câte pixeli ar trebui să revină utilizatorul pentru a apărea butonul "sus".
- Omit Button Text - textul de pe buton.
- Întotdeauna în partea de sus - pagina site-ului va fi afișată întotdeauna de la început. Când utilizați "ancore" pentru a vă deplasa la un anumit loc din pagină, nu trebuie să activați această opțiune.
- Smooth Scroll - face ca pagina să deruleze mai ușor.
- Durata derulării - timpul în care pagina se mișcă complet la început.
- Scroll Transition - adaugă derularea pentru efecte vizuale mari.
- Tranziție de relaxare - "relaxarea" mutarea în partea de sus a paginii.
- Locația legăturii - locația pictogramei. Prin standard, butonul este situat în colțul din dreapta jos.
- Utilizați stiluri - stilul individual al butonului, care poate fi setat în câmpul de mai jos. Dacă treceți la o valoare negativă, toate setările de stil vor fi luate din tema site-ului activ.
- Stil de legătură - un câmp pentru introducerea setărilor pentru stilul butonului.
Pentru a personaliza stilul butonului "sus", trebuie să aveți cel puțin o cunoaștere minimă a tehnologiei CCS. În caz contrar, este necesar să comutați valoarea penultimului parametru la "Nu".
O altă nuanță importantă este astaInscripția obișnuită pe pictogramă conține textul în limba engleză: Revenire în partea de sus. Pe un site în limba rusă, un astfel de text nu poate fi prezent, așa că îl dezactivați în setările pluginului sau îl puteți modifica în limba rusă.
Pentru a schimba această inscripție, mergeți lasite-ul server folosind FTP sau built-in manager de fișiere de găzduire. Apoi, în directorul "/ administrator / language / en-GB /" trebuie să găsiți un fișier numit "en-GB.plg_system_topofthepage.ini".
Înainte de a schimba textul, trebuie să modificați codificarea acestui document la utf-8. Aceasta va face afișarea normală a literelor rusești.
Apoi găsim următoarea linie:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Înapoi la început "" |
și să schimbe fraza în citate în limba rusă. Puteți folosi expresii precum "Sus!", "La început!" Sau "Sus!".
În cele din urmă, va trebui să salvați fișierul modificat și să verificați un buton "sus" pentru site-ul de pe Joomla.
Butonul Sus pentru Ucoz
Butonul "Sus" pentru site-ul de pe Ucoz va trebui să fie făcutcu introducerea codului, deoarece plug-in-urile pentru acest CMS nu pot fi conectate. Cu toate acestea, acest lucru nu necesită un studiu lung al fișierelor de sistem și căutați liniile necesare, trebuie doar să introduceți un cod mic în locația dorită.
Pentru a instala, avem nevoie de:
- mergeți la "Panou de control -> Design -> Management de proiectare (șabloane) -> partea inferioară a site-ului;
- introduceți un script (poate fi găsit pe site-ul oficial al proiectului și al resurselor terților).
concluzie
După aceea, în colțul din dreapta jos va apărea o pictogramă, care va duce utilizatorul la partea superioară a paginii.
După cum puteți vedea, setați butonul "Sus" pentruoricare dintre CMS nu a fost deosebit de dificilă. Puteți utiliza atât metoda de instalare automată (plug-in-uri), cât și manualul. Cu toate acestea, ultima opțiune rămâne cea mai potrivită, deoarece nu afectează în mod negativ performanța site-ului.
Puteți folosi butonul "sus" pentru site-ul de peHTML, pentru a minimiza consumul resurselor site-ului, deoarece un număr mare de extensii pot avea un impact negativ asupra performanței resurselor. Un buton plug-in "sus" nu poate afecta foarte mult timpul de încărcare al paginilor site-ului, dar în majoritatea cazurilor, utilizatorul are cel puțin douăsprezece plug-in-uri instalate în CMS. În acest caz, orice plugin poate afecta negativ performanța paginilor site-ului.
</ p>>
