Najnowsze


Style CSS, czyli kody CSS na bloga blogspot

Oto lista przydatnych stylów CSS, czyli kodów CSS do wykorzystania do tworzenia własnego wyglądu, szablonu bloga na platformie blogspot, czyli blogger.

Często pytacie: jak modyfikować szablony bloggera, tak aby stworzyć coś zupełnie innego. Poznanie stylów CSS jest bardzo dobrym sposobem, by stworzyć samemu swój własny szablon bloga.

To początek powstawania tego działu, więc proszę o cierpliwość. Już niedługo znajdziecie tu wszystkie najbardziej przydatne style, kody CSS.

Jak używać kodów CSS, gdzie je wkleić?

1. Skopiuj wybrany kod (lista kodów znajduje się w dalszej części posta)
2. Przejdź do Szablon, a następnie Dostosuj:

3. Wybierz Zaawansowane, następnie przewiń listę do samego dołu i kliknij Dodaj arkusz CSS
4. W pole Dodaj niestandardowy arkusz CSS wklej wcześniej skopiowany kod.
Jeżeli wklejony kod CSS dotyczy strony głównej bloga to spójrz poniżej i sprawdź działanie kodu. Jeśli kod dotyczy innej strony niż główna (np strony etykiety), nie zobaczysz zmian.
5. Zapisz wprowadzony kod i zmiany klikając pomarańczowy przycisk Zastosuj do bloga:

Wklejanie stylu, kodu css zmieniającego przycisk Czytaj więcej na blogu blogspot

  Instrukcje CSS, czyli tzw kody css, a tak naprawdę po prostu style

Nagłówek

Wyśrodkowanie nagłówka, obrazka w nagłówku
#header-inner {text-align: center;}
#header-inner img {margin: 0 auto; }

Menu górne

Wyśrodkowanie menu (kart/zakładek):

#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none;display: inline;}
O tym jak ustawić menu, czyli karty na środku przeczytaj więcej w poście: Jak wyśrodkować zakładki, menu, karty na blogu blogspot

Menu boczne

Wyśrodkowanie menu (kart/zakładek):
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none;display: inline;}
Zaokrąglenie zdjęć (obrazków) w gadżetach paska bocznego:
.sidebar img {border-radius: 10px 10px 10px 10px;}

Posty

Pasek boczny, a posty

Zmniejszenie odstępu postów od prawego paska bocznego gadżetów
.column-right-inner { margin-left: -12px; }
Zmiejszenie odległości między lewą kolumną gadżetów a postami:
.column-left-inner { margin-right: -12px; }

Komentarze

Zmiana koloru czcionki tekstu (treści) komentarzy:
.comment p {color: blue;}
.comment p {color: #000000;}

Avatary, zdjęcia komentujących

Zaokrąglenie avatarów, obrazków:
#comments .avatar-image-container {
 -moz-border-radius: 38px;
 -webkit-border-radius: 38px;
 border-radius: 38px; }

Co zrobić z podanym kodem? Zapoznaj się raz jeszcze z Gdzie wkleić kod css? 

10 komentarzy:

  1. szkoda, że tutaj nie ma tego kodu.

    OdpowiedzUsuń
  2. Dlaczego kody mi nie działają?
    Robię wszystko z instrukcją a działania brak... (chodzi o wyśrodkowanie menu)

    OdpowiedzUsuń
  3. Ale JAK EDYTOWAĆ wygląd menu bocznego z kodu CSS?

    OdpowiedzUsuń
  4. Wpisuję kod i nic.. Jak zrobić nagłówek ?

    OdpowiedzUsuń
  5. nie działa mi zaokrąglenie mojego zdjęcia :/

    OdpowiedzUsuń

Popularne