Jak mieć ładnego bloga? - czyli przydatne funkcje i kody CSS

Dzień dobry! Czy tylko u mnie jest już biało? Śnieg prószy już od wczoraj. Mam nadzieję, że na święta moje podwórko, również będzie się bieliło. A teraz Was pocieszę, do świąt został miesiąc i 4 dni! Macie już pomysł na prezenty pod choinkę? :) 
A teraz do rzeczy. Dawno nie dodawałam na bloga, żadnego wpisu z serii "Jak mieć ładnego bloga?". Zebrałam dla Was kilka nowych kodów CSS, które być może kiedyś Wam się przydadzą :) 
Dla nowych czytelników TUTAJ i TUTAJ znajdziecie stare wpisy z tej serii. 
Dajcie koniecznie znać, czy znacie te kody, a może z któregoś skorzystaliście? 





1. Dwa style dla dat
Jeden:

.date-header span {
background-color: #fff;
border: 1px solid #999;
letter-spacing: 2px;
padding: 10px 10px;
position: relative;
text-transform: uppercase;
top: -7px;
}
h2.date-header {
background: none repeat scroll 0 0 #999;
height: 1px;
font: 10px Open Sans;
text-align: center;
}

Dwa: 

.date-header span {
background-color: #fff;
letter-spacing: 2px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
top: -8px;
}
h2.date-header {
border-top: 1px solid #999;
font: 10px Open Sans;
letter-spacing: 2px;
text-align: center;
}

2. Kod CSS na rozwijane archiwum bloga

#ArchiveList ul > li > a.post-count-link {
    font-size: 15px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 34px;
    background-color: #eee;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#ArchiveList ul ul li  a.post-count-link{
    font-size: 15px;
letter-spacing: 2px;
    width: auto;
    margin: 0 5px 0;
    padding: 10px 2px;
    line-height: 1;
background: transparent;
    text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 10px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

3. Kod CSS na powiększenie pierwszej litery w poście

.post-title:first-letter {font-size: 50px; color: #888; font-family: Times New Roman;}

4. Kod CSS na umieszczenie menu nad nagłówkiem

.tabs-outer {top: -165px;
background: #ddd;
margin-left: -235px;
margin-right: -234px;}

5. Kod CSS na zmianę kształtu zdjęcia na okrągły w  popularnych postach

.item-thumbnail img{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

6. Kod CSS na wyjustowanie tekstu w polecanym wpisie

#FeaturedPost1 {background: #fafafa;
text-align: justify;
color: #444;
line-height: 15px;
padding: 20px;}
#FeaturedPost1 a:link {font-size: 20px; padding: 0px;
font: normal bold 13px 'Open Sans', serif;
letter-spacing: 1px;}

7. Kod CSS na datę w kółku 

.date-header span {
background-color: #ddd;
text-transform: uppercase;
text-align:center;
color: #ffffff;height:47px;
width:47px;
padding-top: 10px;padding-bottom: 2px;padding-right: 5px;padding-left: 5px;margin-right: 10px;margin-top: 10px;font-weight: 700;
float:left;
font-family: Arial;
font-size:17px;
letter-spacing: 1px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

8. Kod CSS na czarno-białe zdjęcie po najechaniu na nie

.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { -webkit-filter:
grayscale(100%); }

9. Kod CSS na obracanie się zdjęcia po najechaniu na nie

.post img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

10. Kod CSS na podniesienie nagłówka
.header { height: 550px;}






Pozdrawiam, M.

26 komentarze

  1. Olson.b11/20/2018

    Bardzo przydatny post! W wolnej chwili możliwe że skorzystam :)
    https://olsonbxxx.blogspot.com/

    OdpowiedzUsuń
  2. Joanna11/20/2018

    Świetny post. Mam zamiar zabrać się za swojego bloga, więc wszystko się przyda :)

    OdpowiedzUsuń
  3. Anks_blog11/20/2018

    Bardzo przydatny wpis! Ja niedługo biorę się za wygląd mojego bloga :)
    Mój blog - Klik

    OdpowiedzUsuń
  4. jagglam11/20/2018

    Świetny post i napewno skorzystam z tych kodów. Tylko w których miejscach je wstawiać?

    OdpowiedzUsuń
    Odpowiedzi
    1. Monika R.11/20/2018

      blogger.com -> Motyw -> Dostosuj -> Zaawansowane -> 'Dodaj arkusz CSS :)
      Tam wklejasz wybrany kod i zapisujesz :)

      Usuń
  5. Ewa_S11/20/2018

    Bardzo przydatne kody ❤
    W wolnej chwili musze pokombinować, bo wygląd Twojego bloga mi się baaardzo podoba 😍
    Pozdrawiam
    Lili

    OdpowiedzUsuń
  6. Wiktoria Drawska11/20/2018

    Pomocny post! ♥

    londonkidx.blogspot.com

    OdpowiedzUsuń
  7. Jointy&Croissanty11/20/2018

    Bardzo przydatne kody, muszę przejrzeć wcześniejsze posty z tej serii:)

    OdpowiedzUsuń
  8. Justyna Krajewska|Z mojej strony lustra11/20/2018

    U mnie śniegu nie ma, ale mam nadzieję, że w święta będzie :)
    Muszę w końcu popracować nad wyglądem mojego bloga.

    OdpowiedzUsuń
  9. Unknown11/20/2018

    Mega przydatny post <3 Jestem właśnie na etapie upiększania swojego bloga :D

    Zapraszam do siebie: https://zyciowy-kogel-mogel.blogspot.com/

    OdpowiedzUsuń
  10. Zuzanna Jędra11/20/2018

    Kiedyś robiłam swoje wyglądy bloga, ale w końcu postawiłam na jeden, a porządny, bo nigdy żaden mi nie pasował tak w 100% :)
    Mój blog-klik

    OdpowiedzUsuń
  11. Iwetta 11/21/2018

    bardzo fajnie że stworzyłaś taki pomocny post :) jednak ja kompletnie nie wiem jak te kody aktywować i w ogóle :/ także nie skorzystam :/
    pozdrawiam

    OdpowiedzUsuń
  12. Klaudencja11/21/2018

    Ciekawy post i świetne zdjęcia! :)
    Mój blog - Zapraszam i zachęcam do obserwowania!
    <3

    OdpowiedzUsuń
  13. Kinga K.11/21/2018

    Przydatne :)

    OdpowiedzUsuń
  14. Cake Monika11/21/2018

    Ciekawy ale i przydatny post!

    Zapraszam na nowy post: https://cakemonika.blogspot.com/2018/11/blog-post.html ♥

    OdpowiedzUsuń
  15. FashionRadi 11/22/2018

    Lovely tips. Thank you for sharing!

    www.fashionradi.com

    OdpowiedzUsuń
  16. Marta11/22/2018

    Wszystkie komendy bazują na tym samym... wystarczy zmieniać selektory ;)

    OdpowiedzUsuń
  17. KosmetykoFanki11/22/2018

    Ciekawy post, czasami szukam jakiś fajnych udogodnień do bloga, aby coś zmienić :) Fajne masz te serduszko jak się strona wczytuje :)

    OdpowiedzUsuń
  18. Natka !11/22/2018

    Kody CSS są dla mnie niezbędne! Uwielbiam takie poradniki - sama nie zdziałałabym nic w kwestii zmian wyglądu bloga :)
    Pozdrawiam i zapraszam do mnie!

    lublins.blogspot.com

    OdpowiedzUsuń
  19. FotoHart11/22/2018

    Super wpis dla osób, które chcą urozmaicić swego bloga!
    Pozdrawiam
    FotoHart Blog ♥

    OdpowiedzUsuń
  20. Carpe Diem11/23/2018

    Zawsze jak chcę coś zmienić w wyglądzie to muszę szukać po całym internecie, teraz przynajmniej wiem gdzie muszę się udać! Kody na pewno się przydadzą!

    Pozdrawiam, nataa-natkaa.blogspot.com

    OdpowiedzUsuń
  21. Gabi11/23/2018

    Na pewno coś z tego się przyda :)

    http://gabrysiaaaaa.blogspot.com/

    OdpowiedzUsuń
  22. Weronika11/23/2018

    U mnie niestety śniegu nie ma jeszcze, ale zimno jest i tak haha bardzo przydatny post. ja właściwie nie zmieniałam wyglądu bloga od chyba 4 lat, więc już nie pamiętam nawet jak to się robi haha

    Pozdrawiam i zapraszam do siebie na post o ulubieńcach kinowych z ostatnich miesięcy, W.

    OdpowiedzUsuń
  23. Martyna Frydrych11/30/2018

    O kurcze, muszę w końcu zmienić troche wyglad swojego bloga bo trochę mi się znudził. zaobserwuje Twojego bloga, żeby post nigdzie mi nie uciekl, jest bardzo przydatny :)
    Pozdrawiam kochana,
    frydrychm.blogspot.com

    OdpowiedzUsuń

Dziękuję za odwiedziny. Zachęcam do komentowania oraz obserwowania mojego bloga. Jest to dla mnie ogromna motywacja do dalszego pisania. :)