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

32 komentářů

Čtenáři