Jak zrobić datę wpisu w chorągiewce

4 lutego 2015


Były już kody CSS, na to jak zrobić datę wpisu w kółku. Już prawie większość osób, kod na datę w kółku zna. Postanowiłam, że w dzisiejszym tutorialu zapoznam was z kodem, który dotyczyć będzie daty w tzw. chorągiewce. Myślę, że będzie to miła odmiana i może akurat ktoś się skusi na to aby zmienić swoje kółeczka na chorągiewkę.

Przechodzimy do: ustawienia - język i formatowanie - format nagłówka daty i zmieniamy na format pierwszy. Następnie przechodzimy do: szablon - dostosuj - zaawansowane - dodaj arkusz CSS.


Kiedy już dostaniemy się do naszego arkusza CSS wklejamy tam kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc;
margin: -2px 0px 0px 849px !important;
background: #000;
height: 50px;
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important;
font-size: 10px !important;
padding: 5px;
line-height: 14px !important;
color: #fff !important;}

Analiza kodu:



position: absolute;
border-top: solid 3px #ccc;  - rodzaj, grubość i kolor paseczka na górze daty
margin: -2px 0px 0px 849px !important; - dopasowanie daty 
background: #000; - tło daty 
height: 50px; - długość naszej chorągiewki 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; - rodzaj czcionki 
font-size: 10px !important; - rozmiar czcionki 
padding: 5px; - marginesy wewnętrzne  
line-height: 14px !important; - położenie daty 
color: #fff !important - kolor daty 

Wszystko co zaznaczone na kolorowo jest wartościami zmiennymi, border-radius lepiej zostawić w spokoju, ponieważ, inaczej nie uzyskamy efektu chorągiewki.

Nasza data będzie po prawej stronie, jeżeli chcemy aby była po lewej wpisujemy ten kod:

.date-header span {position: absolute;
border-top: solid 3px #ccc; 
margin: 10px 900px  0px -50px !important; 
background: #000; 
height: 50px; 
border-radius: 0px 0px 50px 50px;
font-family: Verdana; !important; 
font-size: 10px !important; 
padding: 5px; 
line-height: 14px !important; 
color: #fff !important;}

15 komentarzy:

  1. Kolejne przydatne wskazówki. Same nie wpadłybyśmy, gdzie wejść, żeby zrobić coś takiego ;)
    http://gangetpolska.blogspot.com/

    OdpowiedzUsuń
  2. Znów bardzo pouczający post, skorzystam kiedyś z tych wszystkich Twoich lekcji:))

    OdpowiedzUsuń
    Odpowiedzi
    1. Będę się bardzo cieszyć, że na coś się przydadzą :)

      Usuń
  3. Bardzo fajny poradnik. W wolnej chwili poeksperymentuje z wyglądem bloga a ten kod na pewno się przyda :)
    Pozdrawiam cieplutko http://pomyslowa-wiki.blogspot.com/

    OdpowiedzUsuń
  4. Great tutorial!

    Want to follow each other on GFC & bloglovin etc?
    Let me know!

    Greets from the EDELFABRIK
    Chrissie

    OdpowiedzUsuń
  5. Na pewno kiedyś skorzystam :)

    OdpowiedzUsuń
  6. Dzięki Twoim postom można się wiele nauczyć ! :)

    OdpowiedzUsuń
  7. Bardzo przydatny post ;) Spotkałam się kilka razy z takim wyglądem daty.
    http://przyszopceuszatych.blogspot.com/

    OdpowiedzUsuń
  8. Bardzo przydatna notka :)
    Zapraszam ♥

    OdpowiedzUsuń
  9. Bardzo przydatne. Może skorzystam :)
    Pozdrawiam

    http://totalniementalna.blogspot.com/

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona