Egy nagyon egyszerű, de nagyszerű kód amivel kiemelt helyre kerülhetnek az oldaladon használt social média linkjeid, stílusos, és mindig ott "lebeg" a felhasználó szeme előtt. Csak pillantsatok oldalra, ott is van :)
Lehet sokatoknak ismerősen hangzik az hogy Font Awesome, kis (vagy nagy) vektorgrafikus ikonok amiknek végtelen felhasználási módja van a webdesign terén. Most is ezeket az ikonokat hívjuk segítségül.
Ezt a kódot helyezd el az oldaladon egy egyszerű modulban/láblécben, ez hívja elő az ikonkészletet:
Nyugodtan böngéssz az alábbi galériában, elsősorban a free elemekkel barátkozz mert csak azokat tudjuk meghívni a link segítségével. Egy ikonra rákattintva láthatod hogy az alábbi módon rögtön meg is jeleníthetünk egyet:
A képen aláhúzott kódot kell használnunk ha magát az ikon szeretnénk megjeleníteni valahol.
A legfontosabb! A modul következő szerkesztésénél, ezek a behívott ikonok egyszerűen felszívódnak. Így fontos, ha megcsinálsz egy ilyen menüt, rakd el biztos helyre!
Hozzunk létre egy dobozt, és pakoljuk bele ezeket a kis ikonokat. Ezek a kis ikonok ugye linkelhetőek, tehát linkeljük csak be őket! (és most rakjuk el őket biztos helyre, komolyan, mentsd le magadnak valahová egy text file-ba mert nagyon tud fájni ha újra kell csinálni). A kódunk most is néz ki:
Persze a sort még bővítheted, csak figyelj oda hogy a CSS kódban is definiáld a különböző elemeket. Ha más közösségi felületre van szükséged a Font Awesome galériájában 99% hogy találsz hozzá megfelelő ikont is!
Most jön a varázslat része vagyis a CSS kód ami összetartja az egész rendszert!
<style type="text/css">
/* A fix ikonbár elhelyezése*/
.icon-bar {
position: fixed; /*fix, görgetésre a helyén marad */
/* Ennél a résznél érdemes azokat a link formázásokat és dőlt formázásokat "visszaállítani" amiket alapból felírtál, pl: aláhúzás, háttérszín keret stb. */
}
/* Az ikonbár linkjei ha ráviszed az egeret */
.icon-bar a:hover {
background-color: #000;
}
.facebook {background: #3B5998;}
.twitter {background: #55ACEE;}
.instagram {background: #dd4b39;}
.deviantart {background: green;}
.youtube {background: #bb0000;}
</style>
.icon-bar jelöli azt a nagy dobozt amibe beleraktuk a kis linkelt ikonjainkat, ezzel 3 fontos dolgot csinálunk, lefixáljuk, elforgatjuk, és bepozicionáljuk. Ezeket feliratoztam is a kódban. .icon-bar a pedig a linkek kinézete, tehát ide jöhet minden olyan formázás ami az összes kis ikonra érvényes lesz, méret padding esetleg keret, szín, és amit még gondoltok.
Ami még fontos lehet, ennél a kis kódnál sokat ronthatnak olyan részletek ami egy link formázásnál amúgy nagyon jól van (gondolok itt pl az aláhúzásra), és mivel az univerzális linkformázás az oldalon található összes linkre érvényes, így ennél a résznél érdemes felülírni a zavaró tényezőket.
Megfigyelhető hogy maguk az ikonok egy <i> tag-ek, így ha a dőlt betűket i-ként kódoltad be ezt is felül kell írni (ugye gportál alapértelmezett dőltje, <em></em> tagok közt van).
.icon-bar a:hover pedig az amikor ráviszed a kis ikonra az egeret.
A kódban található többi osztály, ha megfigyelitek akkor a HTML-ben megalkotott kis ikonok becenevei, és itt adunk nekik olyan tulajdonságokat amik eltérőek, itt most a háttérszínük az ami nem egyezik, de számos más tulajdonságot is felírhattok.
A kód természetesen nem saját, de igyekeztünk kielégítő leírást mellékelni hozzá és kiemelni a Gportál specifikus részleteket! A kód forrása
Bár a cím az bizonyos mértékben árulkodó lehet, de azért leírom: Az oldal első sorban a bloggereket segíti, és főleg a Gportálos bloggereknek nyújt technikai segítségeket. Persze reméljük, hogy más szolgáltatókon tevékenykedő bloggerek is találnak maguknak elég csemegézni valót. Amikről szó lesz a továbbiakban, az ajánlók, interjúk, leírások, inspirációs bejegyzések, olykor sablonok és kritikák is.
Egy útmutató kezdő bloggereknek, akik főleg a Gportál keretein belül szeretnének blogolni. Különböző témákat, egy-egy kérdés keretein belül tisztázunk, itt főleg a Gportál működéséről, és a legfőbb dolgokról lesz szó, egy új blog beindítása terén.
Ha szeretnél valamilyen formában nyomot hagyni az oldalon, akkor nagyon jó helyen jársz! Segítségért is nyugodtan gyertek hozzánk! Egyedül cserekérést nem áll módunkban elfogadni, ugyanis nincs lehetőség cserére az oldallal.
AJÁNLOM AZ OLDALT
Súgó
Új hozzászólás
Frissítés
Friss bejegyzések
Friss hozzászólások
Archívum