Blogger Tutorial | Idézetek

Orbán Szilvi | szeptember 06, 2014

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 :) 

5 megjegyzés:

  1. Szia Szilvi! Kérlek, ha tudod, készítesz erről egy részletes bejegyzést képekkel, és leírásokkal? Igazán nem akarlak zavarni, de egyszerűen, bárhogy próbálkozom nem megy. :c
    Előre is köszönöm!

    Zoey

    U.I.: Nagyon szép lett a blogod! *q*

    VálaszTörlés
    Válaszok
    1. Pontosan mi nem működik? Pedig csak a stílus kódját kell kimásolni és beilleszteni oda, ahova írtam :)

      Törlés
  2. Kipróbáltam a másik linket, amit linkeltem és az ott található kódok tényleg nem működnek valami miatt :/ Így inkább csak azt az oldalt javaslom, ahonnan az enyémet lehet letölteni :)

    VálaszTörlés
  3. Nekem sikerült, viszont a betűtípust és a színét nem engedi megváltoztatni.

    VálaszTörlés
    Válaszok
    1. Pedig én is kipróbáltam minden kódot és működött :/ hogy néz ki a kódod? Küldd el légyszi emailben ;)

      Törlés