Blogger Tutorial | Idézetek

Aki Bloggert használ, az tudja, hogy ha idézni szeretnénk, akkor a kis idézőjelre kell kattintani. Ilyenkor a szöveget egy kicsit beljebb viszi, s tesz egy sorközt a rendes szöveg és az idézett szöveg közé és ennyi, ezzel el van intézve. Gondolom már ismertek annyira, hogy én ezzel sem voltam megelégedve :D A Google most is jó barátom volt, találtam néhány oldalt, ahol szép formátumokat találunk az idézetek kiemelésére. Már csak olyat kellett találnom, ami nekem tetszik és a bloghoz is illik :) Nem egy nagy ördöngősség ez sem, ha megtaláltuk a nekünk tetszőt, és ami a blogunkhoz illik, csak egy apró kódot kell beillesztenünk a sablonunkba. 

Az enyémet itt találtam. Ha esetleg ezek nem felelnek meg valakinek, a Google-ba írja be, hogy "blockquote" vagy "pullquote" keresőszavakat és bogarásszon :)

Kód beillesztése

Az alapkódunk - ami az enyém is- a következő:

blockquote {

    border-top: 1px solid #ccc;

    border-bottom: 1px solid #ccc;

    color: #a5a4a4;

    font-style: italic;

    margin: 30px;

    padding: 30px;    

    text-align: center; 

}  

Ezt a kódot a blog HTML-kód szerkesztőjébe (Tervező - Sablon - HTML-kód szerkesztő), a ]]></b:skin> elé kell beilleszteni (a képen lilával jelöltem ki a helyét), majd elmenteni a sablont. Most még nem fog látszani, hogy mit csináltunk, éppen ezért érdemes egy piszkozat bejegyzésben kipróbálni, amit természetesen nem kell megosztani :)

A stílus formázása

Ha nem tetszik ez a stílus, meg lehet változtatni, ehhez a következőket lehet tenni:

a.) Bal oldali keret megadása

blockquote {

    border-left: 4px solid #ccc;

    color: #a5a4a4;

    font-style: italic;

    margin: 30px 0 30px 15px;

    padding-left: 15px;    

}

A vonal stílusának megváltoztatása:

- 4px: a vonal vastagsága (minél nagyobb a szám, annál vastagabb);

- solid: a vonal stílusa (solid, dotted, dashed);

- #ccc: a vonal színe (innen lehet a színek hexa kódját kinézni)

b.) Teljes keret megadása

blockquote {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px;   
    text-align: center;
} 

Itt is kiválaszthatjuk, hogy milyen stílusú, színű, vastagságú keretet szeretnénk adni neki, az előző pont szerint változtathatjuk meg a vonal vastagságát, stílusát és színét.

c.) Betűtípus megváltoztatása

Ha még jobban ki szeretnénk emelni a szövegkörnyezetből az idézett szöveget, megváltoztathatjuk a betűtípust, itt a font-family kódot kell beilleszteni a font-style kódsor alá, a kódnak pedig így kell kinéznie: font-family: Georgia; (a pontosvesszőt ne felejtsük le a sor végéről!)

A betűtípus megváltoztatásnál is igénybe vehetjük a Google Fonts weboldalt, erről itt írtam korábban. 

d.) A háttér megváltoztatása/megadása

Egy jól megválasztott szín is szépen kiemelheti az idézetet, itt érdemes pasztell vagy halvány színeket választani, lehetőleg ne üsse ki az olvasó szemét :) A háttér színének megadásához hozzá kell adnunk a background kódot, a színt pedig a már fentebb linkelt oldalról választhatjuk ki. A kódnak így kell kinéznie (ez csak egy példa szín): background: #cccccc; és mindig a blockquote { sor alá kell beszúrni!

e.) Betűszín megváltoztatása/megadása

Ha megváltoztattuk a háttér színét, elképzelhető, hogy szükség lesz a betűszín megváltoztatására is, ehhez hozzá kell adnunk a font-family: Georgia; kódsor alá a color és a kiválasztott szín hexakódját (pl. color: #000000;).

f.) Szöveg igazítása

Eldönthetjük, hogy balra, középre, jobbra vagy sorkizártra szeretnénk igazítani. Itt a text-align kódot kell megváltoztatni:
- balra: left
- középre: center
- jobbra: right
- sorkizárt: justified

g.) Szöveg és keret közötti távolság beállítása

Az idevonatkozó kódok a margin és a padding. Ha közelebb szeretnénk a kerethez, akkor csökkentsük a számokat, ha távolabb, akkor növeljük. 

Na hát igazából ennyi lett volna, bízom benne, hogy így már egy kicsit érthetőbb volt :)

Vers innen :)