Robimy design bloga #2 Kody CSS

Witam Was w drugiej części serii 'Robimy design bloga'. Jak nazwa sama wskazuje, tutaj pomagam robić wygląd naszej strony. Wcześniejszy post zawierał podstawowe informacje i rady, zapraszam. (klik)

Kody css to bardzo łatwa sprawa, bo polega to tylko na tym, że musimy je wstawić w pewne pole.

Gdzie wstawić kod CSS?

 Jeśli już wstawimy kod, musimy dać enter/kilka enterów i będziemy widzieć efekt.

Przydatne kody CSS

Wyśrodkowanie nagłówka:

#header-inner {text-align: center;}

#header-inner img {margin: 0 auto; }

Wyśrodkowanie górnego menu:

#PageList1 ul {text-align: center;}

#PageList1 ul li {float: none;display: inline;}

Wyśrodkowanie tytułu posta:

h3.post-title {text-align: center;}

Usunięcie napisu ''Technologia Blogger'' na dole strony.

.Attribution {  display:none; }

Podświetlenie zdjęcia po najechaniu na nie:

.post img { opacity: 1;

transition:opacity 0.4s ease-in-out; 

-o-transition:opacity 0.4s ease-in-out;

-moz-transition:opacity 0.4s ease-in-out; 

-webkit-transition:opacity 0.4s ease-in-out; 

}

.post img:hover {

opacity: 0.70; 

transition:opacity 0.4s ease-in-out; 

-o-transition:opacity 0.4s ease-in-out; 

-moz-transition:opacity 0.4s ease-in-out; 

-webkit-transition:opacity 0.4s ease-in-out; 

}

Okrągłe avatary w komentarzach:

.avatar-image-container { shadow:none;

border: none;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

margin: .2em 0 0;

}

Rozjechanie się liter w linku po najechaniu na nie:

a:hover { letter-spacing: 3px; } 

Wyśrodkowanie napisu komentarze:

.post-footer{text-align:center;}

W internecie wystarczy wpisać 'kody css blogspot' i macie tego od groma!

Wstawiając kod musicie uważać, aby skopiować wszystko bardzo dokładnie, inaczej kod się zepsuje i nie będzie działać. Nie omińcie nawet głupiej kropki. 

Do następnej! xx