Tiskar94 oznamuje...Tiskařův geoblog

Návod na fixní sloupec

Publikováno 12.06.2016 v 19:16 v kategorii Unzařaditelnous, přečteno: 203x

S tímto návodem si můžete na svůj blog přidat fixní panel s odkazy na různé profily, kontaktem na vás či navigací.
Po předchozím článku o změně vzhledu webu jsem ještě udělal jednu úpravu. Totiž, blogy na tomto systému nemají žádnou profilovou stránku. A když jsem u Booklet vyplňoval jeden dotazník a všiml si jaký fixní panel má Survio, rozhodl jsem se na svém blogu udělat něco podobného. A jelikož se to třeba bude někomu líbit, dávám sem i návod. Pokud budete postupovat odshora dolů, není na tom snad co zkazit.

Jako první začneme tím, že si nastylujeme objekt s názvem idecko. Tento kód vložíme do políčka Vlastní data v sekci <head>.
<style type="text/css">
#idecko {position: fixed;}
#idecko {position: "absolute";}
#idecko {top: 20%; right: 0px}
</style>

Změny uložíme a pustíme se do vytvoření objektu, tentokrát v políčku Vlastní postranní panel.
<div id="idecko" align="right">
A následuje výběr ikonek. Vyberte si pokud možno pouze ikonky těch webů, které aktivně využíváte. Jak jich bude víc než sedm, pravděpodobně budou poslední ikonky schované kdesi dole a nikdo je neuvidí. Ikonky na výběr jsou rozděleny do tří kategorií:
Ikonky odkazové
Odkazové ikonky někam odkazují, na vaše profily. Písmena abc je nutné nahradit za adresu Vašich profilů. Ujistěte se, že do kódu vložíte odkaz s nějakým Vaším konkrétním identifikátorem (například my přihlášení vidíme náš geocachingový profil na adresách http://www.geocaching.com/profile/ i http://www.geocaching.com/profile/?u=KRON+family, avšak jiný uživatel uvidí na prvním odkazu svůj profil a pouze na druhém odkazu profil náš).
Facebook
http://panickov.chytrak.cz/blogdesign/iko_facebook.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_facebook.png" title="Profil na Facebooku"></a><br>
YouTube
http://panickov.chytrak.cz/blogdesign/iko_youtube.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_youtube.png" title="Profil na YouTube"></a><br>
Geocaching
http://panickov.chytrak.cz/blogdesign/iko_geocaching.png
V kódu je taktéž xyz, což má být adresa Vašeho statbaru, který se zobrazí při najetí na ikonku. Adresu Vašeho statbaru můžete získat na geocaching.com, nebo si můžete vygenerovat vlastní statusbar na Vypatlátoru. Pokud o zobrazení statusbaru nestojíte, jednoduše z kódu odmažte část od onmouseover po iko_geocaching.png'" včetně. 
<a href="abc" target="_blank"><img name="statusbar" src="http://panickov.chytrak.cz/blogdesign/iko_geocaching.png" onmouseover="document.images['statusbar'].src='xyz'" onmouseout="document.images['statusbar'].src='http://panickov.chytrak.cz/blogdesign/iko_geocaching.png'" border="0" title="Profil na Geocaching.com"></a><br>
LinkedIn
http://panickov.chytrak.cz/blogdesign/iko_linkedin.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_linkedin.png" title="Profil na LinkedInu"></a><br>
DeviantArt
http://panickov.chytrak.cz/blogdesign/iko_deviantart.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_deviantart.png" title="Profil na DeviantArt.com"></a><br>
Instagram
http://panickov.chytrak.cz/blogdesign/iko_instagram.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_instagram.png" title="Profil na Instagramu"></a><br>
BandZone
http://panickov.chytrak.cz/blogdesign/iko_bandzone.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_bandzone.png" title="Profil na BandZone"></a><br>
Twitter
http://panickov.chytrak.cz/blogdesign/iko_twitter.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_twitter.png" title="Profil na Twitteru"></a><br>
Fler
http://panickov.chytrak.cz/blogdesign/iko_fler.png
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_fler.png" title="Profil na Fleru"></a><br>
Ikonky kontaktní
Tyto ikonky jsou k tomu, aby Vás skrz ně mohli čtenáři kontaktovat. Nikam neodkazují, nýbrž s sebou nesou přímo nějakou informaci, jako například Váš e-mail. Na výběr je z těchto ikonek:
Telefon
Písmena abc je nutné nahradit za Vaše telefonní číslo. Ikonka samozřejmě nefunguje všude - na Andoidu se po kliknutí na ikonku spustí aplikace pro volání, BlackBerry vytočí uvedené telefonní číslo, zatímco Firefox na počítači jen napíše že protokol není asociován s žádným programem (jinými slovy že ve Vašem počítači nemáte nic z čeho byste mohli volat).
http://panickov.chytrak.cz/blogdesign/iko_telefon.png
<a href="tel:abc"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_telefon.png" title="Telefon"></a><br>
E-mail
Písmena abc je nutné nahradit za Vaši e-mailovou adresu.
http://panickov.chytrak.cz/blogdesign/iko_email.png
<a href="mailto:abc"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_email.png" title="E-mail"></a><br>
Skype
Písmena abc je nutné nahradit za Váš Skype identifikátor . Ikonka samozřejmě nebude fungovat tam, kde není Skype nainstalovaný.
http://panickov.chytrak.cz/blogdesign/iko_skype.png
<a href="skype:abc"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_skype.png" title="Skype"></a><br>
Ikonky navigační
Následující ikonky slouží pouze k navigaci po stránce. Není v nich potřeba nic upravovat. 
Nahoru
Po kliknutí se čtenář ocitne na vršku stránky.
http://panickov.chytrak.cz/blogdesign/iko_sipka.png
<a href="#"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_sipka.png" title="Nahoru"></a><br>
Komentáře
Po kliknutí se čtenář ocitne u formuláře k psaní komentářů (je-li k dispozici).
http://panickov.chytrak.cz/blogdesign/iko_komentare.png
<a href="#komentare"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_komentare.png" title="Komentáře"></a><br>
A nakonec stačí ukončit právě plněný objekt:
</div>
Po uložení změn by na Vašem blogu měl být podobný fixní panel, jako můžete vidět tady.

Komentáře

Celkem 0 komentářů

  • Neregistrovaný uživatel

    Jméno: Přihlásit se

    Blog:

    Obsah zprávy*:

    Kontrolní kód*:
    Odpovězte na otázku: Co je dnes za den?