Takva funkcija kao što je dugme "gore" za sajt čini internet resurs pogodnijim za njegove posetioce. Pomaže vam da se lako krećete s bilo kojeg mjesta na stranici na vrh stranice. Ovo je neophodno za online prodavnice i sajtove sa velikim člancima koji zahtevaju dugo skrolovanje prema dole.
Šta je za
U ovom trenutku većina sajtova nema takvu funkciju kao dugme "gore", i u tome nema ničeg kritičnog. Ali njegovo korištenje može donijeti mnoge prednosti kako za internet resurs tako i za njegove posjetitelje.
Pogodnost za posjetitelje
Često se dešava kada je stranica internet resursa preopterećena informacijama, kada informativni članak zauzima puno prostora i morate da skrolujete prema dole po stranici pomoću točkića miša. Pored ovoga, 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 gore, počinje da postaje pomalo zamorno. Većina ljudi će jednostavno biti previše lijena za skrolovanje dugo vremena i jednostavno će zatvoriti stranicu, umjesto da još jednom prošetaju njenim prostranstvima.
Korišćenje dugmetada trenutno pređete na vrh stranice čini provođenje vremena na sajtu praktičnijim.
Benefit za internetski resurs
Pozitivne strane za sam resurs dolaze iz prošlih faktora, jer lakša navigacija po web-mjestu poboljšava faktore ponašanja jer će svi posjetitelji biti aktivniji u svojim radnjama i preći na druge stranice.
Dakle, ovi faktori ponašanja utiču na stav svih pretraživača prema sajtu i dovode do poboljšanja pozicije u rezultatima pretrage.
Kako sami napraviti dugme "gore" na sajtu
Danje dalje. Uvijek možete sami napraviti dugme za pomicanje prema gore za web lokaciju na bilo kojem CMS-u slijedeći samo nekoliko izuzetno jednostavnih koraka:
- kreiranje slike;
- kreiranje skripte;
- kreiraj stil dugmeta;
- dodavanje na stranicu.
Slika dugmeta
Da dodate dugme "gore" na sajt, prvo morate da napravite samu ikonu, kada se klikne, korisnik će se pomeriti na vrh stranice. Da biste to učinili, možete koristiti gotove opcije, među kojima uvijek možete odabrati najprikladniju.
Da bismo poboljšali izgled dugmeta, potrebno je da napravimo neka poboljšanja, naime, da napravimo sprite koji nam omogućava da kombinujemo pozadinske slike zasnovane na CSS-u, stvarajući na taj način animaciju od njih.
Za grafičke radove možete koristiti bilo koji uređivač. Ali najpogodnija opcija bi bila online usluga. PIXLR, jer ovdje nema ništa za preuzimanje i možete ga koristiti direktno u svom pretraživaču.
Da biste započeli, u prozoru uređivača koji se pojavi, odaberite polje "Učitaj sliku sa računara". Uzmimo sliku rakete kao primjer.
Ako su dimenzije odabrane ikone prevelike, tada ćete morati malo podesiti veličinu. Da biste to učinili, idite na gornji meni i odaberite polje "Uredi", a nakon "Slobodna transformacija…"
Dalje, pored slike se pojavljuju posebni markeri, pomeranjem kojih možete promeniti veličinu slike. Da biste zadržali proporcije, možete koristiti tipku Shift, držeći koju trebate pomicati plave markere. Na kraju ovih koraka dobija se slika rakete.
Sljedeći korak je kreiranje kopije sloja.
Sada treba da pomerite sliku rakete iz novog sloja malo gore. Da biste to uradili, biće zgodno koristiti alatku za pomeranje, koja se nalazi u drugoj koloni levog menija, i strelicu nagore na tastaturi.
Sada moramo napraviti gornju sliku crno-bijelom. To se može učiniti pomoću stavke "Korekcija" - "Nijansa / zasićenost" u gornjem meniju. Za potpunu desaturaciju, klizač Saturation bi trebao biti postavljen na -100. Ova radnja će vam omogućiti da kreirate efekat u kojem će se dugme "Gore" pretvoriti iz crno-bijelog u boju kada pređete mišem preko njega.
Završni dodir je uklanjanje dodatnog prostora oko dvije slike. Da biste to učinili, odaberite stavku "Izrezivanje" iz lijevog izbornika ibiramo samo dvije rakete u pravougaoniku. Za izrezivanje, pritisnete 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 sačuvali, potrebno je da kliknete na "File" - "Save", gdje u lijevom pasusu "My Computer" upisujemo naziv slike (samo engleski izgled), odabiremo format (u ovom case, PNG) i kliknite na dugme "Da".
Fajl sa skriptom dugmeta "gore"
U ovom slučaju ne morate pisati skriptu. Bić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đe besplatna opcija je Notepad++. Nakon što ga instalirate, trebate kopirati i zalijepiti sav ovaj kod u njega:
| $(document).ready(function(){ $(window).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 meniju "File" - "Save as…", nakon čega spremamo kod u.js formatu. Nakon toga, ovaj kod možete koristiti na svojoj web lokaciji tako što ćete na njega učitati fajlove skripte i slike koristeći FTP vezu.
Instaliraj na sajt
Da biste podesili dugme za pomeranje nagore za sajt, potrebno je da ga postavitepotreban kod mjesta. Morate ga unijeti prije oznake.
Kreiranje stila dugmeta sa CSS-om
Najčešće se dugme "gore" za sajt nalazi na dnu ("footer").
Sljedeći kod se mora dodati u style.css fajl web-mjesta:
|
/Dugme gore/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ dugme širina/ height:96px;/50% visina dugmeta/ bottom:5px;/donji padding na fiksnoj poziciji/ left:89%;/pomak lijevo/ }.scrollTop:hover{ background-position:0 -108px; } /pomak pozadine/" |
U ovom slučaju, ti podaci o širini i visini slike će biti potrebni. Ostaje samo unijeti primljene podatke u kod, a dugme "gore" za stranicu će biti spremno! Šta još?
Dugme gore za Wordpress web lokaciju
Za ovaj CMS, dugme "gore" se može napraviti pomoću dodataka, kao i nezavisno.
Metoda dodataka je najpogodnija i najlakša za instalaciju, jer zahtijeva samo da kliknete na dugme za instalaciju i konfigurišete sve funkcije u meniju dodataka.
Izboru potonjeg treba pristupiti s oprezom, jer će se s njim lako zaraziti virusom na stranici. Najpopularnija i dokazana opcija je dodatak pod nazivom Scroll Back To Top. Možete ga preuzeti koristeći standardnu pretragu za Wordpress dodatke.
Ova ekstenzija imavišestruku funkcionalnost i biće vrlo lako prilagoditi dugme "gore" za Wordpress sajt. Nije potrebno uopće mijenjati sve vrijednosti, potrebno je samo konfigurirati izgled i lokaciju gumba na stranici stranice.
Kao što vidite, podešavanje dugmeta za gore sa dodacima je veoma jednostavno. Ali postoji jedna važna nijansa, a to je da svaki instalirani dodatak učitava CMS. Ovo može uticati na brzinu internetskog resursa. Zbog toga većina vlasnika stranica pokušava sve izmjene izvršiti direktno u kodu, a ne uz pomoć ekstenzija trećih strana. Možete napraviti dugme "gore" za HTML stranicu, što će minimizirati potrošene resurse.
Pre nego što promenite sve Wordpress sistemske fajlove, morate ih napraviti rezervnu kopiju. Zatim možete slijediti sve korake kako biste kreirali vlastito dugme, opisano iznad.
Dugme "gore" za Joomla
CMS Joomla takođe podržava instalaciju dodataka, kao što je Wordpress. Najuspješnija verzija dugmeta "gore" za web lokaciju na Joomla 3 je ekstenzija pod nazivom Vrh stranice.
U ovom CMS-u, bilo koji dodatak se može instalirati preko "Extension Managera". Za ovo vam je potrebno:
- preuzmite dodatak na Internetu;
- kliknite na dugme "Pregledaj" u upravitelju ekstenzija;
- odaberite preuzetu arhivu;
- kliknite na "Preuzmi" i instalirajte.
Sada ga morate aktivirati u "Plugin Manageru". Za ovotrebate otići na ovaj odjeljak, pronaći dodatak i prebaciti njegov status na "omogućeno".
Sljedeći korak je konfiguracija svih parametara ekstenzije koristeći isti odjeljak 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 Internet resursu, već iu samom Joomla CMS panelu.
- Pozicija otkrivanja dugmeta - koliko piksela korisnik mora da premota unazad da bi se pojavilo dugme za gore.
- Izostavi tekst dugmeta - prisustvo teksta na dugmetu.
- Uvijek na vrhu - stranica stranice će uvijek biti prikazana od vrha. Kada koristite sidra za skrolovanje do određene lokacije na stranici, ova opcija ne mora biti omogućena.
- Smooth Scroll - čini pomicanje stranica glatkijim.
- Trajanje skrolovanja - vrijeme nakon kojeg će se stranica u potpunosti premjestiti na početak.
- Scroll Transition - Dodaje više vizuelnih efekata skrolovanju.
- Ublažavanje tranzicije - "slabljenje" kretanja na vrh stranice.
- Lokacija veze - lokacija ikone. Podrazumevano, dugme se nalazi u donjem desnom uglu.
- Use Styles – individualni stil dugmeta, koji se može podesiti 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 dugmeta.
Da biste prilagodili stil dugmeta "gore", morate imati najmanje 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 sajtu na ruskom jeziku, tako da ga jednostavno treba onemogućiti u parametrima dodatka ili promeniti u ruski.
Da biste promenili ovaj natpis, potrebno je da odete na server sajta koristeći FTP ili fajl menadžer ugrađen u hosting. Zatim, u direktoriju "/administrator/language/en-GB/" trebate pronaći datoteku pod nazivom "en-GB.plg_system_topofthepage.ini".
Pre nego što promenite tekst, trebalo bi da promenite kodiranje ovog dokumenta u UTF-8. Ovo će učiniti normalan prikaz ruskih slova.
Dalje nalazimo sljedeći red:
| " 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, moraćete da sačuvate izmenjeni fajl i proverite da li postoji dugme "gore" za sajt na Joomli.
Dugme gore za Ucoz
Dugme "gore" za stranicu na Ucoz-u morat će se izvršiti korištenjem ubrizgavanja koda, pošto je nemoguće povezati dodatke za ovaj CMS. Međutim, ovo ne zahtijeva dugo proučavanje sistemskih datoteka i traženje potrebnih linija, samo trebate zalijepiti mali kod na pravo mjesto.
Da nas instaliratepotrebno:
- idite na "Kontrolna tabla -> Dizajn -> Upravljanje dizajnom (šabloni) -> 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 uglu, pomerajući korisnika na sam vrh stranice.
Kao što vidite, podešavanje dugmeta za povratak za bilo koji CMS nije bilo posebno teško. Možete koristiti i automatiziranu metodu instalacije (dodatke) i ručnu. Međutim, potonja opcija ostaje najprikladnija, jer ne utiče negativno na performanse stranice.
Možete koristiti dugme "povratak na vrh" za HTML sajt da smanjite potrošnju resursa sajta, jer veliki broj ekstenzija može imati negativan uticaj na performanse resursa. Jedan dodatak za dugme "gore" neće moći mnogo da utiče na vreme učitavanja stranica sajta, ali u većini slučajeva korisnik ima najmanje desetak dodataka instaliranih na CMS-u. U ovom slučaju, bilo koji dodatak može negativno utjecati na performanse stranica stranice.
