Návod na fixní sloupec
Publikováno 12.06.2016 v 19:16 v kategorii Unzařaditelnous, přečteno: 300x
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>.
Změny uložíme a pustíme se do vytvoření objektu, tentokrát v políčku Vlastní postranní panel.
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
YouTube
Geocaching
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ě.
LinkedIn
DeviantArt
Instagram
BandZone
Twitter
Fler
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).
E-mail
Písmena abc je nutné nahradit za Vaši e-mailovou adresu.
Skype
Písmena abc je nutné nahradit za Váš Skype identifikátor . Ikonka samozřejmě nebude fungovat tam, kde není Skype nainstalovaný.
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.
Komentáře
Po kliknutí se čtenář ocitne u formuláře k psaní komentářů (je-li k dispozici).
A nakonec stačí ukončit právě plněný objekt:
Po uložení změn by na Vašem blogu měl být podobný fixní panel, jako můžete vidět tady.
<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áš).
<a href="abc" target="_blank"><img border="0" src="http://panickov.chytrak.cz/blogdesign/iko_facebook.png" title="Profil na Facebooku"></a><br>YouTube
<a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_youtube.png" title="Profil na YouTube"></a><br>Geocaching
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><a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_linkedin.png" title="Profil na LinkedInu"></a><br>DeviantArt
<a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_deviantart.png" title="Profil na DeviantArt.com"></a><br><a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_instagram.png" title="Profil na Instagramu"></a><br>BandZone
<a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_bandzone.png" title="Profil na BandZone"></a><br><a href="abc"
target="_blank"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_twitter.png" title="Profil na Twitteru"></a><br>Fler
<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).
<a href="tel:abc"><img border="0"
src="http://panickov.chytrak.cz/blogdesign/iko_telefon.png" title="Telefon"></a><br>Písmena abc je nutné nahradit za Vaši e-mailovou adresu.
<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ý.
<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.
<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).
<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ářů