11 lut 2014

Tutorial: Jak dodać kod css i zrobić datę w kółku

Hej kochani! W dzisiejszym poście pokaże wam jak zrobić datę w kółku za pomocą kodów css. Na pierwszy rzut oka może się to wydawać nieco skomplikowane, ale tak na prawdę jest proste i myślę, że każdy powinien sobie z tym poradzić! Mam w planach zrobić więcej postów dotyczących kodów i gadżetów na bloga!

Jak dodać kod css?



Data w kółku

Kod css, który należy wpisać:
.date-header span {width: 47px; height: 47px; border-radius: 100%;}
   Pogrubiony tekst pisany kursywą to liczba pixeli, którą możemy zmienić.
Jaśniejszy tekst informuje nas o liczbie procentów, które możemy zmienić.
{UWAGA! Tylko liczba 100% daje nam w pełni zaokrąglone rogi!}


Aby zmienić kolor daty należy wpisać kod:
 .date-header span {background-color: #ffd9d9;}  
Możemy wpisać inny kod koloru, który wybrać najlepiej z palety RGB dostępnej na tej stronie --> klik
{UWAGA! Jeśli chcecie, aby kolor był przeźroczysty tak jak na moim blogu, zamiast #dowolnykolor wpisujecie transparent}


Położenie tekstu w dacie:
  .date-header span {text-align:  center;}
Aby zmienić położenie tekstu w dacie, w miejsce jaśniejszej czcionki możemy wpisać:
- center - wyśrodkowanie
- right - do prawej
- left - do lewej 

Dokładniejsze ustawienie położenia daty:
 .date-header span {margin: -11px -100px -85px -55px;}
 Aby dokładnie ustawić położenie daty co do pixela, pogrubione wartości pisane kursywą możecie zmienić.

41 komentarzy:

  1. ja się muszę jeszcze duuuużo nauczyć, jeżeli chodzi o ustawienia bloga :(((

    http://imcorneliaa.blogspot.com/

    OdpowiedzUsuń
  2. przydatna instrukcja myślę że z niej skorzystam :))

    http://cukierkove.blogspot.com

    OdpowiedzUsuń
  3. Dziękuje za post! Bardzo mi pomogłaś :)
    ~Pozdrawiam

    olyy-ola.blogspot.com

    OdpowiedzUsuń
  4. Bardzo proste i przydatne! :)
    Buziaki, Ola ♥
    http://little-wonderland-by-ola.blogspot.com

    OdpowiedzUsuń
  5. Świetny blog,super wygląd,ciekawe notki śliczne zdjęcia jestem tu częstym gościem :d http://snackbills.blogspot.com

    OdpowiedzUsuń
  6. Przydatne ;) Zrób jeszcze tego typu post o ikonkach społecznościowych ;)

    OdpowiedzUsuń
  7. Baardzo przydatne ;3

    buziaki ♥
    niikablog.blogspot.com

    OdpowiedzUsuń
  8. Bardzo fajny blog!
    Powodzenia w blogowaniu! ♥

    • Zapraszam na mojego bloga •

    www.niktniewidzi.blogspot.com/

    OdpowiedzUsuń
  9. U mnie na blogu mam takie właśnie daty. :3

    http://dianaashe.blogspot.com/ - zapraszam do mnie. :)

    OdpowiedzUsuń
  10. Bardzo fajny i przydatny post :)

    Klikniesz w linki sheinside w poście ?
    z góry dziękuję , to ważne :*

    OdpowiedzUsuń
  11. Bardzo miło z Twojej strony, że pomagasz osobom, które nie potrafią robic designu. Ja jednak wolę kogoś poprosic o pomoc, bo jeżeli sama robię sobie design źle się to kończy hahha :D

    niuulka-photo-fashion.blogspot.com

    OdpowiedzUsuń
  12. Świetny porady , dzięki na pewno się przydadzą :D
    nataa-liiaa.blogspot.com

    OdpowiedzUsuń
  13. Pomocne ;)
    _______________________________________
    WYGRAJ CONVERSE!!
    http://malinowe-ciasto.blogspot.com/2014/02/konkurs.html

    OdpowiedzUsuń
  14. Ooo przydatny post ;3
    Muszę w końcu zmienić design bloga i taki dodatek mi się przyda <3
    Dziękuje ♥
    KLIK-BLOG

    OdpowiedzUsuń
  15. Bardzo przydatny post, dziekuje !
    http://julliet-blog.blogspot.com/

    OdpowiedzUsuń
  16. bardzo przydatne! :)
    nats-naats.blogspot.com

    OdpowiedzUsuń
  17. przydatny post :)
    http://klepart.blogspot.com/

    OdpowiedzUsuń
  18. Chciałabym Ci powiedzieć, że bardzo podoba mi się twój blog. Jest tu tak miło i przytulnie. A do tego ten śliczny wygląd bloga. <3 Naprawde masz talent do prowadzenia bloga. Oby tak dalej!:* Może masz ochote na obserwacje, oczywiście jeżeli Ci się spodoba mój blog. Napisz w komentarzu :*

    ♥♥♥♥♥♥♥ WWW.MALINKAXPP.BLOGSPOT.COM ♥♥♥♥♥♥♥

    OdpowiedzUsuń
  19. Bardzo przydatny post ;)
    pusta-szklanka.blogspot.com

    OdpowiedzUsuń
  20. ooo! jak miło, że ktoś dodał taki post, bo dużo mi pomógł. dziękuję! :)

    berrysmilee.blogspot.com

    OdpowiedzUsuń
  21. bardzo przydatny post:) na pewno do niego wróce jak tylko dowiem się jak przestawić datę obok tytułu ;)

    OdpowiedzUsuń
  22. Bardzo przydatne :)
    Zapraszam równiesz do mnie, dopiero zaczynam k4r0linv.blogspot.com
    pozdrawiam :*

    OdpowiedzUsuń
  23. Bardzo dobre
    Zrobiłaś sama szablon czy ktoś ci robił ?

    OdpowiedzUsuń
  24. Ten komentarz został usunięty przez administratora bloga.

    OdpowiedzUsuń
  25. Kurczę, robię według instrukcji już kilkakrotnie i ani śladu po jakiejkolwiek dacie. Nie wiem jak to się stało ale na moim blogu nie ma w ogóle daty, sprawdzałam kilka razy czy przypadkiem nie ma koloru zlewającego się z tłem posta ale nic. Mam szablon REWELACJA.
    http://staaayweird.blogspot.com/

    OdpowiedzUsuń
  26. szkoda, że mi wychodzi owal zamiast kółka

    OdpowiedzUsuń
    Odpowiedzi
    1. zmieniłam szablon w testowym blogu, wyszło ale prostokąt pomimo że wpisałam 100% ;)

      Usuń
  27. Dziękuję za ten post bardzo on mi pomógł.
    natalyy-blog.blogspot.com

    OdpowiedzUsuń
  28. Mi coś nie chce się zrobić ta data w kołeczku, wpisałam kod i nic ;(

    OdpowiedzUsuń
  29. Pomocny post! :)
    +Obserwujemy i liczymy na to samo :)
    ✿ Staying Strong [KLIK] ✿

    OdpowiedzUsuń
  30. Bardzo przydatne, na pewno skorzystam :)

    OdpowiedzUsuń
  31. Bardzo mi pomogłaś, właśnie takiego postu szukałam! Przejrzysty i napisany prostym językiem. Daje obs!! :)
    Jeśli się zgodzisz rozpowszechnię tego typu post na moim blogu :D
    byuni-corn.blogspot.com

    OdpowiedzUsuń
  32. Ten kod akurat znam, jednak według mnie lepiej wygląda data u góry posta, wyśrodkowana :)

    http://want-cant-must.blogspot.com/

    OdpowiedzUsuń

Dziękuję za każdy miły komentarz ♥
+ Nie uznaję obserwacji za obserwację
+ Zostaw jedynie link do swojego bloga bez zbędnych tekstów, a na na pewno zajrzę