Gumb `up` for a site: kako napraviti

Takva funkcija, poput gumba "gore" za web stranicu, čini Internet resurs lakšim za posjetitelje. Pomaže pri lakšem kretanju s bilo kojeg mjesta na stranici. Ovo je neophodno samo za mrežne trgovine i web-lokacije s velikim člancima koji zahtijevaju dulje pomicanje prema dolje.

Zašto je to?

Trenutačno na većini web mjesta nema takve funkcije kao gumb "gore", a nema ništa kritično za to. No, njegova upotreba može donijeti mnogo dodataka i za resurse interneta i za svoje posjetitelje.

Prednosti za posjetitelje

Često, kada se stranica na Internet resursa teško učitava količinu informacija, kada je informacija članak uzima puno prostora i moraju pomaknuti da koristite kotačić miša. Osim toga, na kraju članka može biti mnogo komentara.

Kada posjetitelj čita članak u osobnom zamornog pomicanje prema dolje na stranici nije prisutna, ali kad je tekst dođe do kraja i to je potrebno za kretanje prema gore, ona počinje umoriti malo. Većina ljudi jednostavno će biti previše lijen da vodi dugi svitak, a oni će samo zatvoriti mjesto, umjesto da još uvijek šetnje kroz njegove prostranstva.

Pomoću gumba da biste se odmah prebacili na vrh stranice učinili su vam zabavu na web sučelju.

Prednosti za resurse interneta

Pozitivne strane za sam izvor temelje se na prošlim čimbenicima jer pojednostavljeni kretanje na web mjestu poboljšava čimbenike ponašanja, budući da će svi posjetitelji biti aktivniji u svojim aktivnostima i premjestiti na druge stranice.

Dakle, podaci Ponašajni čimbenici utječu na stav svih tražilica na web lokaciju i dovode do poboljšanja lokacije u SERP-u.

Kako napraviti gumb "gore" na mjestu sami

Razumijemo dalje. Gumb za pomicanje stranice za bilo koji od CMS-a uvijek se može obaviti sami, samo nekoliko jednostavnih koraka:

• stvaranje slike;
• Izrada skripte;
• stvaranje stila tipki;
• dodavanje na web mjesto.

Slika gumba

Da biste dodali gumb "gore" na web mjestu, najprije morate napraviti ikonu, a kada kliknete, korisnik će se pomaknuti prema gore. Da biste to učinili, možete koristiti gotove opcije, među kojima uvijek možete odabrati najprikladnije.

Da biste poboljšali izgled gumba, trebate izvršiti određena poboljšanja, naime, izraditi sprite koji vam omogućuje kombiniranje pozadinskih slika na temelju CSS-a i time stvaranje animacije od njih.

Za grafičke radove možete koristiti bilo koji urednik. No, najprikladnija će opcija biti online usluga PIXLR, jer ovdje ne morate ništa preuzeti i možete ga koristiti izravno u pregledniku.

Da biste počeli raditi u prozoru za uređivanje koji će se prikazati, odaberite polje "Upload image from computer". Kao primjer, uzmite sliku rakete.

Ako su dimenzije odabrane ikone prevelike, potrebna je mala prilagodba dimenzija. Da biste to učinili, idite na gornji izbornik i odaberite polje "Uredi", a potom "Besplatna pretvorba"

Sljedeći pored slike nalaze se posebni markeri, njihovo pomicanje, možete promijeniti veličinu slike. Da biste spremili razmjere, možete koristiti tipku Shift pritiskom, morate premjestiti plave markere. Na kraju ovih akcija dobiva se slika rakete.

Sljedeći je korak stvaranje kopije sloja.

Sada morate malo pomaknuti raketnu sliku iz novog sloja. Da biste to učinili, praktično je koristiti alat za premještanje koji se nalazi u drugom stupcu lijevog izbornika i strelicu "gore" na tipkovnici.

Sada morate napraviti crnu i bijelu sliku. To se može učiniti pomoću "Correction" - "Hue / Saturation" stavke u gornjem izborniku. Za potpuno promjenu boje, klizač Zasićenost mora biti postavljen na -100. Ova akcija učinit će učinak da se gumb "Gore" pretvori s crno-bijelog u boju kada je lebdjeti.

Konačni dodir je uklanjanje višak prostora oko dvije slike. Da biste to učinili, odaberite stavku "Obreži" s lijevog izbornika i odaberite samo dva projektila u pravokutniku. Da biste izvršili izrezivanje, pritisnite tipku Enter.

Rezultat je slika u kojoj nema viška prostora. Bit će potrebno snimiti širinu i visinu rezultirajuće slike jer će ti podaci biti korisni u sljedećem koraku.

Za spremanje trebate kliknuti na „File” - „Save”, gdje je ostavio u „My Computer”, napisali ime slike (samo na engleskom izgled tipkovnice), odabrati oblik (u ovom slučaju - PNG) i kliknite na „Da”.

Datoteka sa skriptom za gumb

U ovom slučaju, ne morate pisati skriptu. Bit će moguće iskoristiti javnu mogućnost, dajući neke ispravke gotovom kodu.

Da biste to učinili, morate preuzeti sve uređivače koda. Najpopularnija i besplatna inačica je Notepad ++. Nakon instalacije morate kopirati i zalijepiti u sve to kôd:

Zatim kliknite gornji izbornik "File" - "Save ashellip;", a zatim spremite kod u .js formatu. Nakon toga možete upotrijebiti ovaj kôd na svojoj web-lokaciji, prenijeti skriptne datoteke i slike na njega pomoću FTP veze.

Instalacija na mjestu

Da biste postavili gumba za pomicanje gore za web mjesto, trebate postaviti kôd na željeno mjesto. Morate ga unijeti prije oznake .

Stvaranje stila gumba u CSS-u

Najčešće se gumb "gore" za web mjesto nalazi na dnu ("podrum").

U datoteci style.css web mjesta morate unijeti sljedeći kôd:

U tom slučaju potrebna je širina i visina podataka slike. Ostaje samo unijeti podatke u kôd, a gumb "gore" za web mjesto će biti spreman! Što još?

Gore gumb za Wordpress web mjesto

Za ovaj CMS, gumb "Gore" može se napraviti uz pomoć dodataka, kao i samostalno.

Metoda s dodatkom je najprikladnija i jednostavna za instalaciju jer to zahtijeva samo klik na gumb za instalaciju i prilagodite sve funkcije u izborniku dodatka.

Izbor potonjeg bi trebao biti približen s oprezom, jer će zajedno s njom biti moguće lako nabaviti virus na mjestu. Najpopularnija i dokazana opcija je plug-in pod nazivom Scroll Back To Top. Možete je preuzeti standardnim Wordpress dodatkom.

Ovo proširenje ima više funkcija, a vrlo će lako individualizirati gumb "gore" za WordPress web mjesto. Sve se vrijednosti ne moraju mijenjati, samo trebate konfigurirati izgled i mjesto gumba na stranici web mjesta.

Kao što možete vidjeti, postavljanje gumba "gore" uz pomoć dodataka vrlo je jednostavno. No, postoji jedna važna nijansi, da svaki instalirani dodatak učitava CMS. To može utjecati na brzinu internetskih resursa. Zato većina vlasnika web mjesta pokušava izvršiti sve izmjene izravno u kodu, a ne uz pomoć proširenja trećih strana. Možete postaviti gumb "gore" za web mjesto na HTML-u, što će minimizirati potrošene resurse.

Prije mijenjanja svih datoteka sustava WordPress mora napraviti sigurnosne kopije. Zatim možete slijediti sve korake kako biste stvorili svoj gumb, gore opisan.

Knoka "gore" za Joomla

CMS Joomla također podržava instalaciju dodataka, kao što je Wordpress. Najuspješnija inačica gumba "gore" za web mjesto na Joomla 3 je proširenje zove Vrh stranice.

U ovom CMS-u bilo koji dodatak može se instalirati putem "Extension Manager". Da biste to učinili, trebate:

• preuzeti dodatak na Internetu;
• Kliknite gumb "Pregledaj" u Upravitelju proširenja;
• odaberite preuzetu arhivu;
• kliknite "Download" i instalirajte.

Sada ga morate aktivirati u "Upravitelju dodatka". Da biste to učinili, idite na ovaj odjeljak, pronađite dodatak i prebacite ga na "uključeno".

Zatim konfigurirate sve opcije proširenja pomoću istog odjeljka gdje trebate pronaći "osnovne parametre" ovog dodatka na desnoj strani.

Vrh stranice ima sljedeće funkcije:

• Pokrenite / administrator - omogućite opciju ne samo na resursu Interneta, već iu samom CMS Joomla.
• Položaj otkrivanja gumba - koliko piksela korisnik treba premotavati kako bi se pojavio gumb "gore".
• Odustani od teksta gumba - tekst na gumbu.
• Uvijek na vrhu - stranica web mjesta uvijek će biti prikazana od početka. Kada upotrebljavate "sidra" za pomicanje na određeno mjesto na stranici, ta se opcija ne mora aktivirati.
• Glatko kretanje - čini stranicu pomicanjem glatko.
• Trajanje promatranja - vrijeme u kojem se stranica potpuno pomiče na početak.
• Pomicanje prelaska - dodaje pomicanje za velike vizualne efekte.
• Transition Easing - "ublažavanje" pomak prema vrhu stranice.
• Lokacija veze - lokacija ikone. Po standardu, gumb se nalazi u donjem desnom kutu.
• Koristite Stilovi - pojedinačni stil gumba koji se može postaviti u donjem polju. Ako se prebacite na negativnu vrijednost, sve postavke stila bit će preuzete s teme aktivnog web mjesta.
• Stil za povezivanje - polje za unos postavki stila gumba.

Da biste prilagodili stil gumba "gore", morate imati barem minimalno znanje o CCS-u. U suprotnom, potrebno je promijeniti vrijednost zadnjeg parametra na "Ne".

Druga važna nijansa je da uobičajeni natpis na ikoni sadrži engleski tekst: Povratak na vrh. Na ruskom jeziku, takav tekst ne može biti prisutan, stoga ga samo isključite u postavkama dodataka ili ga prebacite na ruski.

Da biste promijenili ovaj natpis, morate se poslužiti FTP-om ili ugrađenim upraviteljem datoteka. Zatim u direktoriju "/ administrator / language / hr-GB /" morate pronaći datoteku pod nazivom "en-GB.plg_system_topofthepage.ini".

Prije mijenjanja teksta, trebate promijeniti kodiranje ovog dokumenta u UTF-8. To će učiniti normalan prikaz ruskih pisama.

Dalje nalazimo sljedeću liniju:

i promijeniti izraz u navodnicima na ruski jezik. Možete upotrijebiti izraze poput "Gore!", "U početku!" Ili "Gore!".

Na kraju, morat ćete spremiti modificiranu datoteku i provjeriti "gore" gumb za web mjesto na Joomla.

Gumb gore za Ucoz

Gumb "gore" za web mjesto na Ucozu morat će se izvršiti uvođenjem koda, jer se plug-inovi za ovaj CMS ne mogu povezati. Međutim, to ne zahtijeva dugačak pregled podataka o datotekama sustava i traženje potrebnih redaka, samo trebate umetnuti mali broj na traženi položaj.

Za instalaciju trebamo:

• idite na "Upravljačka ploča -> Dizajn -> Upravljanje projektima (Templates) -> Dno web-
• umetnite skriptu (možete pronaći na službenim stranicama projekta i resursima treće strane).

zaključak

Nakon toga će se u donjem desnom kutu pojaviti ikona, pomicanje korisnika do samog vrha stranice.

Kao što možete vidjeti, postavljanje gumba "Gore" za bilo koji od CMS-a nije bilo osobito teško. Možete koristiti i automatizirani način instalacije (dodatke) i priručnik. Međutim, ova posljednja opcija ostaje najprikladnija, jer ne utječe negativno na izvedbu web mjesta.

Možete upotrijebiti gumb "gore" za web mjesto na HTML-u kako biste umanjili upotrebu resursa web mjesta jer veliki broj proširenja može negativno utjecati na izvedbu resursa. Jedan gumb za dodatak "gore" ne može uvelike utjecati na vrijeme učitavanja stranica web mjesta, ali u većini slučajeva korisnik ima najmanje desetak dodataka instaliranih na CMS-u. U tom slučaju bilo koji dodatni modul može negativno utjecati na izvedbu stranica web mjesta.