A kiemelt kép segítségével még egyedibbé és szebbé tehetitek a legújabb bejegyzéseket. Ezeket inkább rajongói oldalakon szokták használni, de szerintem blogon is épp olyan jól mutat.:)

Használata rendkívül egyszerű:

• Elsőnek ki kell választanod egy képet, és azt méretre vágni. A kiemelt kép magasságát Te határozod meg a kódban (jelenleg 280 px), a szélességénél pedig a kód alapjáraton levágja a felesleget, viszont érdemes arányában jól vágni a képet. Ez függ a középső modul szélességétől, a hagyni kívánt kerettől. (Én a blogon a 280px magas és 600px széles képeket szoktam használni.)
• Mikor az új bejegyzésed írod, megjelenik a címkék megadásánál egy Kiemelt kép: szekció, ahová az általad kivágott kép URL címét kell beilleszteni - fel kell tölteni egy tárhelyre.

• Fontos, hogy a kód a kiemelt képet a bejegyzés címének háttereként tekinti, és a kép magassága fogja "eltolni" a címet a következő bejegyzés címkéitől és a dátumtól. Tehát, ha mondjuk egy bejegyzéshez nem teszel képet, könnyen összemosódik a cím egy következő bejegyzéssel. Ilyenkor érdemes lehet egy sima, átlátszó hátteret berakni, hogy legalább az eltolás meglegyen.
• Szintén fontos, hogy a megjelenés akkor fog megfelelően működni, ha a blogmodulban a címkék és a dátum is alulra van állítva!

A CSS kódunkban mindössze néhány részt kell beilleszteni és kipótolni. A blogmodul résznél a következő értékeket kell beírni:

table[module_id*="36699959"] <- ide a saját blogmodulod URL címének végén található számsor jön

.modtitle {

    display: none;

}

table[module_id*="36699959"]<- ide a saját blogmodulod URL címének végén található számsor jön

.modtitle {

.modbody {

    background: transparent !important;

    position: relative;

    top: 0px;

    border: 0px !important;

}

table[module_id*="36699959"]<- ide a saját blogmodulod URL címének végén található számsor jön

.modtitle {

.modbottom {

    background: transparent!important;

    display: none!important;

    margin-bottom: 0px;

    padding-left: 0px;

}

div[id*="post_"] h2, div[id*="post_"] h2:hover {  /*  blog címének kinézete */

    font-family: 'Playfair Display', serif;

    color: #7d988e;

    background: #ffffff;

    font-size: 15px !important;

    text-align: center !important;

    font-weight: normal !important;

    font-style: normal !important;

    text-transform: uppercase;

    letter-spacing: 1px;

    width: 560px; <- bejegyzés címének szélessége

    padding: 10px 0 10px 0; <- keret felül és alul

    margin: 0px auto !important;

    margin-top: -50px !important;

    margin-bottom: 30px !important; <- a kép eljától számított                      eltolás

}

 

/* kiemelt kép = //framework.gportal.hu */

.featuredImage {

    height: 280px; <- kép magassága

    background-size: cover;

}

A láblécbe a következő scriptet kell beilleszteni:

<script title="Kiemelt kép" src="/portal/framework/upload/766182_1466600166_02284.js" charset="UTF-8"></script>