|
Cmkk testreszabsa
2018.11.30. 15:06
Taln az egyik legjobb G-portlos jts a cmkk bevezetse volt. Ezzel megknnytettk nagyon sok holnapszerkeszt munkjt, valamint a bloggerek is rmtncot jrtak.
Termszetesen lehetsgnk van kedvnk szerint formlni a cmkk kinzett, ezt fogom most megmutatni nektek.
Elszr is, a cmkket egy j blogbejegyzs ltrehozsval tudjuk hasznlni. Nem kell #, egyszeren begpeled a kulcsszt, s egy ,-t raksz utna.
Ahhoz, hogy megjelenjen, be kell illesztened egy kdot a sajt CSS kdodba.
.blogtags {
font-family: 'Kaushan Script', cursive; /BETTPUS/
font-size: 12px; /BET MAGASSGA/
font-weight: normal!important; /NE BNTSD/
font-style: normal !important; /NE BNTSD!/
text-align: right;
color: #2d2d2d; / CMKE felirat szne/
background-color: #ffffff; /CMKE felirat httere/
margin-bottom: 5px !important; /NE BNTSD!
}
.blogtags a {
font-family: 'Kaushan Script', cursive; /KULCSSZ BETTPUS/
font-size: 12px;
font-weight: normal;
font-style: normal;
color: #ffffff !important; /BET SZNE/
background-color: #9a5865 !important; /KULCSSZ HTTRSZNE/
padding: 2px;
text-transform: uppercase; /NAGYBET (ezt kitrlheted)/
margin: 3px;
}
Ebben a kdban lehetsged van belltani a cmke hasznlat alapjait, mindenhova odartam mire val. Ezeket a megjegyzseket felhasznls sorn trld ki, hogy hibtlanul mkdjn a kd!
Cmke felirat eltntetse:
Ha szeretnd eltntetni a cmke feliratot, teht a blogban csak a kulcsszavakat mutassa, hasznld a kvetkez kdot:
color: #FFF;
color: RGBA(0, 0, 0, 0.01)!IMPORTANT;
}
Ezt a .blogtags { utn kell beilleszteni.
Ezzel nem eltntetjk a CMKE feliratot, hanem lthatatlann tesszk (mivel ltalban fehr htteret hasznlunk egy modulnl, ezrt fehr sznt adunk neki).
 
(Kijells utn ltszik a felirat)
Egyb disztsi lehetsgek:
Lehetsgnk van egyb rsjeleket rakni egy-egy cmke kz. Ilyen pldul, ha kapcsos zrjellel adunk a kulcsszavaknak keretet.
Ezt megtehetjk gy, hogy minden egyes cmke be legyen keretezve:
.blogtags a:before { /*kis ikonok a tag-ek eltt */
color: #ffffff;
font-size: 15px;
content: '{ '; /* beszrjuk a nyit kapcsos zrjelet */
}
.blogtags a:after { /*kis ikonok a tag-ek utn */
color: #ffffff;
font-size: 15px;
content: ' }';/* beszrjuk a zr kapcsos zrjelet */
}
Valamint gy, hogy az sszes cmke legyen egy keret al vve: Ezzel annyi hibzsi lehetsgnk van, hogy ha lthatatlann tettk a cmkk feliratot, arnytalanul fog kinzni a keret (teht rdemes visszalltani).
.blogtags:before {
content: '{';
color:#e9e077!important;
font-size: 12pt!important;
}
.blogtags:after {
content: ' }';
color: #e9e077!important;
font-size: 12pt!important;
}
Font Awesome ikonok:
Lehetsgnk van a cmkkhez ikonokat adni, melyet adhatunk minden egyes cmke el, mg, vagy akr az sszes cmke el, s az sszes cmke mg.
.blogtags a:before { /*kis ikonok a tag-ek eltt */
font-family:FontAwesome;
color: black;
font-size: 15px;
content: '\f02b'; {icon kd helye, \ jel marad}
}
A Font Awesome Icons oldaln knnyedn tudunk vlogatni az ikonok kztt. Felhasznlsukhoz elg kimsolni a bet + szmjegybl ll kdot, s a kdban a kijellt helyre beilleszteni. Termszetesten bettpustl fgg, hogyan fog kinzni az ikonokkal val kiegszts.
Nhny plda:
Cmkk mshova helyezse:
Ha kicsit megszerkeszted a .blogtags rszt, knnyedn tudod mozgatni a cmkket. A mozgatst a "margin-left" s a "margin-top" rtkeinek trsval tudod megtenni. Ilyenkor a hozz rendelt blogbejegyzs-hez viszonyt. Az is szmt, hogy a bejegyzsben a cmkket fellre illetve alulra rendelted.
.blogtags {
color: #FFF;
font-size: 2px;
text-align: center;
margin-left: -156px !important; (elcssztats horizontlis)
margin-top: -50px !important; (elcssztats vertiklis)
line-height: 15px !important; (egy cmke magassga)
padding: 6px;
display: inline-block;
position: absolute;
width: 100px !important; (ez egy cmke szlessge)
Plda:
| 
AJÁNLOM AZ OLDALT
