Ta funkcija, kot je gumb "gor" za spletno mesto, naredi internetni vir bolj priročen za njegove obiskovalce. Pomaga vam, da se preprosto premikate s katerega koli mesta na strani na vrh strani. To je nujno za spletne trgovine in spletna mesta z velikimi članki, ki zahtevajo dolgo pomikanje navzdol.
Kaj je za
Trenutno večina spletnih mest nima takšne funkcije, kot je gumb "gor", in v tem ni nič kritičnega. Toda njegova uporaba lahko prinese številne prednosti tako za internetni vir kot za njegove obiskovalce.
Ugodnost za obiskovalce
Pogosto se zgodi, ko je stran internetnega vira močno obremenjena z informacijami, ko informativni članek zavzame veliko prostora in se morate s kolescem miške pomikati po strani navzdol. Poleg tega je na koncu članka morda veliko komentarjev nanj.
Ko obiskovalec bere članek, ni nič utrujajoče pri pomikanju po strani, ko pa se besedilo konča in se morate premakniti navzgor, postane malo utrujajoče. Večina ljudi bo preprosto prelenih, da bi se dolgo pomikali, in bodo preprosto zaprli spletno mesto, namesto da bi se še enkrat sprehodili po njegovih prostranstvih.
Uporaba gumbače se takoj premaknete na vrh strani, je bolj priročno preživeti čas na spletnem mestu.
Ugodnost za internetni vir
Pozitivnosti za sam vir izvirajo iz preteklih dejavnikov, saj enostavnejša navigacija po spletnem mestu izboljša vedenjske dejavnike, saj bodo vsi obiskovalci bolj aktivni pri svojih dejanjih in se bodo premaknili na druge strani.
Tako ti vedenjski dejavniki vplivajo na odnos vseh iskalnikov do spletnega mesta in vodijo do izboljšanja položaja v rezultatih iskanja.
Kako sami narediti gumb "gor" na spletnem mestu
Nadaljnje ravnanje. Gumb za pomikanje navzgor za spletno mesto lahko vedno ustvarite sami na katerem koli CMS-ju, tako da sledite le nekaj izjemno preprostim korakom:
- ustvarjanje slike;
- ustvarjanje skripta;
- ustvari slog gumba;
- dodajanje na spletno mesto.
Slika gumba
Če želite na spletno mesto dodati gumb "gor", morate najprej narediti samo ikono, ob kliku pa se bo uporabnik premaknil na vrh strani. Za to lahko uporabite že pripravljene možnosti, med katerimi lahko vedno izberete najprimernejšo.
Za izboljšanje videza gumba moramo narediti nekaj izboljšav, in sicer narediti sprite, ki nam omogoča kombiniranje slik ozadja na podlagi CSS in tako iz njih ustvarimo animacijo.
Za grafična dela lahko uporabite kateri koli urejevalnik. Toda najbolj priročna možnost bi bila spletna storitev. PIXLR, saj tukaj ni ničesar za prenos in ga lahko uporabite neposredno v brskalniku.
Če želite začeti, v oknu urejevalnika, ki se prikaže, izberite polje »Prenesi sliko iz računalnika«. Vzemimo za primer podobo rakete.
Če so dimenzije izbrane ikone prevelike, boste morali narediti majhno prilagoditev velikosti. Če želite to narediti, pojdite v zgornji meni in izberite polje "Uredi" in po "Prosto pretvorbo …"
Naprej se ob sliki prikažejo posebni markerji, s premikanjem katerih lahko spremenite velikost slike. Če želite ohraniti razmerja, lahko uporabite tipko Shift, ki jo držite, da premaknete modre oznake. Na koncu teh korakov dobimo sliko rakete.
Naslednji korak je ustvariti kopijo sloja.
Zdaj morate premakniti sliko rakete iz nove plasti nekoliko navzgor. Za to bo priročno uporabiti orodje za premikanje, ki se nahaja v drugem stolpcu levega menija, in puščico navzgor na tipkovnici.
Zdaj moramo narediti zgornjo sliko črno-belo. To lahko storite s postavko "Popravek" - "Hue / Saturation" v zgornjem meniju. Za popolno desaturacijo je treba drsnik Saturation nastaviti na -100. To dejanje vam bo omogočilo, da ustvarite učinek, pri katerem se gumb "Navzgor" spremeni iz črno-belega v barvni, ko premaknete miškin kazalec nanj.
Končni dotik je odstranitev dodatnega prostora okoli dveh slik. Če želite to narediti, v levem meniju izberite element "Obreži".izberemo samo dve raketi v pravokotniku. Za obrezovanje je pritisnjena tipka Enter.
Rezultat je slika, na kateri ni dodatnega prostega prostora. Zapisati boste morali širino in višino nastale slike, saj bodo ti podatki uporabni v naslednjem koraku.
Če želite shraniti, morate klikniti na "Datoteka" - "Shrani", kjer v levem odstavku "Moj računalnik" napišemo ime slike (samo angleška postavitev), izberemo format (v tem ohišje, PNG) in kliknite gumb »Da«.
Datoteka s skriptom gumba "gor"
V tem primeru vam ni treba napisati skripta. Možna bo uporaba javne različice z nekaj spremembami v končani kodi.
Če želite to narediti, morate prenesti kateri koli urejevalnik kod. Najbolj priljubljena in tudi brezplačna možnost je Notepad++. Ko ga namestite, morate vanj kopirati in prilepiti vso to kodo:
| $(dokument).pripravljen(funkcija(){ $(okno).scroll(funkcija () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} drugače {$('scroller').fadeOut();}}); $('scroller').click(funkcija () {$('body, html').animate({scrollTop: 0}, 400); vrni false;}); }); |
Naprej kliknite v zgornjem meniju "Datoteka" - "Shrani kot …", nakar shranimo kodo v formatu.js. Po tem lahko uporabite to kodo na svojem spletnem mestu tako, da nanj naložite skriptne datoteke in slike prek povezave FTP.
Namesti na spletno mesto
Če želite nastaviti gumb za pomikanje navzgor za spletno mesto, ga morate vnestizahtevano kodo mesta. Vnesti ga morate pred oznako.
Ustvarjanje sloga gumba s CSS
Najpogosteje se gumb "gor" za spletno mesto nahaja na dnu ("noga").
Datoteki style.css spletnega mesta je treba dodati naslednjo kodo:
|
/gumb navzgor/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ gumb širina/ height:96px;/50% višina gumba/ bottom:5px;/spodnje oblazinjenje na fiksnem položaju/ levo:89%;/premik levo/ }.scrollTop:hover{ background-position:0 -108px; } /odmik ozadja/" |
V tem primeru bodo potrebni podatki o širini in višini slike. Ostaja samo, da prejete podatke vnesete v kodo in gumb "gor" za spletno mesto bo pripravljen! Kaj še?
gumb gor za spletno mesto Wordpress
Za ta CMS lahko gumb "Navzgor" naredite z vtičniki, pa tudi neodvisno.
Metoda vtičnikov je najbolj priročna in enostavna za namestitev, saj zahteva le, da kliknete gumb za namestitev in konfigurirate vso funkcionalnost v meniju vtičnikov.
K izbiri slednjega je treba pristopiti previdno, saj bo z njim zlahka pridobiti virus na spletnem mestu. Najbolj priljubljena in preizkušena možnost je vtičnik z imenom Pomakni se nazaj na vrh. Prenesete ga lahko s standardnim iskanjem vtičnikov Wordpress.
Ta razširitev imaveč funkcionalnosti, gumb "gor" pa bo zelo enostavno prilagoditi za spletno mesto Wordpress. Vseh vrednosti sploh ni treba spreminjati, konfigurirati morate le videz in lokacijo gumba na strani spletnega mesta.
Kot vidite, je nastavitev gumba gor z vtičniki zelo enostavna. Vendar obstaja en pomemben odtenek, ki je, da vsak nameščen vtičnik naloži CMS. To lahko vpliva na hitrost internetnega vira. Zato večina lastnikov spletnih mest poskuša vse spremembe narediti neposredno v kodi in ne s pomočjo razširitev tretjih oseb. Za spletno mesto HTML lahko ustvarite gumb "gor", ki bo zmanjšal porabljene vire.
Preden spremenite vse sistemske datoteke Wordpress, jih morate varnostno kopirati. Nato lahko sledite vsem korakom, da ustvarite svoj gumb, opisan zgoraj.
Gumb "gor" za Joomla
CMS Joomla podpira tudi namestitev vtičnikov, kot je Wordpress. Najuspešnejša različica gumba "gor" za spletno mesto na Joomli 3 je razširitev, imenovana Vrh strani.
V tem CMS-ju je mogoče kateri koli vtičnik namestiti prek "Upravitelja razširitev". Za to potrebujete:
- prenesite vtičnik na internetu;
- kliknite na gumb "Prebrskaj" v upravitelju razširitev;
- izberi preneseni arhiv;
- kliknite "Prenesi" in namestite.
Zdaj ga morate aktivirati v »Upravitelju vtičnikov«. Za tomorate iti v ta razdelek, poiskati vtičnik in preklopiti njegovo stanje na "omogočeno".
Naslednji korak je, da konfigurirate vse parametre razširitve z istim razdelkom, kjer morate na desni strani najti "Osnovne parametre" tega vtičnika.
Na vrhu strani ima naslednje funkcije:
- Zaženi/ skrbnik - omogočanje možnosti ne samo na internetnem viru, ampak tudi v sami plošči Joomla CMS.
- Položaj za razkrivanje gumba - koliko slikovnih pik mora uporabnik previti nazaj, da se prikaže gumb navzgor.
- Izpusti besedilo gumba - prisotnost besedila na gumbu.
- Vedno na vrhu - stran spletnega mesta bo vedno prikazana z vrha. Če uporabljate sidra za pomikanje do določene lokacije na strani, te možnosti ni treba omogočiti.
- Smooth Scroll - omogoča gladko pomikanje po strani.
- Trajanje pomikanja - čas, po katerem se bo stran popolnoma premaknila na začetek.
- Scroll Transition - dodaja več vizualnih učinkov pomikanju.
- Olajšavanje prehoda - "oslabitev" gibanja na vrh strani.
- Lokacija povezave - lokacija ikone. Privzeto se gumb nahaja v spodnjem desnem kotu.
- Uporabi sloge – posamezni slog gumba, ki ga lahko nastavite v spodnjem polju. Če preklopite na negativno vrednost, bodo vse nastavitve sloga vzete iz aktivne teme spletnega mesta.
- Slog povezave - polje za vnos parametrov sloga gumba.
Če želite prilagoditi slog gumba "gor", morate imeti vsaj minimalno količinoZnanje CCS. V nasprotnem primeru preklopite vrednost predzadnjega parametra na "Ne".
Še en pomemben odtenek je, da običajni napis na ikoni vsebuje angleško besedilo: Vrni se na vrh. Takšno besedilo ne more biti prisotno na spletnem mestu v ruskem jeziku, zato ga preprosto onemogočite v parametrih vtičnika ali spremenite v ruščino.
Če želite spremeniti ta napis, morate iti na strežnik mesta s pomočjo FTP ali upravitelja datotek, vgrajenega v gostovanje. Nato morate v imeniku "/administrator/language/en-GB/" najti datoteko z imenom "en-GB.plg_system_topofthepage.ini".
Preden spremenite besedilo, spremenite kodiranje tega dokumenta v UTF-8. To bo omogočilo običajen prikaz ruskih črk.
Naslednja vrstica:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Nazaj na vrh"" |
in spremenite besedno zvezo v narekovajih v ruščino. Uporabite lahko fraze, kot so "Navzgor!", "Na vrh!" ali "Navzgor!".
Na koncu boste morali shraniti spremenjeno datoteko in preveriti gumb "gor" za spletno mesto na Joomli.
gumb gor za Ucoz
Gumb "gor" za spletno mesto na Ucozu bo treba izvesti z vbrizgavanjem kode, saj je nemogoče povezati vtičnike za ta CMS. Vendar to ne zahteva dolgega preučevanja sistemskih datotek in iskanja potrebnih vrstic, le prilepiti morate majhno kodo na pravo mesto.
Da nas namestitezahtevano:
- pojdite na "Nadzorna plošča -> Design -> Design Management (predloge) -> Dno strani;
- vstavite skript (najdete ga na uradni spletni strani projekta in virih tretjih oseb).
Sklep
Po tem se bo v spodnjem desnem kotu pojavila ikona, ki uporabnika premakne na sam vrh strani.
Kot vidite, nastavitev gumba za nazaj za kateri koli CMS ni bila posebej težka. Uporabite lahko tako avtomatizirano metodo namestitve (vtičniki) kot ročno. Vendar pa zadnja možnost ostaja najprimernejša, saj ne vpliva negativno na delovanje strani.
Za spletno mesto HTML lahko uporabite gumb "nazaj na vrh", da zmanjšate porabo virov spletnega mesta, saj lahko veliko število razširitev negativno vpliva na učinkovitost vira. En vtičnik z gumbom "gor" ne bo mogel močno vplivati na čas nalaganja strani spletnega mesta, vendar ima uporabnik v večini primerov na CMS nameščenih vsaj ducat vtičnikov. V tem primeru lahko kateri koli vtičnik negativno vpliva na delovanje strani spletnega mesta.
