Blogování - Jak dát ikonky/loga do menu

Ahoj,

neustále mi chodí zprávy s dotazem, jak jsem dala do menu ikonky na FB, Goodreads atd. nebo loga nakladatelství. Takže jsem se konečně dokopala k tomu sepsat návod. Věřím, že existují jiné a chytřejší cesty, ale já hledala na všech stránkách, projela HTML, až jsem z toho konečně vyplodila něco, co funguje, takže proč se nepodělit :)

Co potřebujeme

Ikonky/loga

• Můžete si vytvořit vlastní nebo použít nějaké volně dostupné.
• Jestliže jste našli nějaké online, stačí zkopírovat jejich URL adresu (záleží na prohlížeči, většinou stačí kliknout pravým tlačítkem a dát zkopírovat adresu obrázku).
• Jestli jste si vytvořili svoje ikonky, musíte je nahrát někam na web (např. servery Nahraj obrázek, imageshack), tam následně také zkopírujete vygenerovanou adresu obrázku. U Nahraj obrázek to najdete pod Odkaz na obrázek/Přímý odkaz.

Kód
Tento kód budete vkládat do menu pod widget HTML
<div style="text-align: center"><a href="http://www.fragment.cz/"><img src="http://imageshack.us/a/img845/7431/fragmentlogo.jpg" alt="Nakladatelství Fragment" /></a></div>

Jak a proč

1. <div style="text-align: center"> tuto část kódu potřebujete k tomu, aby se Vám obrázek zarovnal na střed. Chcete-li obrázek zarovnat vpravo/vlevo stačí dát místo center slovo right/left
2. <a href=""> tato část kódu je odkaz na stránku, na kterou chcete odkazovat. Chcete-li tedy odkazovat ikonkou na stránky Fragmentu, půjdete na stránky Fragmentu a zkopírujete URL. Je důležité, aby tam bylo http://. URL pak vložíte mezi ".
   Výsledek tedy bude: <a href="http://www.fragment.cz/">
3. <img src="" alt="" /> A už se dostáváme k obrázku. Img jak asi většina odvodí znamená obrázek, čili zde musíme vložit odkaz na obrázek, který jste si buď zkopírovali z internetu nebo který jste si zkopírovali po nahrání na web. Vložíte opět mezi ".
   PŘ: nahrála jsem si logo Fragmentu na portál imageshack a zkopírovala adresu a vložím ji.
   Výsledek bude: <img src="http://imageshack.us/a/img845/7431/fragmentlogo.jpg" alt="" />
4. Teď už jen stačí napsat za alt název. Například Nakladatelství Fragment
   Výsledek bude: <img src="http://imageshack.us/a/img845/7431/fragmentlogo.jpg" alt="Nakladatelství Fragment" />
5. Změna velikosti obrázku:  někdy se stane, že je obrázek moc velký a nevejde se Vám do menu. Pak není třeba zoufat, i to jsem po svém vyřešila. Stačí jen přidat hodnoty width a height. Kód poté bude vypadat takto:
   <img src="http://imageshack.us/a/img845/7431/fragmentlogo.jpg" width="60%" height="60%" alt="Nakladatelství Fragment" />
   Za hodnoty width a heigt si můžete dosadit, co chcete, ale obě hodnoty se musí shodovat, jinak se Vám obrázek zdeformuje. V podstatě jen dáváte příkaz, kolik procent z obrázku se Vám zobrazí. Je to trošku metoda pokus-omyl, ale brzy budete mít správné poměry v oku :)
6. DŮLEŽITÉ: kdo se už někdy setkal s HTML ví, že většina příkazů jsou párové, to znamená, že se otevírají < a také se poté musí uzavřít pomocí >. Je tedy potřeba všechny příkazy uzavřít pomocí
   </a></div>