Arvutid ja kaasaegsed vidinad

Tere, kallid ajaveebisaidi lugejad. Loomulikult saate selle ülesande jaoks kasutada pistikprogrammi, kuid ise teha pole nii raske, ja neid jääb vähemaks, eriti kuna ma töötan nendega juba päris palju (vt artiklit lingil). Võtsin sealt sotsiaalvõrgustike ikoonid, millest ma juba üksikasjalikult kirjutasin (loodan, et Dimox ei vaidle sellele vastu).

Ja pidasin seda ka e-posti jaoks sobivaks.

Looge nuppudest sprait ja sisestage saidile HTML-kood

Pärast kõigi vajalike rühmade ja lehtede loomist sotsiaalvõrgustikes, mis tähendab, et olete saanud kõik vajalikud lingid, võite saidile nuppude lisamisega hämmingut tekitada. Loomulikult saate vastavalt minu postitusele valida iga sotsiaalvõrgustiku jaoks sobiva ikooni ja vajadusel vähendada selle suurust soovitud suuruseni ja.

Kuid see pole parim valik. Miks? Noh, sest iga sotsiaalvõrgustiku pildi laadimiseks tehakse teie serverile eraldi taotlus. Kui teil on kümmekond ikooni, tähendab see kümmet päringut, mis mingil viisil loovad serverile täiendava koormuse ja . Selline ekstravagantsus meile ei sobi, seda enam, et see on olnud juba ammu.

Otsustasin mitte ratast uuesti leiutada (spriiti luua), vaid kasutasin seda, mis loob Share42 konstruktori (link sellega töötamise kirjeldusele on toodud veidi kõrgemal). Selles saate valida need sotsiaalvõrgustikud, mille ikoone vajate ja koos koodiga saate CSS spraiti, st. füüsiliselt üks graafiline fail, mis sisaldab kõiki vajalikke suhtlusvõrgustike ikoone ja RSS-kanali (ja vajadusel meili) tellimusi.

Valisin neli põhivõrku ja paar ikooni uudiste tellimiseks, mille ikoonide suurus on 24 x 24 , nii et minu sprite näeb välja selline ( , kuid see läks ikkagi sinna, kuid see pole oluline):

Nüüd on meil kõik koostisosad - lingid sotsiaalsete võrgustike rühmadele või lehtedele ja ikoonid nende kuvamiseks saidil. Jääb vaid kõik see õigesti ette valmistada, s.t. meik. Minu ajaveebi kasutab WordPress, seega kleebin nupu koodi ühte . Minu puhul nimetatakse seda sidebar.php. html kood tulemuseks on väga lihtne:

Noh, kõige huvitavam. Abiga määrame kindlaks, millist meie spraiti piirkonda selles konkreetses kohas taustana kuvatakse (meie puhul asetatakse see taust hüperlingi alla). Selle selgitamine võtab väga kaua aega, nii et lugege lingil olevat artiklit ja kõik saab selgeks (seal on ka illustreerivaid näiteid). Kui olete liiga laisk, siis katsetage lihtsalt numbritega, mis, nagu olete märganud, pole asjata 24 kordne.

Jah, laadige sprite fail FTP kaudu oma saidile üles ja määrake taustal selle tee (). See on kõik. Kui see ei õnnestu, lugege tähelepanelikumalt ülaltoodud linkidel olevaid materjale ja kui midagi ei õnnestu, siis kirjeldage oma olukorda kommentaarides (täpsemalt - koodi sisestamiseks ärge unustage seda lisada PHP-sildid nurksulgudega).

Edu sulle! Kohtume peagi ajaveebi lehtedel

Võib-olla olete huvitatud

Viimasel ajal palub iga teine ​​(kui mitte esimene) saidi arendamise nõuetes klient selle kindlasti sotsiaalvõrgustikega ühendada. Saidil olevad nupud "Sotsiaal" on sihtrühma meelitamiseks, sisu levitamiseks ja üldiselt PR-i tööriist number 1. Ja täiesti tasuta!

Sotsiaalvõrgustikud pakuvad oma nuppudele ja vidinatele saidile paigutamiseks koode ning lisavad juhised nende sisuhaldussüsteemi installimiseks. Iga CMS (operatsioonisüsteem) võimaldab teil neid installida, peamine on need harmooniliselt oma saidi kujundusse sobitada.

Millised on omadused ja funktsioonid?

Kui teie sait on suunatud inimestele, kes suhtlevad populaarsete sotsiaalvõrgustikega. võrkudes, näiteks Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest jne, ja soovite neid kõiki katta, siis selleks, et mitte määrata nende nuppe eraldi, kuna need võivad erineda suuruse ja disaini, soovitame kasutada koondamisteenuseid. Need on lihtsad ja mugavad tööriistad, mis võimaldavad saidi külastajatel kiiresti oma sõpradega teavet jagada, olenemata sellest, millist suhtlusvõrgustikku nad kasutavad. Allpool analüüsime kõige populaarsemaid teenuseid.

Jagage Pluso sotsiaalmeedia nuppe

Nüüd on saidile sotsiaalvõrgustiku nuppude lisamiseks üsna palju võimalusi, valikut on ja see meeldib. Sotsiaalsed nupud mängivad lehel olulist rolli, nende abiga, nagu paljud juba teavad, saate kiiresti uuesti postitada mis tahes kirje mõnes valitud suhtlusvõrgustikus. Saidi sotsiaalsed nupud on nüüd paigutatud kõikjale ja kõikjale, kuid mõnikord valesse kohta.

Saidi sotsiaalsed nupud

Paljud inimesed juba teavad, kui arenenud on sotsiaalvõrgustikud praegu ja kui tore on, kui teie saidil on sellised nupud, millega saate oma lemmikpostituse või postituse osa seinale lisada. Selle toiminguga te mitte ainult ei kommenteeri ega postita sõnumeid uuesti, vaid annate ka otsingumootoritele täiendava signaali.

Iga saidiomaniku unistus, kui lugejad postitavad kõik tema postitused oma lehtedele mõnes sotsiaalvõrgustikus. Nüüd on kõige rohkem nõudlust Vkontakte, Facebooki, Twitteri ja Odnoklassniki järele. Lisaksin veel LiveJournali, liveinterneti ja Bloggeri. Kasutaja täieliku mugavuse huvides on soovitav need nupud saidile lisada.

Eriti pälvib täna üha rohkem tähelepanu Twitter, mille abil ilmuvad teie uued väljaanded otsingumootori registrisse kiiremini.

Kui olete saidi omanik, peaks teil tõenäoliselt olema live-interneti või LiveJournali konto. Et mitte iga kord nendesse teenustesse uusi kirjeid lisada, säästab nende nuppude olemasolu aega. Lisaks kasutavad paljud inimesed neid teenuseid ja võivad soovida ka teie sissekande oma päevikusse uuesti postitada.

Sotsiaalsete nuppude kiireks saidile lisamiseks on mitu parimat viisi. Seda saate teha võrguteenuste abil, mis aitavad seda kiiresti ja lihtsalt. Või otse iga sotsiaalvõrgustiku kaudu eraldi. Siin on igaühel oma valik. Varem lisasin nuppe iga sotsiaalvõrgustiku kaudu eraldi, nüüd installisin need teenust kasutades.

Selline teenus on olemas, seda nimetatakse jaga 42. Temast on kirjutatud palju materjali, kui tubli ta on ja kuidas seda kasutada. Hea, aga tavakasutajale, kes sellest midagi aru ei saa, on sellega raske hakkama saada.

Nii väikese okupatsiooni jaoks kopeerin kaustad hosti ja siis suplesin stiilidega, nüüd see enam ei sõida. On ka teisi võimalusi, mille puhul peate kopeerima ja kleepima juba valmis koodi ilma täiendavate kaustadeta. Nii et unustage see teenus.

Lisage ainult kõige elementaarsemad suhtlusvõrgustiku nupud, mida enamik kasutab, ärge kujundage kümneid tarbetuid unustatud nuppe.

Mida saate täna kasutada saidi sotsiaalsete nuppude lisamiseks:

  1. Uptolike teenus.
  2. Yandexi sotsiaalsed nupud.
  3. Iga sotsiaalvõrgustiku käsitsi lisamine eraldi.
  4. Pluss teenus.
  5. WordPressi pistikprogrammide kasutamine (laiskadele).

Tõenäoliselt ei pea te kuhugi mujale sekkuma, te ei leia paremaid viise. Kõik need valikud on omal moel head. Kui teate mugavamat või atraktiivsemat viisi, kirjutage kommentaaridesse.

Suhtlusvõrgustiku nupud tuleb sisestada iga artikli lõppu, et saidi külastaja saaks pärast lugemist teie kirje uuesti postitada. Ta ei peaks neid kuskilt lehe lõpust otsima. Kõige optimaalsemad kohad, kuhu sellised nupud panna, on minu arvates külgribal ja kohe iga kirje lõpus.

Uptolike

Hetkel ma ise seda teenust kasutan, mulle meeldis. Lisaks mugavusele on uptolike teenusel teiste omalaadsete ees mitmeid eeliseid.

  • Lai valik sotsiaalmeedia nuppude vahel;
  • Mobiilseadmete jaoks kohandatud nupud;
  • Võimalus tsiteerida sotsiaalvõrgustikus teksti mis tahes osa;
  • Ülaosale saate lisada nupu;
  • Võimalus lisada Vkontakte grupi liitumiseks hüpikaken;
  • Ikoonide suuruse valimine;
  • saidi ikoonide stiili valimine;
  • Lisa hõljutusefekt;
  • Muuda nupu tausta, teksti värvi, loenduri tausta;
  • Suurendage või vähendage loenduri teksti.

Selle kasutamiseks piisab privileegidest teiste selliste teenuste ees. Sel juhul lisatakse ainult väike kood skripti kujul ja paar rida stiilidega. Samal ajal pole kõrvalist linki, kontrollisin seda väljaminevate linkide teenuse kaudu. Kui ma eksin, võite mind parandada.

Mida muud saab uptolike teenus peale selle teha.

Kõige olulisemad seaded Valige, milliseid sotsiaalseid nuppe selle saidi jaoks soovite näha. Vajadusel saate avada loendi ja valida enamuse hulgast veel mõned. Toe saamiseks märkige ruut. Pärast seda kuvatakse mobiiltelefonides suhtlusvõrgustike nupud alati ekraani allservas.

Valige nuppude horisontaalne asend, suurus ja stiil. Kaunistage oma maitse järgi ja lisage hõljumise efekt. Rohkem pole vaja midagi teha. Vastukoodi genereerimiseks peate määrama veebisaidi aadressi ja postkasti. Kohe pärast seda kuvatakse saidile sotsiaalsete nuppude sisestamise kood.

Kui teil on WordPressi sait, avage fail single.php ja kleepige valmis kood kohe pärast lehe sisu lõppu. Värskenda lehte ja vaata, mis juhtub. Midagi rasket pole.

Yandex

Valige soovitud teenuseikoonid. Twitter on ainult ikoonide kujul, ilma loenduriteta. Valime plokkide välimuse ja allpool on sisestamiseks valmis kood. Nagu varem mainitud, ei lisa Yandex midagi muud, kõik on tagasihoidlik ja maitsekas.

Käsitsi lisamise meetod

Selle meetodi puhul peate avama iga suhtlusvõrgustiku eraldi ja konfigureerima iga uuesti postitamise nupu eraldi. Facebooki nupu lisamiseks peate minema siin. Klassikaaslaste ja minu maailma jaoks peate andmed lisama. Twitteris toimub kõik . Vkontakte'i nupu lisamiseks minge aadressile sellel lehel .

Teil on valmis kood ainult sotsiaalvõrgustikest, ilma täiendavate skriptideta. Tõenäoliselt parim viis veebisaidile sotsiaalmeedia nuppude lisamiseks. Raskus tekib selles, et peate iga nupu eraldi lõikama, seejärel kleepima kõik ühte kohta ja kasutama css-stiile, et joondada see ühte veergu. Kui teil sellega probleeme pole, võite proovida.

Kokkupuutel

Vkontakte'i nupu lisamiseks klõpsake nuppu Ühendage saidid ja vidinad, allpool on kõigi võimalike lisade täielik loend. Samuti on võimalus lisada lehele kommentaare, kirjutada seinale, lisada oma gruppi, soovitusi, küsitlusi, tellida autorit ja avaldada linke. Meie puhul valige Avalda lingid.

Midagi keerulist pole, valime nupu stiili (loenduriga või ilma), kirjutame nupule teksti, logo valiku ja allosas on valmis manustamiskood. Ma ise kasutasin seda käsitsi lisamise meetodit, kuid hetkel proovin kolmanda osapoole teenust. Vaatame mis juhtub. Kui see mulle ei sobi, lähen kohe tagasi manuaalse meetodi juurde.

pluss

Veel üks võimalus saidile nuppude lisamiseks on Pluss teenus. Teenus pole ka halb, paljud märkasid sellelt nuppe. Disainivõimaluste valik on suur, lisaks amatöörile on suured pildi suurused. Võrkude lisamise võimalus pole teiste sarnaste teenustega võrreldes sugugi halvem. Installimine ei nõua faile, ainult koodi.

Valige mis tahes kujundusstiil ja lisage vajalikud teenused. Veidi madalamal näidatakse valmis näidet, kuidas see kõik lehel välja näeb. Ikoonid saab määrata suureks, keskmiseks või väikeseks. Samuti saidi või ümmargused ruudukujulised ikoonid, ühes reas või kahes reas, horisontaalselt või vertikaalselt. Kas loenduriga või ilma, ilma taustata või määrake taust vastavalt teie veebisaidi kujundusele.

Pärast kõiki neid samme on allpool lehele sisestamiseks valmis kood. Kui peate sisestama avalehele, siis tuhnime failis index.php, kui kõigis teie postitustes, lisame koodi kohe pärast postituse lõppu faili single.php.

WordPress

Kui te sellest koodist midagi aru ei saa, mida tuleb kopeerida, kuhu ja kuidas see kõik töötab, on väljapääs. Kui teil on WordPressi mootor, saate installida pistikprogrammi, mis annab teile sotsiaalmeedia nupud. Tänapäeval on selliseid pistikprogramme lihtsalt suur hulk. Minge administraatoripaneelile - Pluginad. Pistikprogrammide otsingusse saate kohe kirjutada "sotsiaalsed nupud", "sotsiaalne" või "VKontakte". Olen kindel, et leiate midagi.

Enamiku selliste sarnaste WordPressi pistikprogrammide hulgas on reitingut vaadates enim pandud järgmised:

  1. Sotsiaalse jagamise nupud WordPressi jaoks.
  2. sotsiaalne.
  3. Sotsiaalmeedia sulg – kerge sotsiaalmeedia jagamise ja jälgimise nupud.

Tegelikult on selliseid pistikprogramme palju, peate installima ja sorteerima, milline neist teile kõige rohkem meeldib, töötab õigesti, mida see näitab ja kuidas saate seda enda jaoks kohandada. Vaatame näidet esimesest sellisest pistikprogrammist Social Share Buttons for WordPress.

Pistikprogramm ise on vene keeles, sellega probleeme ei teki. Pärast installimist ilmub vasakpoolsesse menüüsse uus nupp "Jaga nupud". Põhiseadetes paneme saidi logo ja kirjutame teksti sotsiaalsete nuppude ette.

Kindlasti lülita sisse metaandmete genereerimine, kaasatakse lehe pealkiri ja kirjeldus. Joondage nupud horisontaalselt ja valige nende asukoht. Valime ainult postitustes. Soovi korral saate vajalikud lehed välja jätta. Päris allosas peate määrama tritteris hüüdnime.

Järgmisel vahekaardil Jagamisseaded valige nuppude stiil. Altpoolt saate sisse või välja lülitada mittevajalikud sotsiaalvõrgustikud ja lisada taane kogu ploki kohal või all. Te ei pea lisakoodi kuhugi panema, pistikprogramm teeb kõik teie eest.

Valik on teie, millist meetodit kasutada. Lisage sotsiaalmeedia ikoone uptolike, Pluso või Yandexi kaudu. Pluginat ei tasu kohe WordPressi installida, vaid proovige teha kõike käsitsi või mõne teenuse abil.

Kui teate mõnda muud head teenust või võimalust saidile sotsiaalsete nuppude lisamiseks, olen kommentaari eest tänulik.

Ülevaade kodumaistest disaineritest ja veebisaitide suhtlusvõrgustike nuppude skriptidest, aga ka välismaistest analoogidest. Lühidalt, selgelt ja selgelt.

Veebisaidi sotsiaalmeedia nuppude konstrueerijad

2. Lihtne viis saidi linkide hankimiseks - QIP.RU
Asetage oma saidile nupp ja andke külastajatele võimalus lisada neile meeldiva saidi sisu järjehoidjatesse, ajaveebidesse ja sotsiaalvõrgustikesse. Kolm sammu: kuhu paigutada nupp (veebisait, Blogger või WordPress), nupu stiil (valmis valikud) ja nupp hankida.

3. Sotsiaalvõrgustikesse sisu lisamise nupud – Pluso
Asetage nupud ja lubage külastajatel jagada oma lemmiklehti sotsiaalvõrgustikes, samuti printida, saata e-kirju ja lisada järjehoidjaid.

4. Sotsiaalse tegevuse teenus - UpToLike
Kohandatud sotsiaalmeedia nupud, millel on võimalus määrata värvi, kuju, suurust ja eriefekte. Lisafunktsioonid on PicShare'i piltide jagamise vidin, funktsioon "Tsiteeri" ja kohandatud funktsioon Following.

5. Üks nupp ! - kõigi järjehoidjateenuste ja sotsiaalsete võrgustike jaoks
Valige vaatamise nupp. Kuhu nupp installitakse: veebisait, Blogger või WordPress. Lisage nupp.

Saidi sotsiaalvõrgustiku nuppude skriptid

1. Ilusad suhtlusnupud saidi jaoks – goodshare.js
Kuvanupud peaaegu igas seadmes. Puhas kood. Lühidokumentatsioon. SEO sõbralik.

2. Skriptinupud sotsiaalsete järjehoidjate ja võrkude jaoks – Share42
Valige suurus ja märkige nende teenuste ikoonid, mida soovite saidil kasutada. Valige soovitud valikud. Vaadake, kuidas see välja näeb, ja/või laadige valmis skript alla. Installige skript WordPressi saidile, Drupali jne.

3. Kaunid sotsiaalsed meeldimisnupud jQuery abil – sotsiaalsed meeldimised
Like-nupu skript sama stiili loenduritega sotsiaalvõrgustikes: Facebook, Twitter, VKontakte, Odnoklassniki, Minu maailm, Google+ ja Pinterest.

Saidi sotsiaalvõrgustiku nuppude välismaised analoogid

1. Jagamisnupud – AddThis
Jagamisnupud aitavad teil suurendada saidi vaatajaskonda, meelitades levitatava sisu kaudu külastajaid teistest ressurssidest ja sotsiaalsetest võrgustikest.

4. Suhtlus jagamine – post
Võtke sotsiaalmeedias jagamisest rohkem kasu. Teenus hõlbustab külastajate suhtlusvõrgustikes jagamise protsessi, mis suurendab saidi orgaanilist liiklust.

5. Jagamisnupud mis tahes veebisaidi jaoks – AddToAny
Hankige sotsiaalmeedia nuppude kood mis tahes saidi jaoks. Valige nuppude tüüp ja stiil, määrake e-kiri ja muud valikud või valige üks platvormidest: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad või FeedFlare. Hankige nupu kood.

kell 8:00 Redigeeri sõnumit 6 kommentaari

Tere kallid sõbrad. Tänane artikkel on pühendatud sotsiaalsete nuppude ploki loomisele ilma teenuste ja pistikprogrammideta. Ja see plokk sisaldab ka nuppe, mis võimaldavad saidi külastajatel lehte printida, e-postiga artiklile linki saata ja artikli järjehoidjatesse lisada. Selliseid nuppe võib tänapäeval leida peaaegu igal saidil. Alles nüüd rakendatakse neid teenuste või pistikprogrammide abil. Ja ma näitan teile, kuidas seda ise teha.

Teenused, mida kasutasin klientide saitidel ja oma ajaveebis – ja . Need teenused muudavad ülesande täitmise üsna lihtsaks.

Mis on teie enda sotsiaalsete nuppude eelis teenuste ja pistikprogrammide ees?

  1. Loomulikult on vaieldamatu tegur saidi laadimise kiirus. Nii et näiteks PLUSO teenus, mida blogis kasutan, lisab heal juhul koormusele 633 millisekundit.

Ja selles plokis kasutatakse ainult sotsiaalsete nuppude vajalikke pilte, mis on kombineeritud . Kõik stiilid on viidud miinimumini. Lisaks lihtne html-raamistik.

  1. Minu pakutud viis ei sisalda väliseid linke. Ei, lingid on, kuid need kõik on nagu sisemised lingid. Soovi korral saad need alati kaasa. Ja siis sa ei näe neid üldse.

  1. Väga lihtne paigaldus. Piisab, kui sisestada ploki html kood saidi lehe lähtekoodi, laadida sprite üles, lisada css stiilid ja installimine on lõppenud. Peate lihtsalt nupu pildifaili tee parandama.
  2. See üksus ei ole pigem pluss ega miinus oma sotsiaalsete nuppude ploki suhtes. Nipp seisneb selles, et tema enda plokis pole nupuklõpsude loendurit. Ja seda võib lugeda miinuseks. Kuid teisest küljest on võimalik iga nuppu panna ja saate täpselt teada, mitu korda teie külastajad nuppudel klõpsasid ja teie artikleid sotsiaalvõrgustikes jagasid.
  3. Teie saidi teenuste kogutud statistikat ei edastata enam kolmandatele osapooltele.

Sotsiaalsete nuppude ploki lisamine lähtekoodi

Vaatleme klassikalist versiooni, kui nupud asuvad pärast artiklit.

Seda saate teha kas avades artiklite kuvamise eest vastutava faili (single.php) ja lisades lähtekoodi sotsiaalsete nuppude ploki. Teise võimalusena saab seda teha teema funktsioonifaili (functions.php) kaudu.

Näitan mõlemat võimalust ja teie valite endale sobiva.

Ploki sisestamine single.php lähtekoodi

Hoiatus: enne jätkamist tehke failist single.php varukoopia!

WordPressi administraatoripaneeli avamine "Välimus""Toimetaja""Üks kirje (single.php)".

Lähtekoodist otsige üles koht, kus artikli väljund lõpeb ja kommentaarid või leheküljed algavad. Just sellesse kohta peate sisestama sotsiaalsete nuppude ploki html-koodi.

Vaadake hoolikalt ekraanipilti, keskenduge artikli väljundi eest vastutavatele koodideleja kommentaarid. Ja kleepige allolev kood.

Muidugi on teie mallides mõningaid erinevusi, kuid olen kindel, et saate sellest aru, selles pole midagi keerulist. Ja pealegi on teil varukoopia olemas, pole midagi karta.

Ja siin on sotsiaalsete nuppude ploki html-kood:

Koodi selgitused: see on üks div klassiga .share, mis sisaldab linke sotsiaalvõrgustikele. Link avaneb eraldi hüpikaknas, selle eest vastutab see funktsioon onClick=window.open. Artikli lingi asendamine toimub selle koodiga. Igal lingil on oma klass, mille kaudu nupu kujutis määratakse.

See lõpetab sisestamise lähtekoodi kaudu. Ja siis peate lisama css-stiile.

Ploki sisestamine single.php lähtekoodi teemafunktsioonide kaudu

Hoiatus: enne alustamist tehke failist functions.php varukoopia!

Selle valiku kasutamiseks peate avama faili functions.php ja lisama selle koodi päris lõppu:

/* Sisesta sotsiaalsed nupud */ add_action("kommentaaride_mall","soc_button"); funktsioon soc_button() ( ?> Ja olge ettevaatlik pärast koodi kleepimist, et teil ei tohiks olla tühikuid ega muid märke. Või lihtsalt php-koodi sulgemine?>. Vastasel juhul lakkab sait töötamast.

Koodi selgitused: koht, kuhu sotsiaalmeedia nupud paigutatakse, on määratud API võtmega comments_template . See võti määrab koha enne kommentaare. Sotsiaalse nupu kood ise on php avamise ja sulgemise tagumistes siltides. Koodis märkisin need punasega. see on kogu trikk html-koodi sisestamiseks php-sse teemafunktsioonide kaudu.

Sellel ja sellel meetodil on lõpp, jätkame piltide saidile üleslaadimisega.

Nupupiltide üleslaadimine serverisse

Näiteks valmistasin mitu spraiti sotsiaalsete nuppude piltidega. Saate need alla laadida.

Sprite, mida ma näitena kasutan, on ainult 3,97 kb ja sisaldab ainult vajalikke nuppe. Ja kuna see on sprait, siis on andmebaasile ainult üks päring, mitte iga nupu jaoks eraldi.

Laadige alla pildid või valmistage need ette ja laadige need oma saidile üles. Ma arvan, et see ei tohiks olla probleem. Lisaks on css-stiilide kaudu nuppude kujundamiseks vaja linki sellele spraiteile.

Sealhulgas CSS-stiilid

Muidugi saab selle sammu teha päris esmalt, kuid eelistan enne teha kõik keerulised tehnilised tööd ja siis minna edasi toredate pisiasjade juurde css-stiilidega.

Seega avage oma saidi kujunduse eest vastutav fail style.css. Ja kleepige need stiilid:

Jagage (kuva: inline-block; vertikaalne joondus: päri; veeris: 5px 0 0 2px; polsterdus: 0px; fondi suurus: 0px; laius: 40px; kõrgus: 40px; taust: url("http://test ..png ") no-repeat scroll 0px 0px läbipaistev;) .share a.vkontakte ( taust: url("http://test..png ") no-repeat scroll -168px 0px läbipaistev; ) .share a.google ( taust: url("http://test..png ") no-repeat scroll -252px 0px läbipaistev; ) .share a.livejournal ( taust: url("http://test..png ") no-repeat kerige -336px 0px läbipaistev; ) .share a.twitter ( taust: url("http://test..png ") no-repeat scroll -42px 0px läbipaistev; ) .share a.mail ( taust: url("http ://test..png ") no-repeat scroll -294px 0px läbipaistev; ) .share a.odnoklassniki ( taust: url("http://test..png ") no-repeat scroll -126px 0px läbipaistev; ) .share a.pinterest ( taust: url("http://test..png ") no-repeat scroll -210px 0px läbipaistev; ) .share a.liveinternet ( taust: url("http://test..png ") kordumatu kerimine -378px 0px läbipaistev; ) .share a.evernote ( taust: url("http://test..png ") no-repeat scroll -420px 0px läbipaistev; ) .share a.bookmark ( taust: url("http://test.. png ") no-repeat scroll -462px 0px läbipaistev; ) .share a.email ( taust: url("http://test..png ") no-repeat scroll -504px 0px läbipaistev; ) .share a.print ( taust: url("http://test..png ") no-repeat scroll -546px 0px läbipaistev; ) .share a.digg ( taust: url("http://test..png ") no-repeat scroll -588px 0px läbipaistev; ) .share a.spring ( taust: url("http://test..png ") no-repeat scroll -630px 0px läbipaistev; )

Koodi selgitused:.share klass määrab ploki üldilme, iga nupu suuruse, polstri ja määrab ühtlase tausta. Ja siis on igal lingil oma klass ja igale sellisele lingile määratakse taustaomaduse kaudu nupu välimus. Nupud renderdatakse css-spriitena ning iga nupp on 40 pikslit lai ja 40 pikslit kõrge ning nende vahel on 2 pikslit polster, mis võimaldab teil iga nupu jaoks täpselt määratleda pildi. See tähendab, et esimene nupp on määratud kui 0 ja teine ​​kui 42 ja nii edasi. Koodis on need väärtused märgitud oranžiga. Spraidi link on samuti oranžiga esile tõstetud, muudate selle oma spraidi teeks.

See lõpetab kogu sotsiaalsete nuppude ploki loomise protsessi. Saate turvaliselt jätkata kontrollimist.

Ja mul on ka videoõpetus, milles on kogu protsess visuaalselt näidatud, pulk näitab nuppude enda tööd. Vaadake ja rakendage oma veebisaitidel ja ajaveebides.


Nüüd on kõik. Ta sai ülesandega hakkama. Soovin teile kõigile õnne ja näeme uutes artiklites ja videoõpetustes.

Kui märkate viga, valige tekstiosa ja vajutage Ctrl + Enter
JAGA:
Arvutid ja kaasaegsed vidinad