Jak zrobić etykiety nad tytułem wpisu

wtorek, 24 kwietnia 2018



Od jakiegoś czasu dostawałam od Was maile z pytaniami jak zrobić etykiety nad tytułem wpisu. Długo zastanawiałam się nad tym, którą wersję Wam przedstawić i zdecydowałam się na najprostszą. Pokażę Wam jak za pomocą kodu CSS, przenieść nasze etykiety ze stopki wpisu nad tytuł.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS wklejamy kod:



Elementy do zmiany: 

.post-labels {
font-family: Open Sans; - rodzaj fontu 
padding: 10px 10px!important; - marginesy wewnętrzne 
top: -45px; - położenie etykiet (góra/dół)
left: 50px; - ustawienie do lewej
text-align: center; - wyśrodkowanie (opcjonalnie left/right) 
width: 700px!important; - wielkość 
}
.post-labels a {
background: transparent; - kolor tła 
padding: 2px 6px; - wewnętrzne marginesy 
color: #999; - kolor tekstu 
font-size: 20px; - wielkość tekstu 
text-decoration: none;
letter-spacing: 1px ; - odstęp między literami 
}
.post-labels a:hover {
text-decoration: none;
color:  #2C76AD; - kolor po najechaniu myszą 
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}

Gotowe :)

5 komentarzy:

  1. Bardzo proste i bardzo ładny efekt. Ja osobiście na swoim blogu pozostanę przy standardowym ustawieniu, bo taki mi bardziej pasuje, ale dlaczego by tego nie zmienić w przyszłości. Kiedyś chciałam zrobić coś w tym stylu, ale szybko się poddałam, bo HTML nie jest dla mnie. CSS dużo łatwiejszy. :')

    Dziękuję, Annie ♥

    OdpowiedzUsuń
  2. Lubię takie porady ;) Czekam na kolejne :D

    OdpowiedzUsuń
  3. Tak naprawdę, CSS to część HTML :) Gdyby nie HTML nie było by CSS :)

    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Ń
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life