Blogger tips - Social media icons

by - 4.1.14

Chcete svůj blog zase posunout o trochu výš, dát mu určitý šmrnc a čtenářům možnost následovat vás prakticky kdekoli? Přidejte si ikonky sociálních médií! 


Pozorně čtěte, není to nijak složité, měl by to zvládnout i úplný HTML amatér. 

Veškerá kouzla se odehrávají v záložce Rozvržení.

Po kliknutí na Rozvržení se vám načte náhled panelů na blogu. Váš náhled se může lišit podle toho, jak máte blog uspořádaný. Pokračujte klikem na Přidat gadget.

Vyskočí vám nové okno, v kterém, když sjedete zhruba do poloviny, najdete HTML/JavaScript. Klikněte.


Okno se změní na dvě prázdné pole. Nadpis a Obsah. To, co napíšete do nadpisu, se pak zobrazí nad ikonky. Nemusíte tam však psát nic, půjde vám to uložit, aniž byste tam udělali i jen obyčejnou tečku.

V poli Obsah pak budete vytvářet kód. To je ta nejdůležitější pasáž. Podle toho, kolik chcete mít ikonek, tolik musíte vytvořit kódů. Jeden kód (černě vyznačený rámeček na obrázku níže) obsahuje odkaz stránky, na kterou se po kliknutí na ikonku přesměrujete, adresu obrázku, který bude znázorňovat danou ikonku a samozřejmě HTML nezbytnosti.


Už ale k samotnému vytvoření kódu. Nestrachujte se, není to složité, je to vesměs jen kopírování. Takto bude vypadat finální kód, který budete mít v poli:

<a href="https://www.facebook.com/blueberrypink01?ref=hl"><img src="http://imageshack.com/a/img22/4278/f7la.png" height="35" width="35" /></a>

Doporučuji si ho zkopírovat tolikrát, kolik máte ikonek a pak ho jen nahrazovat podle barevného návodu níže. A nyní ho jdeme rozebrat!

Černě jsou vyznačené HTML nezbytnosti, které musí kód mít, aby vám vše fungovalo, jak má. Červený je odkaz na stránku, na kterou se chcete po kliknutí přesunout. Tu stačí jen zkopírovat z internetového prohlížeče. Žluté jsou hodnoty šířky a výšky ikonky, které můžete měnit podle potřeby, podle toho, jak velké je chcete mít. Modrá je adresa obrázku, který se zobrazí jako ikonka. Jak získat adresu obrázku? To si povíme níže! :)

<a href="https://www.facebook.com/blueberrypink01?ref=hl"><img src="http://imageshack.com/a/img22/4278/f7la.png" height="35" width="35" /></a>

JAK ZÍSKAT OBRÁZEK A JEHO ADRESU?

Po zadání "social media icons" do vyhledávače Google vám vyběhne spoustu ikonek, které můžete použít. Můžete si vytvořit i své, pokud chcete nějaké speciální, mě však pro mou potřebu stačí ty stažené. Abyste získaly jejich adresu, potřebujete je mít nahrané na internetu jako obrázek. Některé to mají, už když je stahujete, já však doporučuji si je uložit do počítače a pak nahrát například na ImageShack, ať je máte pěkně pohromadě. 

Po přihlášení je nahrajete jednoduchým kliknutím na Browse a výběrem z vašeho počítače.


Najdete je pak po kliknutí na (my images) vpravo nahoře.


Při vytváření daného kódu si vyberte příslušící ikonku (pro vytvoření kódu pro Instagram si dejte pozor, ať vyberete ikonku, kterou pro něj máte určenou a ne například tu pro Facebook apod :) Kliknutím na ikonku "i" v kolečku po pravé straně obrázku se vám zobrazí informace, které potřebujete. Respektive adresy. Vyberte tu z políčka Direct, zkopírujte a vložte na místo modrého textu.

<a href="https://www.facebook.com/blueberrypink01?ref=hl"><img src="http://imageshack.com/a/img22/4278/f7la.png" height="35" width="35" /></a>


Pak už stačí v bloggeru jen obdobným způsobem vytvořit tolik kódů, kolik potřebujete a uložit. Pokud chcete do ikonek i odkaz na mail, musíte kód trochu upravit. Bude vypadat takto:

<a href="mailto:blueberrypink@seznam.cz"><img src="http://imageshack.com/a/img541/156/ehn6.png" height="35" width="35" /></a>

Trochu podrobněji: kód musí obsahovat odkaz na mail, který vytvoříte přidáním "mailto:" a doplněním mailu, na který chcete, aby vám čtenáři psali. Obrázek ikony je vložen stejně. Po kliknutí na ikonu se otevře Outlook a umožní vám napsat mail. 


A to je vše, zbývá jen uložit. Myslím, že je vše popsáno, tak aby to bylo pochopitelné, doufám, že vám to bude fungovat, pokud ne, budu ráda, když mi napíšete a věřím, že problém vyřešíme :) 

Přeji pěkné blogování a těším se na vaše vylepšené blogy, přidejte odkaz do komentářů! :)

You May Also Like

30 komentářů

  1. To vypadá dost dobře, asi si na to udělám čas, pořádně si vše prostuduji, jelikož jsem amatérský amatér a zkusím to :)

    OdpovědětVymazat
  2. Ještě, že tě mám.Na něco takového bych nikdy sama nepřišla.Pro mě je to doslova španělská vesnice tyhlety kody. :D

    OdpovědětVymazat
  3. No určite to vyskúšam, ďakujem za radu. :)

    OdpovědětVymazat
  4. Toto je pre mňa aktuálna téma. Včera som podrobila blog kompletnej rekonštrukcii a jediné čo mi ostáva, je vytvoriť ikonky pre sociálne siete. Tvoj návod mi prišiel práve vhod. Mnohokrát ďakujem! :-)

    S pozdravom Zuzana Stanko | www.sueandcolours.blogspot.sk

    OdpovědětVymazat
  5. Veľmi pekne ďakujéém ;) Ikonky sú nasvete :)

    werushberry.blogspot.sk

    OdpovědětVymazat
  6. Wow, tak to je ten nejpřehlednější návod jaký jsem kdy viděla ;o). Díky Ti, musím to pořádně prostudovat ;o)

    http://littlelivelady.blogspot.cz/

    OdpovědětVymazat
  7. Tak to je super! Děkuju moc, je to jednodušše napsaný i pro mě, absolutního antitalenta:)

    OdpovědětVymazat
  8. To s tim emailem mi pořád nejde :/ naskočí mi nová karta a ve vyhledávači je napsáno mailto: a muj email :D
    http://dawardrobes.blogspot.cz/

    OdpovědětVymazat
    Odpovědi
    1. A máš ten mail v uvozovkách? Odkontroluj si svůj kód podle toho mého na obrázku

      Vymazat
  9. Máš krásnej postup, ale já to stejně asi nikdy nepochopím :/ :D A tak, až se třeba někdy budu nudit a udělám si čas, tak to možná pochopím :D

    OdpovědětVymazat
  10. Toto je skvelé, to by mohol zvládnuť aj HTML amatér (= ja) , odkaz ukladám a keď nájdem tie správne ikonky určite využijem, ďakujem !!

    OdpovědětVymazat
  11. Ahojky :) Mě ten email nefunguje :( Kliknu a nic, a to samý mi to udělá tady u tebe, když kliknu na ikonku emailu... a to jsem kvůli tomu vypla adblock jestli to nedělá... tak už nevím :(

    OdpovědětVymazat
    Odpovědi
    1. Mě to u mě funguje, jak má....

      Vymazat
    2. Zajímavý :D Já kliknu a nic se neděje :D Asi bude problém někde v prohlížeči :D

      Vymazat
    3. Nemáš třeba zakázaný vyskakovací okna?

      Vymazat
  12. Super návod, moc za něj děkuji :)
    http://gathermoments.blogspot.com/

    OdpovědětVymazat
  13. Ahoj :) nějak mi to nejde :) všechno jsem udělala podle návodu, ale pořád to dělá to, co předtím, už na ně ani nejde klinkout a zobrazují se mi pod sebou:D co s tím?:)

    OdpovědětVymazat
    Odpovědi
    1. Zkontroluj si kód, jestli ti někde nechybí uvozovky nebo špičatá závorka, to bývá nejčastější chyba :) pod sebou je máš možná proto, že máš třeba úzký postranní panel a široké ikonky, zkus je zmenšit ;)

      Vymazat
  14. Opět supr návod Verčo, děkuji :) Ikonky jsou na světě, tedy u mě na blogu :)
    TWF Kami*

    OdpovědětVymazat
  15. Jako majitelka začínajícího blogu tvé rady moc oceňuji! Děkuji, děkuji a ještě jednou děkuji! :)

    OdpovědětVymazat
  16. Děkuji ti, díky tobě můžu začít opět blogovat, zkoušela jsem rady od jiné blogerky ale podle jejích rad mi to nešlo ale od tebe, jsi skvělá!!!!!

    OdpovědětVymazat
  17. Ďakujem, ďakujem, ďakujem. Úžasný, jednoducho vysvetlený návod. Vďaka Tebe som bližšie k ideálnemu designu :)

    OdpovědětVymazat
  18. Ďakujem, ďakujem, ďakujem. Úžasný, jednoducho vysvetlený návod. Vďaka Tebe som bližšie k ideálnemu designu :)

    OdpovědětVymazat
  19. MOC MOC děkuju, krásně a jednoduše vysvětlené <3

    OdpovědětVymazat
  20. MOC MOC děkuju, krásně a jednoduše vysvětlené <3

    OdpovědětVymazat
  21. Moc moc díky! Četla jsem víc návodů, a ani jeden nepochopila :) Až u tebe, bylo to fakt vysvětlený pro blbce (pro mě). Ale díky tobě už mám na blogu tři krásný ikonky :) Jdu koukat na další návody.

    OdpovědětVymazat
  22. paráda! :) moc děkuju za tenhle návod ani nevíš jak dlouho jsem tohle hledala :)

    OdpovědětVymazat

Děkuji za komentář, pokud mne chcete kontaktovat i jinak, zkuste blueberrypink@seznam.cz. Díky a přeji pěkný zbytek dne! :)

Čtenáři