Takva funkcija kao što je tipka "gore" za stranicu čini internetski resurs prikladnijim za njegove posjetitelje. Pomaže vam da se lako krećete s bilo kojeg mjesta na stranici na vrh stranice. Ovo je neophodno za online trgovine i web-lokacije s velikim člancima koji zahtijevaju dugo pomicanje prema dolje.
Za što je to
U ovom trenutku većina web-mjesta nema takvu funkciju kao gumb "gore", i u tome nema ništa kritično. Ali njegovo korištenje može donijeti mnoge prednosti i za internetski resurs i za njegove posjetitelje.
Pogodnost za posjetitelje
Često se događa kada je stranica internetskog izvora opterećena informacijama, kada informativni članak zauzima puno prostora i morate se pomicati po stranici kotačićem miša. Osim toga, na kraju članka može biti mnogo komentara na to.
Kada posjetitelj pročita članak, nema ništa zamorno u pomicanju stranice prema dolje, ali kada je tekst došao do kraja i morate se pomaknuti prema gore, počinje biti pomalo zamorno. Većina će ljudi jednostavno biti previše lijena za pomicanje dugo vremena i jednostavno će zatvoriti stranicu, umjesto da još jednom šetaju njenim prostranstvima.
Upotrebom gumbaza trenutni prelazak na vrh stranice čini provođenje vremena na web-lokaciji praktičnijim.
Pogodnost za internetski resurs
Pozitivnosti za sam resurs dolaze iz prošlih čimbenika, jer lakša navigacija web-lokacijom poboljšava čimbenike ponašanja jer će svi posjetitelji biti aktivniji u svojim radnjama i premjestiti se na druge stranice.
Dakle, ovi čimbenici ponašanja utječu na stav svih tražilica prema stranici i dovode do poboljšanja pozicije u rezultatima pretraživanja.
Kako sami napraviti gumb "gore" na stranici
Dajte dalje. Uvijek možete sami napraviti gumb za pomicanje prema gore za stranicu na bilo kojem CMS-u slijedeći samo nekoliko vrlo jednostavnih koraka:
- izrada slike;
- izrada skripte;
- kreiraj stil gumba;
- dodavanje na stranicu.
Slika gumba
Da biste dodali gumb "gore" na stranicu, prvo morate napraviti samu ikonu, kada se klikne, korisnik će se pomaknuti na vrh stranice. Da biste to učinili, možete koristiti gotove opcije, među kojima uvijek možete odabrati onu najprikladniju.
Da bismo poboljšali izgled gumba, moramo napraviti neka poboljšanja, naime, napraviti sprite koji nam omogućuje kombiniranje pozadinskih slika na temelju CSS-a, stvarajući tako od njih animaciju.
Za grafičke radove možete koristiti bilo koji uređivač. Ali najprikladnija opcija bila bi internetska usluga. PIXLR, jer ovdje nema ništa za preuzimanje i možete ga koristiti izravno u svom pregledniku.
Za početak, u prozoru uređivača koji se pojavi odaberite polje "Prenesi sliku s računala". Uzmimo sliku rakete kao primjer.
Ako su dimenzije odabrane ikone prevelike, morat ćete napraviti malu prilagodbu veličine. Da biste to učinili, idite na gornji izbornik i odaberite polje "Uredi", a nakon "Slobodna transformacija…"
Dalje, pored slike se pojavljuju posebni markeri, pomicanjem kojih možete promijeniti veličinu slike. Da biste zadržali proporcije, možete koristiti tipku Shift, držeći koju trebate pomicati plave oznake. Na kraju ovih koraka dobiva se slika rakete.
Sljedeći korak je stvaranje kopije sloja.
Sada trebate pomaknuti sliku rakete iz novog sloja malo gore. Da biste to učinili, bit će prikladno koristiti alat za premještanje koji se nalazi u drugom stupcu lijevog izbornika i strelicu prema gore na tipkovnici.
Sada moramo gornju sliku napraviti crno-bijelom. To se može učiniti pomoću stavke "Ispravljanje" - "Nijansa / zasićenost" u gornjem izborniku. Za potpunu desaturaciju, klizač Saturation trebao bi biti postavljen na -100. Ova će vam radnja omogućiti stvaranje efekta u kojem će se gumb "Gore" iz crno-bijele pretvoriti u boju kada zadržite pokazivač iznad nje.
Završni dodir je uklanjanje dodatnog prostora oko dvije slike. Da biste to učinili, odaberite stavku "Obrezivanje" s lijevog izbornika iodabiremo samo dvije rakete u pravokutnik. Za izrezivanje, pritisnite tipku Enter.
Rezultat je slika na kojoj nema dodatnog slobodnog prostora. Morat ćete zapisati širinu i visinu rezultirajuće slike jer će ti podaci biti korisni u sljedećem koraku.
Da biste spremili, trebate kliknuti na "Datoteka" - "Spremi", gdje u lijevom odlomku "Moje računalo" upisujemo naziv slike (samo engleski izgled), odabiremo format (u ovom case, PNG) i kliknite gumb "Da".
Datoteka sa skriptom gumba "gore"
U ovom slučaju ne morate pisati skriptu. Bit će moguće koristiti javnu verziju uz neke izmjene gotovog koda.
Da biste to učinili, morate preuzeti bilo koji uređivač kodova. Najpopularnija i također besplatna opcija je Notepad++. Nakon što ga instalirate, trebate kopirati i zalijepiti sav ovaj kod u njega:
| $(dokument).ready(function(){ $(prozor).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); vrati false;}); }); |
Dalje, kliknite u gornjem izborniku "Datoteka" - "Spremi kao …", nakon čega spremamo kod u.js formatu. Nakon toga, možete koristiti ovaj kod na svojoj web-lokaciji tako da na nju učitate datoteke skripte i slike koristeći FTP vezu.
Instaliraj na web-lokaciju
Da biste postavili gumb za pomicanje prema gore za web-lokaciju, morate ga postavitipotreban kod mjesta. Morate ga unijeti prije oznake.
Izrada stila gumba s CSS-om
Najčešće se gumb "gore" za stranicu nalazi pri dnu ("podnožje").
Sljedeći kod mora se dodati u style.css datoteku web-mjesta:
|
/Gumb gore/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ gumb širina/ visina:96px;/50% visina gumba/ bottom:5px;/donji padding na fiksnoj poziciji/ lijevo:89%;/pomak ulijevo/ }.scrollTop:hover{ background-position:0 -108px; } /pomak pozadine/" |
U ovom slučaju bit će potrebni ti podaci o širini i visini slike. Ostaje samo unijeti primljene podatke u kod, a gumb "gore" za web mjesto bit će spreman! Što još?
gumb gore za web-lokaciju Wordpress
Za ovaj CMS, gumb "Gore" može se napraviti pomoću dodataka, kao i samostalno.
Način dodataka je najprikladniji i najjednostavniji za instalaciju, jer zahtijeva samo da kliknete na gumb za instalaciju i konfigurirate sve funkcije u izborniku dodataka.
Odabiru potonjeg treba pristupiti s oprezom, jer će s njim biti lako zadobiti virus na web mjestu. Najpopularnija i provjerena opcija je dodatak pod nazivom Scroll Back To Top. Možete ga preuzeti pomoću standardne pretrage za Wordpress dodatke.
Ovo proširenje imavišestruku funkcionalnost, a bit će vrlo lako prilagoditi gumb "gore" za web-mjesto Wordpress. Uopće nije potrebno mijenjati sve vrijednosti, samo trebate konfigurirati izgled i mjesto gumba na stranici stranice.
Kao što možete vidjeti, postavljanje gumba za gore s dodacima je vrlo jednostavno. Ali postoji jedna važna nijansa, a to je da svaki instalirani dodatak učitava CMS. To može utjecati na brzinu internetskog resursa. Zato većina vlasnika stranica pokušava sve izmjene izvršiti izravno u kodu, a ne uz pomoć proširenja trećih strana. Možete napraviti gumb "gore" za HTML stranicu, što će smanjiti potrošene resurse.
Prije promjene svih datoteka sustava Wordpress, morate ih sigurnosno kopirati. Zatim možete slijediti sve gore opisane korake za stvaranje vlastitog gumba.
Gumb "gore" za Joomla
CMS Joomla također podržava instalaciju dodataka, kao što je Wordpress. Najuspješnija verzija gumba "gore" za web-mjesto na Joomli 3 je proširenje pod nazivom Vrh stranice.
U ovom CMS-u, bilo koji dodatak može se instalirati putem "Extension Managera". Za to vam je potrebno:
- preuzmite dodatak na Internetu;
- kliknite na gumb "Pregledaj" u upravitelju proširenja;
- odaberite preuzetu arhivu;
- kliknite "Preuzmi" i instalirajte.
Sada ga morate aktivirati u "Plugin Manageru". Za ovomorate otići na ovaj odjeljak, pronaći dodatak i promijeniti njegov status na "omogućeno".
Sljedeći korak je konfiguriranje svih parametara proširenja pomoću istog odjeljka gdje trebate pronaći "Osnovne parametre" ovog dodatka na desnoj strani.
Vrh stranice ima sljedeću funkcionalnost:
- Run in/ administrator - omogućavanje opcije ne samo na internetskom resursu, već i na samom Joomla CMS panelu.
- Pozicija za otkrivanje gumba - koliko piksela korisnik mora premotati unatrag da bi se pojavio gumb za gore.
- Izostavi tekst gumba - prisutnost teksta na gumbu.
- Uvijek na vrhu - stranica stranice uvijek će se prikazivati s vrha. Kada koristite sidra za pomicanje na određeno mjesto na stranici, ova opcija ne mora biti omogućena.
- Smooth Scroll - čini pomicanje stranica glatkijim.
- Trajanje pomicanja - vrijeme nakon kojeg će se stranica u potpunosti premjestiti na početak.
- Scroll Transition - Dodaje više vizualnih efekata pomicanju.
- Ublažavanje prijelaza - "slabljenje" kretanja na vrh stranice.
- Lokacija veze - mjesto ikone. Prema zadanim postavkama, gumb se nalazi u donjem desnom kutu.
- Use Styles – individualni stil gumba, koji se može postaviti u polju ispod. Ako se prebaci na negativnu vrijednost, tada će sve postavke stila biti preuzete iz aktivne teme stranice.
- Stil veze - polje za unos parametara stila gumba.
Da biste prilagodili stil gumba "gore", morate imati barem minimalnoCCS znanje. U suprotnom, trebate promijeniti vrijednost pretposljednjeg parametra na "Ne".
Još jedna važna nijansa je da uobičajeni natpis na ikoni sadrži engleski tekst: Povratak na vrh. Takav tekst ne može biti prisutan na web-mjestu na ruskom jeziku, stoga ga trebate jednostavno onemogućiti u parametrima dodatka ili ga promijeniti u ruski.
Da biste promijenili ovaj natpis, trebate otići na poslužitelj web-mjesta koristeći FTP ili upravitelj datoteka ugrađenim u hosting. Zatim, u direktoriju "/administrator/language/en-GB/" trebate pronaći datoteku pod nazivom "en-GB.plg_system_topofthepage.ini".
Prije promjene teksta, trebali biste promijeniti kodiranje ovog dokumenta u UTF-8. Ovo će učiniti normalan prikaz ruskih slova.
Dalje nalazimo sljedeći redak:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Povratak na vrh"" |
i promijenite frazu pod navodnicima u ruski. Možete koristiti fraze kao što su "Gore!", "Na vrh!" ili "Gore!".
Na kraju ćete morati spremiti izmijenjenu datoteku i provjeriti postoji li gumb "gore" za web-mjesto na Joomli.
gumb Gore za Ucoz
Gumb "gore" za stranicu na Ucozu morat će se izvršiti pomoću ubrizgavanja koda, budući da je nemoguće spojiti dodatke za ovaj CMS. Međutim, to ne zahtijeva dugo proučavanje sistemskih datoteka i traženje potrebnih redaka, samo trebate zalijepiti mali kod na pravo mjesto.
Da biste nas instaliralipotrebno:
- idite na "Upravljačka ploča -> Dizajn -> Upravljanje dizajnom (predlošci) -> Dno stranice;
- ubacite skriptu (može se naći na službenoj web stranici projekta i resursima trećih strana).
Zaključak
Nakon toga, ikona će se pojaviti u donjem desnom kutu, pomičući korisnika na sam vrh stranice.
Kao što možete vidjeti, postavljanje gumba za povratak za bilo koji CMS nije bilo osobito teško. Možete koristiti i automatiziranu metodu instalacije (dodatke) i ručnu. Međutim, potonja opcija ostaje najprikladnija jer ne utječe negativno na izvedbu stranice.
Možete koristiti gumb "povratak na vrh" za HTML stranicu kako biste smanjili potrošnju resursa web-mjesta, jer veliki broj proširenja može imati negativan utjecaj na izvedbu resursa. Jedan dodatak s gumbom "gore" neće moći uvelike utjecati na vrijeme učitavanja stranica stranice, ali u većini slučajeva korisnik ima instalirano najmanje desetak dodataka na CMS-u. U ovom slučaju, bilo koji dodatak može negativno utjecati na izvedbu stranica web-mjesta.
