Cikkajánló
  Ezzel a kóddal például az oldalsávban megtudod jeleníteni a legnépszerűbb bejegyzéseidet. Persze ez a kód nem látogatottság alapján szűri ki a népszerű bejegyzéseket, hanem hozzászólás alapján. A cikk,
Egyből az előnézeti képpel kezdek, hogy értsétek miről is van szó. Az a lényeg, hogy ezekkel a kódokkal azt lehet elérni a főoldalon, hogy ugyanúgy egymás alatt jelennek meg
Elkészültek kérésre a leírások. Egy kérés volt igazából a Sosugary Coppermine galériához, de ebből kifolyólag eszembe jutott még kettő hasznos leírás, így azokat is megcsináltam. :) Amit kértetek leírás,
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Bővebben link átnevezése + ikon elé

A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom, hogy teljesen összeér az ikon és a link és az úgy annyira nem szép. Itt egy kép, mire gondolok:

 

 

Szóval ezen lehet a CSS kódban segíteni. Hogy ne érjen így össze az ikon és a link. Biztosan több módja van, de nekem az alábbi vált be a legjobban. Ez a kód a teljes kódot tartalmazza. Az átnevezést és az ikont is a link előtt. A kódban kiemeltem azt a részt, amivel a szünetet tettem a link és az ikon közé. Simán csak a content résznél több perjelet tettem a kódba: content:”\f090 \ \ \Teljes hír”;

 

Plusz ugyanennél a résznél azt is be tudjátok állítani, hogy a linknek milyen legyen a betűtípusa. Itt akkor most kettő nevet kell adni. Az egyik a FontAwesome betűtípus, a másik meg pl. Arial. Így az ikon felveszi a FontAwesome betűtípust, míg a link pedig az Arialt: font-family: Arial, FontAwesome;

 

 

/* bővebben */
.blogmorelink {
background: #006A90 !important;
border: 0px;
padding: 10px 0 10px 0 !important;
margin-top: 12px !important;
text-align: center !important;
margin-left: 280px !important;
margin-right: 280px !important;
}
.blogmorelink a:link, .blogmorelink a:visited {
color: #ffffff !important;
font-weight: normal;
font-style: normal !important;
font-size: 13px !important;
font-family: Calibri;
background: transparent !important;
}
.blogmorelink a {
visibility: hidden;
}
.blogmorelink a:before {
content:"\f090 \ \ \Teljes hír";
font-family: 'Merriweather', serif, FontAwesome;
font-size: 12px !important;
margin-left: 60px !important;
white-space: pre;
visibility: visible;
}
.blogmorelink a:hover {
text-decoration: underline;
}

lindadesign Hozzászólások
329 megtekintés

Hozzászólások