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:
2. Przejdź do Szablon, a następnie Dostosuj:
Jak dodać kody css na bloga Blogger (blogspot)
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:
Używanie kodów CSS – wklejanie kodu
Style, kody CSS
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ć menu.
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ę jeszcze raz z treścią na początku posta.
