|
Címkék testreszabása
2018.11.30. 15:06
Talán az egyik legjobb G-portálos újítás a címkék bevezetése volt. Ezzel megkönnyítették nagyon sok holnapszerkesztő munkáját, valamint a bloggerek is örömtáncot jártak.
Természetesen lehetőségünk van kedvünk szerint formálni a címkék kinézetét, ezt fogom most megmutatni nektek.
Először is, a címkéket egy új blogbejegyzés létrehozásával tudjuk használni. Nem kell #, egyszerűen begépeled a kulcsszót, és egy ,-t raksz utána.
Ahhoz, hogy megjelenjen, be kell illesztened egy kódot a saját CSS kódodba.
.blogtags {
font-family: 'Kaushan Script', cursive; /BETŰTÍPUS/
font-size: 12px; /BETŰ MAGASSÁGA/
font-weight: normal!important; /NE BÁNTSD/
font-style: normal !important; /NE BÁNTSD!/
text-align: right;
color: #2d2d2d; / CÍMKE felirat színe/
background-color: #ffffff; /CÍMKE felirat háttere/
margin-bottom: 5px !important; /NE BÁNTSD!
}
.blogtags a {
font-family: 'Kaushan Script', cursive; /KULCSSZÓ BETŰTÍPUS/
font-size: 12px;
font-weight: normal;
font-style: normal;
color: #ffffff !important; /BETŰ SZÍNE/
background-color: #9a5865 !important; /KULCSSZÓ HÁTTÉRSZÍNE/
padding: 2px;
text-transform: uppercase; /NAGYBETŰ (ezt kitörölheted)/
margin: 3px;
}
Ebben a kódban lehetőséged van beállítani a címke használat alapjait, mindenhova odaírtam mire való. Ezeket a megjegyzéseket felhasználás során töröld ki, hogy hibátlanul működjön a kód!
Címke felirat eltűntetése:
Ha szeretnéd eltűntetni a címke feliratot, tehát a blogban csak a kulcsszavakat mutassa, használd a következő kódot:
color: #FFF;
color: RGBA(0, 0, 0, 0.01)!IMPORTANT;
}
Ezt a .blogtags { után kell beilleszteni.
Ezzel nem eltűntetjük a CÍMKE feliratot, hanem láthatatlanná tesszük (mivel általában fehér hátteret használunk egy modulnál, ezért fehér színt adunk neki).
 
(Kijelölés után látszik a felirat)
Egyéb diszítési lehetőségek:
Lehetőségünk van egyéb írásjeleket rakni egy-egy címke közé. Ilyen például, ha kapcsos zárójellel adunk a kulcsszavaknak keretet.
Ezt megtehetjük úgy, hogy minden egyes címke be legyen keretezve:
.blogtags a:before { /*kis ikonok a tag-ek előtt */
color: #ffffff;
font-size: 15px;
content: '{ '; /* beszúrjuk a nyitó kapcsos zárójelet */
}
.blogtags a:after { /*kis ikonok a tag-ek után */
color: #ffffff;
font-size: 15px;
content: ' }';/* beszúrjuk a záró kapcsos zárójelet */
}
Valamint úgy, hogy az összes címke legyen egy keret alá véve: Ezzel annyi hibázási lehetőségünk van, hogy ha láthatatlanná tettük a címkék feliratot, aránytalanul fog kinézni a keret (tehát érdemes visszaállítani).
.blogtags:before {
content: '{';
color:#e9e077!important;
font-size: 12pt!important;
}
.blogtags:after {
content: ' }';
color: #e9e077!important;
font-size: 12pt!important;
}
Font Awesome ikonok:
Lehetőségünk van a címkékhez ikonokat adni, melyet adhatunk minden egyes címke elé, mögé, vagy akár az összes címke elé, és az összes címke mögé.
.blogtags a:before { /*kis ikonok a tag-ek előtt */
font-family:FontAwesome;
color: black;
font-size: 15px;
content: '\f02b'; {icon kód helye, \ jel marad}
}
A Font Awesome Icons oldalán könnyedén tudunk válogatni az ikonok között. Felhasználásukhoz elég kimásolni a betű + számjegyből álló kódot, és a kódban a kijelölt helyre beilleszteni. Természetesten betűtípustól függ, hogyan fog kinézni az ikonokkal való kiegészítés.
Néhány példa:
Címkék máshova helyezése:
Ha kicsit megszerkeszted a .blogtags részt, könnyedén tudod mozgatni a címkéket. A mozgatást a "margin-left" és a "margin-top" értékeinek átírásával tudod megtenni. Ilyenkor a hozzá rendelt blogbejegyzés-hez viszonyít. Az is számít, hogy a bejegyzésben a címkéket felülre illetve alulra rendelted.
.blogtags {
color: #FFF;
font-size: 2px;
text-align: center;
margin-left: -156px !important; (elcsúsztatás horizontális)
margin-top: -50px !important; (elcsúsztatás vertikális)
line-height: 15px !important; (egy címke magassága)
padding: 6px;
display: inline-block;
position: absolute;
width: 100px !important; (ez egy címke szélessége)
Példa:
| 
AJÁNLOM AZ OLDALT
