Blogger tips - Social media icons

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ářů! :)

CONVERSATION

32 komentářů:

Klára Odehnalová řekl(a)...

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 :)

Anonymní řekl(a)...

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

Muffin řekl(a)...

No určite to vyskúšam, ďakujem za radu. :)

Zuzana Stanko řekl(a)...

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

Strawberry_wíí řekl(a)...

Veľmi pekne ďakujéém ;) Ikonky sú nasvete :)

werushberry.blogspot.sk

Blueberry Pink řekl(a)...

Pěkné, povedly se ti :)

Denisa Solčanská řekl(a)...

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/

Jane řekl(a)...

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

Daniela P řekl(a)...

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/

Blueberry Pink řekl(a)...

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

Adéla Navrátilová řekl(a)...

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

Basha řekl(a)...

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 !!

Carmen řekl(a)...

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 :(

Blueberry Pink řekl(a)...

Mě to u mě funguje, jak má....

Carmen řekl(a)...

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

Blueberry Pink řekl(a)...

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

evey řekl(a)...

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

Agnieszka Kozlowska řekl(a)...

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?:)

Blueberry Pink řekl(a)...

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 ;)

Kami La řekl(a)...

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

The cake eater řekl(a)...

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

Hayley Rose řekl(a)...

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á!!!!!

Anonymní řekl(a)...

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

Anonymní řekl(a)...

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

Eli řekl(a)...

Děkuju moooc za pomoc! :)

Simi řekl(a)...

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

Simi řekl(a)...

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

Kendy's world řekl(a)...

Moc jsi mi pomohla, děkuji!! :)

Barbora řekl(a)...

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.

Makytka011 řekl(a)...

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

Heaven & Life řekl(a)...

Skvěle napsané, moc díky za SROZUMITELNOU radu!

Róza H. řekl(a)...

Moc děkuju za článek. Opravdu moc mi pomohl. Nedokážu si představit, že bych sama zvládla napsat ty adresy.

Back
to top