7. 8. 2015

Blogger Tips | Social media icons




Hola! Vitajte pri ďalšom článku na blogu Dany Čuks. :) Tento raz som si pripravila článok pre blogerky a bude to ako už z názvu ste si mohli preložiť. Ako na ikonky sociálnych sietí. Ale nebude to taký ten klasický spôsob ako môžete nájsť na všetkých ostatných blogoch. Bude podobný, teda bude sa začínať rovnako ale plus sa dozviete ako si pomocou kódu zmeniť ich veľkosti, upraviť medzery medzi nimi, ako vytvoriť aby po prejdení myšou na ikonu zmenila farbu. Na internete nájdete množstvo ikoniek sociálnych sietí, stačí zadať do google "social media icons" a trošku sa v tom pohrabať. Netreba čakať, že ja všetko spravím za vás. Ale tu máte pár linkov, kde nájdete ikonky na sociálne siete: TU (obyčajné čierne okrúhle), TU (ružové okrúhle) a TU (sivé okrúhle). :) Alebo ak sa vám páčia ikonky, ktoré som vytvorila ja v mojich šablónach, môžete si stiahnúť aj tie.  

1.) Ak už máte stiahnuté ikonky v počítači, musíte ich vložiť na internet. Je množstvo stránok, kde si môžete vložiť svoje obrázky ako aj napríklad tinypic.com. Ale môžete to spraviť aj tuto v bloggeri. Akurát si musíte vytvoriť jeden nový príspevok, ktorý nebudete publikovať. Ja to mám takto tiež.

2.) Ďalším dôležitým krokom je ísť v Bloggeri na Rozloženie a Pridáte nový modul gadget. A teda pridáte HTML/Java Script. Do obsahu tohto gadgetu vložíte nasledujúci kód. Každý kód predstavuje jednu ikonku, takže ich vložíte toľkokrát, koľko ikoniek sociálnej siete potrebujete.

<a href="URL ADRESA" target="new"><img src="URL ADRESA OBRÁZKU"/></a>

červená farba predstavuje url adresu odkazu, kde chcete aby Vás po kliknutí na ikonku presmerovalo.
oranžová farba je, aby som vám ukázala, že v mojom návode sa vám všetky kliknutia otvoria v novom okne :D
žltá farba je url adresa obrázku, teda toto čo som vám ukazovala vyššie na obrázkoch :)

Ikonky sa vám zoradia od ľavého okraja, takže ak ich chcete mať v strede, na začiatku kódu dajte <center> a na konci kódu </center>. Nejako takto:

<center>
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
</center>

3.) Dáte uložiť a máte to na blogu :) Ale ikonky máte v klasickej veľkosti v akej sú v skutočnosti. Ak ich chcete mať menšie, pred celý kód vložte toto:
<div class="socialIcons"> 
a na konci to nezabudnite ukončiť </div>

čiže by to malo vyzerať nejako takto:

 <center>
<div class="socialIcons"> 
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
<a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>
</div>
</center>


Následne prejdite na Šablóna -> Prispôsobiť -> Rozšírené -> Pridať CSS a pridajte tam tento kód (pokiaľ tam už máte niečo napísané, len vynechajte jeden riadok a píšte):

.socialIcons img{
width: 20px;
height: 20px;
padding: 0 15px 0 15px;

Čo sa týka toho "padding" tak to vám vlastne zabezpečí vzdialenosti medzi jednotlivými ikonkami. Stačí sa s tým len pohrať a pomeniť hodnoty :). Width je šírka a Height je výška. 

Hotovo:)

Ale ak vám to ešte nestačí a chcete, aby sa po prejdení myšou cez ikonku zmenila jej farba, použite nasledujúci kód namiesto pôvodného <a href="URL ADRESAtarget="new"><img src="URL ADRESA OBRÁZKU"/></a>:

<a href="URL ADRESA ODKAZUtarget="new"><img onmouseout="this.src='URL-ORIG-OBRAZKU'" onmouseover="this.src='URL OBRAZKU PO PREJDENI MYSOU'" src="URL-ORIG-OBRAZKU"/></a>

žltou je adresa odkazu, na ktorý vás pri kliknutí presmeruje. 
oranžovou je originálny obrázok ktorý sa zobrazuje a červenou je obrázok, ktorý sa zobrazí pri prejdení myšou cez ikonku :)

Dúfam, že sa Vám návodík páči a potešíte ma odberom blogu alebo lajkom na facebooku :) 
Majte krásny dník a ja si idem užívať Prahu ^_^.


_______________________________________________________
Sledujte ma aj na: 
Facebooku  |  Instagrame  |  Tumblr  |  Bloglovin  |  G+
Ak máš nejaké otázky, opýtaj sa ma (môžeš aj anonymne):
ask.fm/danycuks
alebo email
danycuks@gmail.com

8 komentárov:

  1. Super :-) Určite to vyskúšam :-) Ďakujem za tip :-)

    OdpovedaťOdstrániť
  2. Poznám to (a ďakujem za pripomenutie, že ešte pred tým, než zajtra odídeme do Chorvátska, tak že som chcela dať dokopy moje ikonky v menu :D), ale je super, že si to takto podrobne a zrozumiteľne vysvetlila, určite to mnohým pomôže, lebo si pamätám, že keď som dávno ja hľadala nejaký návod, tak som mala pocit, že všetko je napísané po svahilsky :D
    beelievin.blogspot.com

    OdpovedaťOdstrániť
  3. super článok, pokúsim sa niečo od teba odkukať, ale ja som na tieto veci proste úplný idiot a všetky tie kódy ma desia :D btw, som nový follower, máš super blog :)

    www.beautiful-savage.blogspot.sk

    OdpovedaťOdstrániť
  4. ahoj:) jen jsem ti chtěla oznámit, že jsem tě novinovala do Tag liebster award.Snad ti to nevadí. Tag můžeš udělat, ale nemusíš :) http://impossiblyawkwardmaky.blogspot.cz/2015/08/tag-liebster-award.html

    OdpovedaťOdstrániť
    Odpovede
    1. Jeej ďakujem pekne ale takéto tagy nerobím :)

      Odstrániť
  5. Skvělá rada nad zlato, je dobre tohle umět ... Ja se s tim vždy trapim když třeba předělávat design. Díky moc :)

    OdpovedaťOdstrániť

Ďakujem za komentár a prajem krásny deň! :)