wszystko czego potrzebuje twój blog

5/02/2015

Hej !

Troszeczkę czasu minęło, od kiedy byłam tutaj ostatni raz. Ze względu na egzaminy, brak czasu i pomysłów. Ostatnio dużo osób pisze do mnie, aby pomóc im w nagłówkach na ich blogi. Jakiś czas temu dodawałam filmik oraz post z poradnikiem (jeżeli ktoś nie widział KLIK), ale postanowiłam to odświeżyć. Przygotowałam dzisiaj dla was filmik mówiący o tym jak zrobić oryginalny nagłówek oraz dosyć sporą ilość kodów css które zmieniają nieco wygląd bloga.





Kody css które podałam poniżej umieszczamy w polu podanym na zdjęciu.

szablon/dostosuj/zaawansowane/css




Kolor tła postów:
.post {background-color: #afa4b2;}

Obrazek w tle posta:
.post {background-image: url(adres do obrazka);}

Przezroczystość tła:
.post {opacity: 0.5;}

Marginesy:
.post {padding: 20px;}

Cień tekstu posta:
.post {text-shadow: 0px 0px 3px #000000}

Cień ramki posta:
.post {box-shadow: 2px 2px 5px;}

Ramki posta:
a) Linia ciągła:
.post {border-style: solid;}

b) Linia podwójna:
.post {border-style: double;}

c) Linia kreskowana:
.post {border-style: dashed;}

d) Linia kropkowana:
.post {border-style: dotted;}

Grubość ramki:
.post {border-width: 2px;}

Kolor tekstu i ramki w poście:
.column-center-inner {color: #000000;}

Kolor ramki w poście:
.column-center-inner {border-color: #000000;} 

Rodzaj czcionki tekstu w poście:
.column-center-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-center-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-center-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-center-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-center-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-center-inner {text-align: justify;}

Zaokrąglone rogi:
.post {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-center-inner {margin: 90px 300px 0px -400px;}


KOLUMNA BOCZNA LEWA

Kolor tła kolumny:
.column-left-inner {background-color: #4c3e6c;}

Przezroczystość tła:
.column-left-inner {opacity: 0.6;}

Marginesy:
.column-left-inner {padding: 15px ;}

Cienie tekstu ramek:
.column-left-inner {text-shadow: 0px 0px 3px #000000}

Cienie ramki kolumny:
.column-left-inner {box-shadow: 0px 0px 3px #000000}
Ramki kolumny:
a) Linia ciągła:
.column-left-inner {border-style: solid;}
b) Linia podwójna:
.column-left-inner {border-style: double;}

c) Linia kreskowana:
.column-left-inner {border-style: dashed;}

d) Linia kropkowana:
.column-left-inner {border-style: dotted;}

Grubość ramki:
.column-left-inner {border-width: 2px;}

Kolor tekstu i ramki w kolumnie:
.column-left-inner {color: #000000;}

Kolor ramki w kolumnie:
.column-left-inner {border-color: #000000;} 

Rodzaj czcionki tekstu w kolumnie:
.column-left-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-left-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-left-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-left-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-left-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-left-inner {text-align: justify;}

Zaokrąglone rogi:
.column-left-inner {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-left-inner {margin: 90px 300px 0px -400px;}

WSZYSTKIE PARAMETRY MOŻNA ZMIENIĆ!
SPRAWDZAJ NA PODGLĄDZIE, CZY ZACHODZĄ JAKIEŚ ZMIANY. JEŚLI NIE, SPRAWDŹ CZY DOKŁADNIE SKOPIOWAŁEŚ I WKLEIŁEŚ KOD!

KOLUMNA BOCZNA PRAWA
Kolor tła kolumny:
.column-right-inner {background-color: #4c3e6c;}

Przezroczystość tła:
.column-right-inner {opacity: 0.6;}

Marginesy:
.column-right-inner {padding: 15px ;}

Cienie tekstu ramek:
.column-right-inner {text-shadow: 0px 0px 3px #000000}

Cienie ramki kolumny:
.column-right-inner {box-shadow: 0px 0px 3px #000000}

Ramki kolumny:
a) Linia ciągła:
.column-right-inner {border-style: solid;}
b) Linia podwójna:
.column-right-inner {border-style: double;}

c) Linia kreskowana:
.column-right-inner {border-style: dashed;}

d) Linia kropkowana:
.column-right-inner {border-style: dotted;}

Grubość ramki:
.column-right-inner {border-width: 2px;}

Kolor tekstu i ramki w kolumnie:
.column-right-inner {color: #000000;}

Kolor ramki w kolumnie:
.column-right-inner {border-color: #000000;} 

Rodzaj czcionki tekstu w kolumnie:
.column-right-inner {font-family: Georgia;}

Wielkość czcionki w tekście:
.column-right-inner {font-size: 15px;}

Wyśrodkowanie tekstu:
.column-right-inner {text-align: center;}

Wyrównanie tekstu do lewej:
.column-right-inner {text-align: left;}

Wyrównanie tekstu do prawej:
.column-right-inner {text-align: right;}

Wyrównanie tekstu od lewej do prawej, tak zwane wyjustowanie:
.column-right-inner {text-align: justify;}

Zaokrąglone rogi:
.column-right-inner {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.column-right-inner {margin: 90px 300px 0px -400px;}

KOMENTARZE

Kolor tła:
.comment p {background-color: #afa4b2;}

Obrazek w tle:
.comment p {background-image: url(adres do obrazka);}

Przezroczystość tła:
.comment p {opacity: 0.6;}

Marginesy:
.comment p {padding: 20px;}

Cień tekstu:
.comment p {text-shadow: 0px 0px 3px #000000}

Cień ramki komentarzy:
.comment p {box-shadow: 2px 2px 5px;}

Ramki komentarzy:
a) Linia ciągła:
.comment p {border-style: solid;}

b) Linia podwójna:
.comment p {border-style: double;}

c) Linia kreskowana:
.comment p {border-style: dashed;}

d) Linia kropkowana:
.comment p {border-style: dotted;}

Grubość ramki:
.comment p {border-width: 2px;}

Kolor tekstu i ramki w komentarzach:
.comment p {color: #000000;}

Kolor ramki:
.comment p {border-color: #000000;}

Zaokrąglone rogi:
.comment p {border-radius: 90px 90px 40px 40px;}

AWATARY
Cień ramki:
.avatar-image-container {box-shadow: 2px 2px 5px;}

Ramki:
a) Linia ciągła:
.avatar-image-container {border-style: solid;}

b) Linia podwójna:
.avatar-image-container {border-style: double;}

c) Linia kreskowana:
.avatar-image-container {border-style: dashed;}

d) Linia kropkowana:
.avatar-image-container {border-style: dotted;}

Grubość ramki:
.avatar-image-container {border-width: 2px;}

Kolor ramki:
.avatar-image-container {border-color: #000000;}

Zaokrąglone rogi:
.avatar-image-container {border-radius: 90px 90px 40px 40px;}

KARTY/STRONY
W ODDZIELNYCH KARTACH:

Kolor tła:
.tabs-inner .widget li a {background-color: #afa4b2;}

Obrazek w tle:
.tabs-inner .widget li a {background-image: url(adres do obrazka);}

Przezroczystość tła:
.tabs-inner .widget li a {opacity: 0.6;}

Marginesy:
.tabs-inner .widget li a {margin: 10px;}

Cień tekstu:
.tabs-inner .widget li a {text-shadow: 0px 0px 3px #000000}

Cień ramki stron:
.tabs-inner .widget li a {box-shadow: 2px 2px 5px;}

Ramki:
a) Linia ciągła:
.tabs-inner .widget li a {border-style: solid;}

b) Linia podwójna:
.tabs-inner .widget li a {border-style: double;}

c) Linia kreskowana:
.tabs-inner .widget li a {border-style: dashed;}

d) Linia kropkowana:
.tabs-inner .widget li a {border-style: dotted;}

Grubość ramki:
.tabs-inner .widget li a {border-width: 2px;}

Kolor ramki:
.tabs-inner .widget li a {border-color: #000000;}

Zaokrąglone rogi:
.tabs-inner .widget li a {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.tabs-outer {margin: 0px -140px 0px 486px;}

W JEDNYM PASKU:
Kolor tła:
.tabs-outer {background-color: #afa4b2;}

Obrazek w tle:
.tabs-outer {background-image: url(adres do obrazka);}

Przezroczystość tła:
.tabs-outer {opacity: 0.6;}

Marginesy:
.tabs-outer {margin: 10px;}

Cień tekstu:
.tabs-outer {text-shadow: 0px 0px 3px #000000}

Cień ramki kart:
.tabs-outer {box-shadow: 2px 2px 5px;}

Ramki kart:
a) Linia ciągła:
.tabs-outer {border-style: solid;}

b) Linia podwójna:
.tabs-outer {border-style: double;}

c) Linia kreskowana:
.tabs-outer {border-style: dashed;}

d) Linia kropkowana:
.tabs-outer {border-style: dotted;}

Grubość ramki:
.tabs-outer {border-width: 2px;}

Kolor ramki:
.tabs-outer {border-color: #000000;}

Zaokrąglone rogi:
.tabs-outer {border-radius: 90px 90px 40px 40px;}

Przesunięcie:
.tabs-outer {margin: 0px -140px 0px 486px;}

10 komentarze

  1. Świetne rady! :o
    seeanedesu.blogspot.com

    OdpowiedzUsuń
  2. bardzo przydatne dzieki!
    http://zyciowa-salatka.blogspot.com/

    OdpowiedzUsuń
  3. sądzę że ten post wielu osobom się przyda, dobra robota!

    OdpowiedzUsuń
  4. Fajnie, że dałaś w jednym wpisie wszystkie potrzebne kody css :)
    Pozdrawiam i zapraszam do mnie,
    www.megmyfashion.blogspot.com

    OdpowiedzUsuń
  5. Napewno mi się przyda!
    Jak chcesz to wpadnij ! meybelblog.blogspot.com

    OdpowiedzUsuń
  6. Bardzo przydatny post!

    Zapraszam na nowy post! Jeśli Ci się spodoba będzie mi bardzo miło, jeśli skomentujesz lub zaobserwujesz mój blog. :)
    alexandrak-blog.blogspot.com



    OdpowiedzUsuń
  7. Sporo tych kodów ;D
    nataa-liiaa.blogspot.com

    OdpowiedzUsuń

♥ NIE WYMIENIAM SIĘ OBSERWACJAMI
♥ JEŻELI PODOBA CI SIĘ MÓJ BLOG, ZAOBSERWUJ GO I PODAJ LINK DO SWOJEGO. JEŻELI TWÓJ MI SIĘ SPODOBA ZAOBSERWUJE GO :)
♥ NIE PISZ WULGARNYCH KOMENTARZY

Instagram