Często pragniemy zmienić coś w wyglądzie swojej strony. Przeglądając blogi naszych internetowych koleżanek zastanawiamy się: "Jak ona zrobiła okrągłe avatary komentujących?", "Jak zrobiła podświetlony temat postu?". Załamujemy ręce, bo... no właśnie. Jesteśmy totalnie zielone w kombinowaniu w szablonach. Nic się nie bój. Pomogę Ci upiększyć bloga, skoro ja się nauczyłam to i Ty się nauczysz!
Zatem do dzieła! Od czego zacząć? Na początek weź głęboki wdech i wydech. Napij się kawy i rób według moich wskazówek.
1. Wejdź na swojego bloggera
2. Kliknij SZABLON
3. DOSTOSUJ
Kiedy już kliknęłyście wyskoczy Wam takie okienko, klikamy na ZAAWANSOWANE, później DODAJ ARKUSZ CSS. Pod spodem znajdziecie pogląd naszego bloga. Dzięki temu, zobaczycie co się zmieniło, możecie dodać jakieś poprawki zmieniając parametry.
W białe pole wklejamy KODY CSS, które znajdziecie pod spodem.
Dobra, skoro już wiesz co gdzie i jak to teraz podam Ci kilka kodów CSS ;)
WYŚRODKOWANIE TYTUŁU POSTA
h3.post-title {text-align: center;}
WYŚRODKOWANIE DATY
.date-header {text-align:center;}
PODKREŚLENIE TYTUŁU POSTA
h3.post-title {border-bottom: 1px #000000 dotted;}
WYJUSTOWANIE TEKSTU W POŚCIE
.post-body {text-align: justify;}
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;
}
PODŚWIETLANE 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;
}
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;
}
ZAOKRĄGLENIE WSZYSTKICH ZDJĘĆ WE WSZYSTKICH GADŻETACH PASKA BOCZNEGO
.sidebar img {border-radius: 10px 10px 10px 10px;}
ZAOKRĄGLENIE TYLKO ZDJĘCIA PROFILOWEGO (O MNIE)
.profile-img { border-radius: 10px 10px 10px 10px; }
CIENIE W TYTULE POSTU:
h3.post-title {text-shadow: 1px 1px 5px;}
CIENIE W TYTULE GADŻETU:
.widget h2 {text-shadow: 1px 1px 5px;}
Co prawda ja od wyglądu mam przemiłą osóbkę, ale post na pewno przydatny i pomocny. Bardzo fajnie, że postanowiłaś taki zrobić, pozdrawiam serdecznie :)
OdpowiedzUsuńPrzydatny post :)
OdpowiedzUsuńSpełnienia marzeń !
OdpowiedzUsuńnatalialukasiewicz.blogspot.com
Napewno skorzystam :)
OdpowiedzUsuńWszystkiego najlepszego!
OdpowiedzUsuńWłaśnie skorzystałam z Twoich porad,możesz ocenić czy mi się udało :D
Dziękuję :*
UsuńWszystkiego najlepszego z okazji urodzin! Rocznik 96'? Najlepszy :) super przydatne porady!
OdpowiedzUsuńblack-bird-says.blogspot.com
Fajny post, dla mnie kody CSS to czarna magia.
OdpowiedzUsuńBardzo przydatny post! :)
OdpowiedzUsuńJa ostatnio się bawiłam ;) bo chciałam mieć zdjęcia dopasowane do szerokości posta. Wbrew pozorom nie jest to trudne
OdpowiedzUsuńŚwietny post, na pewno skorzystam! :)
OdpowiedzUsuńWszystkiego najlepszego!
Super post! Na pewno skorzystam z Twoich porad. Już od dawna chciałam coś zmienić w wyglądzie bloga, ale jakoś nie miałam czasu. Tutaj wszystko już mam gotowe :) Pozdrawiam!
OdpowiedzUsuńSpełnienia marzeń! :)
OdpowiedzUsuńWszystkiego najlepszego! Dużo radości i satysfakcji z tego, co robisz! :* Dziękujemy za podpowiedzi :)
OdpowiedzUsuńpozdrawiamy BT
zapraszamy do nas http://studentkinapropsie.blogspot.com/
W takim razie wszystkiego najlepszego i sto lat! ;)
OdpowiedzUsuńPost przydatny ;) Kiedyś znałam te wszystkie kody, ale tak to jest z każdym językiem (nawet językiem kodowania), nieużywany powoli zanika ;)
Wszystkiego najlepszego!
OdpowiedzUsuńStawiam właśnie bloga od nowa i ciągle coś mi nie pasuje, więc na pewno się przyda. Dzięki! :)
DZIĘKUJE <3
Usuńwszystkiego najlepszego :*
OdpowiedzUsuńDZIĘKUJE <3
UsuńWidzę, że jesteśmy z jednego rocznika ^^ Spełnienia marzeń :)
OdpowiedzUsuńZ kodów na pewno skorzystam bo przymierzam się do blogowych zmian :D
Mój blog - Klik
spóźnione ale WSZYSTKIEGO NAJLEPSZEGO ! ;)
OdpowiedzUsuńhttp://przymierzakwm.blogspot.com/
DZIĘKUJE <3
UsuńFajny post. Przydatny :) Sama coś pokombinuje :)
OdpowiedzUsuńChętnie skorzystam. Wszystkiego dobrego z okazji urodzin!
OdpowiedzUsuńŚwietny post dla początkujących i nie tylko :)
OdpowiedzUsuńBardzo przydatny post :)
OdpowiedzUsuńbardzo przydatny post, super! :)
OdpowiedzUsuńpodoba mi się post, nie widziałam jeszcze tego typu ;)
OdpowiedzUsuń** użyje przy zaokrągleniu os. kom :D
pozdrawiam :)
wow, świetny post. Pamiętam godziny, które spędziłam po założeniu bloga nad rozszyfrowywaniem tych kodów itp. Zapisuje w zakładkach i w wolnej chwili działam :)
OdpowiedzUsuń