Kódok a blogokhoz - Útmutatóval! / 1. kód /

KÓDOK, AZOK A FRÁNYA KÓDOK...

  Mivel mostanában a kódok körül forog a blogspot világa, és tudom, hogy nem mindenki a mestere, ezért gondoltam, hozok néhány felhasználható(!!) darabot! Többségét én dizájnoztam, írtam. Szerintem kezdjünk is bele! ;) 

1.

  Egy egyszerű szövegdoboz, ami díszes, mégis harmónikus. Akár kritika, akár történetes blogra viszed, megfelelő. A kód: http://codepen.io/elena-bkiado/pen/NPgaqP itt található! Gyors összefoglalóként: 

CÍM SZEMÉLYRESZABÁSA: 

<div style="color: #ed146f; font-family:times new roman; font-size: 28px; margin-bottom: 5px; margin-top: 2px; position: relative; text-align: center;z-index: 1;border: 2px solid #61D2D6">

CÍM HELYE</div>

- a szöveg színe: #színkód helye;
- betűtípus megváltoztatása: írd be a betűtípus nevét!; (pl.: Arial, Times New Roman, ...)
- betű mérete: 28px-et írd át tetszőleges mennyiségre!
- cím elhelyezése fentről nézve: 2px-et írd át tetszőleges mennyiségre!
- cím elhelyezése: center-t írd át vagy hagyd úgy. Lehetőségek: center- középre, left - balra, right - jobbra.
- cím keretének módosítása: 2px (vastagság, írd át a számot, ha módosítanád); solid (egy folytonos vonal) lehetőségek: double /dupla/, dotted /pontozott vonal/, dashed /szagatott vonal/. Utána a # jel után írd be a keretszínének szánt színkódot. Ha nem szeretnél keretet: border:none; !!
- CÍM HELYE: értelemszerűen, ide kerül a cím! :)

ÁLTALÁNOS SZEMÉLYRESZABÁS:

<div style="-moz-border-radius: 60px; background-color: #eee;  padding-bottom: 10px; padding-top: 30px; width: 300px; border-height: 10px; border-color: #ed146f; border-style: solid none solid none; border-radius: 0px 0px 0px 0px;">

- háttérszín megváltoztatása: # után a szín kód
- szöveg távolsága alulról: 10px-et írd át tetszőlegesre, de nem kell túl nagy helyet hagyni!
- szöveg távolsága felülről: 30px-et írd át tetszőlegesre, de nem kell túl nagy helyet hagyni!
- szövegdoboz szélességének személyre szabása: 300px-et írd át tetszőlegesre, ügyelj, hogy ne legyen túl széles, és túl keskeny sem!
- keret vastagsága: 10px-et írd át tetszőlegesre!
- keret színe: # után írd be a színkódot!
- keret stílusa: mind a négy oldal külön kinézetet kaphat! Lehetőségek egyenként: solid (folytonos vonal), double (dupla vonal), dotted (pontozott v.), dashed (szagatott v.), none (nincs keret)
- keret lekerekítése: mind a négy sarkat beállíthatod külön-külön, próbáld a variációkat! 0px-et írd át! Ha nem szeretnél kerekített sarkakat, akkor hagyd így!

SZÖVEG SZEMÉLYRESZABÁSA:

<div style="color: #fff; font-family: bentham; font-size: 12px; line-height: 120%; text-align: justify; width: 250px;">

   SZÖVEG!SZÖVEG!</div>

- szöveg színe: színkódot írd át sajátra!
- szövegtípus megváltoztatása: kettőspont után írd be a választott betűtípust
- szöveg mérete: 12px-et írd át tetszőleges méretre!
- szöveg sorai közt a távolság: minél nagyobbra állítod, annyival áttekinthetőbb lesz a szöveg!
- szöveg elhelyezése: ha így hagyod, akkor balra igazított lesz, de ha center-t írsz, akkor középre és ha right-ot akkor jobbra igazítod!
- szöveg szélessége: semmiképp ne legyen nagyobb érték, mint a doboz szélessége! 

Ha bármilyen segítség kellene, akár más kódhoz, vagy ehhez, írj kommentet, vagy chatben!
Igyekszem minél előbb válaszolni! Remélem hasznos volt a bejegyzés, nemsokára hozok egy menü kódot, és egy szövegdobozt amiben menü van, valamint egy szövegdobozt amibe archívumot rakhattok! Illetve néhány CSS-kódot, de sok idő, amíg megírok egy ilyen bejegyzést, ráadásul a cikkeket is várjátok! 

VICTORY