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.
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č
- <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
- <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/"> - <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="" /> - 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" /> - 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 :) - 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>
26 komentářů
Write komentářů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! :)
ReplyDÍ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
ReplyBaju super návod ! :)
ReplyJasný, 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í :)
ReplyNení 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á :)
ReplyDěkuji, já se bála, že nikdo nepochopí mé myšlenky :)
ReplyDí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 :)
ReplySuper návod! :)
ReplyŠ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.)
ReplyJinak teda jsi to napsala moc krásně a pečlivě, klobouk dolů, jsi moc hodná!
ReplySuper! Moc děkuji za návod :D Sice jsme to na škole dělali, ale nic si už nepamatuju :D :-)
ReplyNo ty znaky jsou složité, ale jenom se to zdá, brzy to budeš mít v malíku :)
ReplyJo 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 :)
ReplyNení zač! :)
ReplySkvele, 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 :)))
ReplyParáda ! :) Já se v tom patlal půlhodiny a teď uděláš takovej super návod :-) Hodně lidím to určitě pomůže :)
ReplyDost dobře vysvětlené..já většinou zkouším,..takové to, pokus omyl..:D
ReplyTvů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.
Děkuji, já se taky bála, že to vysvětlím tak, že to nikdo nepochopí :D
ReplyNení zač, hlavně, když pomůže :)
ReplyJá se v tom patlala x dní tenkrát, než jsem to pořešila :)
ReplyVšak to tak taky bylo, než jsem to takhle pořešila pěkně :) Děkuji, nemám žádnou reklamaci :)
ReplyDěkuju moc!!! :) Konečně mám taky v menu obrázek knížky co čtu! Skvělý návod :) :)
ReplyNebý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 ;)
ReplyJá Tě miluju :-) díííky
ReplyNení zač :)
ReplyAhoj, 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ý.
ReplyDěkuji za všechny komentáře :)