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

14:31:00 27 Comments A+ a-

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ázekimageshack), 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>

Výsledný kód tedy bude vypadat

<div style="text-align: center"><a href="http://www.fragment.cz/"><img src="http://imageshack.us/a/img845/7431/fragmentlogo.jpg" width="60%" height="60%" alt="Nakladatelství Fragment" /></a></div>

27 komentářů

Write komentářů
středa, července 30, 2014 delete

Je to super návod. My dělali HTML už na základce, takže jsem s tímhle moc problémy neměla, ale já třeba vkládám obrázky trochu jinak, ale každý má svůj styl. :) Ale pro ty kdo to neumí, myslím, že to bude super! :)

Reply
avatar
středa, července 30, 2014 delete

DÍKY, DÍKY, DÍKY .... V tomhle já absolutně plavu, takže jsi mi zachránila zadek :) Konečně to bude vypadat tak, jak chci já a ne jak chce blogger :D

Reply
avatar
Bastera
AUTHOR
středa, července 30, 2014 delete

Jasný, on určitě existuje nějaký super jednoduchý, ale já jsem na to nikde nenarazila, tak jsem si to vytvořila svépomocí, někdo to určitě využije, když se mě pořád ptají :)

Reply
avatar
Bastera
AUTHOR
středa, července 30, 2014 delete

Není zač, hlavně, když se to hodí :) Sama vím, jak jsem byla naštvaná, když jsem to všude hledala a nebyla z toho vůbec moudrá :)

Reply
avatar
Bastera
AUTHOR
středa, července 30, 2014 delete

Děkuji, já se bála, že nikdo nepochopí mé myšlenky :)

Reply
avatar
středa, července 30, 2014 delete

Díky ti, dobrá ženo! :D Keď nebudem mať vďaka viróze pocit, že mám namiesto očí vajíčka natvrdo, tak to hneď vyskúšam. Teraz som celá zmätená zo všetkých tých znakov, ale ono to pôjde :) Inak si to vysvetlila krásne a zrozumiteľne, dokonca aj pre mňa ako totálny antitalent :)

Reply
avatar
Jana CM
AUTHOR
středa, července 30, 2014 delete

Šmarja, možná to nechápu, ale v bloggeru je přímo aplikace "přidat obrázek", nebo to není ono? (Já teda nejsem ten typ, který by měl trpělivost dělat něco s designem, bohužel.)

Reply
avatar
Jana CM
AUTHOR
středa, července 30, 2014 delete

Jinak teda jsi to napsala moc krásně a pečlivě, klobouk dolů, jsi moc hodná!

Reply
avatar
středa, července 30, 2014 delete

Super! Moc děkuji za návod :D Sice jsme to na škole dělali, ale nic si už nepamatuju :D :-)

Reply
avatar
Bastera
AUTHOR
středa, července 30, 2014 delete

No ty znaky jsou složité, ale jenom se to zdá, brzy to budeš mít v malíku :)

Reply
avatar
Bastera
AUTHOR
středa, července 30, 2014 delete

Jo jo je, ale dáš tam jen jeden ne víc najednou a kdysi nešel dát k němu ani odkaz, možná je to teď jinak, ale předtím to šlo jen takhle :)

Reply
avatar
čtvrtek, července 31, 2014 delete

Skvele, diky za navod! Uz jsem nasla jinde neco podobneho, jak na to, ale mela jsem problem s tou velikosti, ted si to budu moct doresit :)))

Reply
avatar
Andy Zaphir
AUTHOR
čtvrtek, července 31, 2014 delete

Paráda ! :) Já se v tom patlal půlhodiny a teď uděláš takovej super návod :-) Hodně lidím to určitě pomůže :)

Reply
avatar
Cathy
AUTHOR
čtvrtek, července 31, 2014 delete

Dost dobře vysvětlené..já většinou zkouším,..takové to, pokus omyl..:D

Tvůj blog byl přidán do nové tabulky obsahující knižní blogy a weby. Pokud máš nějaké otázky či reklamaci, tak se ozvy. Jakékoli změny prosím hlas.

Reply
avatar
Eskandriel
AUTHOR
pondělí, srpna 04, 2014 delete

Víc takových návodů, je po nich sháňka!:) Já neumím vysvětlovat, ale podle tvého návodu bych to pochopila, jsi šikula! :)

Reply
avatar
Bastera
AUTHOR
pondělí, srpna 04, 2014 delete

Děkuji, já se taky bála, že to vysvětlím tak, že to nikdo nepochopí :D

Reply
avatar
Bastera
AUTHOR
pondělí, srpna 04, 2014 delete

Není zač, hlavně, když pomůže :)

Reply
avatar
Bastera
AUTHOR
pondělí, srpna 04, 2014 delete

Já se v tom patlala x dní tenkrát, než jsem to pořešila :)

Reply
avatar
Bastera
AUTHOR
pondělí, srpna 04, 2014 delete

Však to tak taky bylo, než jsem to takhle pořešila pěkně :) Děkuji, nemám žádnou reklamaci :)

Reply
avatar
Melinda
AUTHOR
sobota, srpna 09, 2014 delete

Děkuju moc!!! :) Konečně mám taky v menu obrázek knížky co čtu! Skvělý návod :) :)

Reply
avatar
pondělí, ledna 12, 2015 delete

Nebýt Tebe, tak nemám vůbec páru! HTML je pro mě vietnamská vesnice ( tu španělskou bych možná ještě zvládla :D). Děkuju moc ;)

Reply
avatar
Gabriela K.
AUTHOR
sobota, dubna 02, 2016 delete

Já Tě miluju :-) díííky

Reply
avatar
Cherrybumbum
AUTHOR
čtvrtek, června 09, 2016 delete

Ahoj, moc děkuji za super návod. Jelikož momentálně dávám dohromady nový blog, s Blogspotem absolutně neumím, tak se mi každý takový šikovný návod hodí. :) Škoda, že jich nemáš mnohem více, ale za tento ještě jednou moc děkuji, je skutečně skvělý.

Reply
avatar

Děkuji za všechny komentáře :)