2017. április 14.

Blogger sablon átalakítása - bejegyzés címe, számláló modul (első rész)


Tisztában vagyok vele, hogy most nagyon nagy divat a letöltött témák használata, de én most ebben a bejegyzésben egy kicsit más módszert mutatok a blogok átalakítására. Ez lényegesen egyszerűbb és remélhetőleg egy kis magyarázattal mindenki számára könnyen  megérthető! :)

Régebben már volt egy hasonló poszt a képeffektekről (itt) és úgy gondoltam ehhez hasonló formában megosztok veletek még néhány trükköt. A sorozat első részeként azt mutatom meg miként formálható át a bejegyzések címe valamint az oldal oldalmegjelenítést mutató számláló. 

Természetesen kész kódokkal is készültem, így akiket nem érdekel a magyarázat csak görgessenek a bejegyzés aljára! :D

Itt van egy kis ízelítő:

Ez a bejegyzés címe


Ez a bejegyzés címe


9,215



Első lépésként a Tématervezőn belül menj a Stíluslap (CSS) hozzáadására. (Egyébként egy html/javascript modulban is ugyanúgy működik.) Lényegében ezzel ugyanazt a hatást éred el, mintha a HTML-kódon belül dolgoznál, de mivel ott megvan a veszélye, hogy rossz helyre illeszted be, vagy menet közben kitörölsz valamit, így ez a megoldás sokkal praktikusabb. 


A  bejegyzések címének és számláló átalakítása lényegében ugyanaz lesz, így kezdetben itt van néhány példa, hogy miként írható át a sablon által kínált változat:

text-transform: uppercase; --- ettől lesz a szöveg nagybetűs

text-transform: lowercase; --- ettől lesz a szöveg kisbetűs

font-style: italic; --- ettől lesz a szöveg döntött

font-weight: bold; --- ettől lesz a szöveg vastagabb

letter-spacing: 2px; --- ezzel lehet a betűk közti távolságot növelni (negatív érték esetén csökkenteni)

text-decoration: underline; --- ettől lesz a szöveg aláhúzott

text-shadow: 2px 1px 2px #A97A97; --- ettől lesz a szöveg árnyékolt

Ha dobozszerűen szeretnéd megcsinálni... vagyis, hogy a szöveg körül egy keret legyen, akkor ezeket használd:
border: 1px solid #A97A97; --- ez ad a szövegnek keretet

border: 1px dashed #A97A97 --- ez ad a szövegnek szaggatott keretet 
border: 1px dotted #A97A97; --- ez ad a szövegnek pöttyös keretet 
box-shadow: 2px 1px 2px #A97A97; --- ettől lesz a szöveg kerete árnyékolt 
padding: 5px; --- ez a keret széle és betű közti távolság 
width: 100px; --- ez a szélessége a "doboznak"  
background: #A97A97; --- ez a szín lesz a doboz háttere
background: url(" "); --- ez a kép lesz a doboz háttere
Mivel ezek általánosságban a szöveg formálására szolgálnak, ezért itt jön képbe az, hogy nekünk bizony blogunk van és nem egy egyszerű szöveget szeretnénk díszíteni. 

A bejegyzés címe esetén a következőképpen néz ki a dolog:
.post-title { ...ide jön a fent említett szövegformázás... }
A számláló címe esetén pedig így:
.counter-wrapper { ...ide jön a fent említett szövegformázás... }
Ezt persze azért lehet még cifrázni, így itt van még egy kis kiegészítés azoknak, akik igazán szeretnének belemerülni. Ahogy a mostani kinézetnél jól látszik lehetőség van a kezdőbetű átalakítására ami ebben az esetben így néz ki:
.post-title:first-letter { ...ide jön a fent említett szövegformázás... }
Ki nem találná senki, de az oldalmegjelenítést mutató esetében is csak annyi a teendő, hogy hozzátoldjuk a first-letter részt, valahogy így:
.counter-wrapper:first-letter { ...ide jön a fent említett szövegformázás... }

Most már nincs más dolgod mint kísérletezni! Ha jól dolgoztál, akkor valami hasonló eredményt fogsz kapni:
.post-title { letter-spacing: 2px; text-transform: uppercase;}.post-title:first-letter { color: #A97A97; text-shadow 2px 1px 1px; #222;}
És végezetül itt van néhány általam készített változat:




Ez a bejegyzés címe




12,678






Ez a bejegyzés címe




9288




Ez a bejegyzés címe




82,155




Ez a bejegyzés címe




9,215





Ez a bejegyzés címe




2,115




Ez a bejegyzés címe




12,009




Köszönöm, hogy velem tartottál ebben a bejegyzésben!

1 megjegyzés:

  1. Nagyon örülök hogy megtaláltam a blogodat! Szuper ügyes vagy és nagyon tetszik, hogy ezeket az infokat amiket megszereztél az idők során megosztod másokkal is. Biztos vagyok benne hogy sokat fogok itt tőled tanulni! További sikeres és jó munkát kívánok!

    VálaszTörlés