poniedziałek, 30 stycznia 2017

0037. BLOGGER: Kilka kodów, które upiększą Twojego bloga!


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; 
}

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;}

Tam gdzie macie np. 10px 10px 10px 10px, możecie zmienić według Waszego uznania np. 50px 50 px itd... wtedy zaokrąglenia są większe! 


Mam nadzieje, że Ci trochę pomogłam? :) 

I co takie trudne? :) 



DZIŚ KOŃCZĘ 21 LAT! :)))) 



=================================
POLUB MNIE: 


ZADAJ MI PYTANIE:



29 komentarzy:

  1. 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ń
  2. Spełnienia marzeń !
    natalialukasiewicz.blogspot.com

    OdpowiedzUsuń
  3. Wszystkiego najlepszego!

    Właśnie skorzystałam z Twoich porad,możesz ocenić czy mi się udało :D

    OdpowiedzUsuń
  4. Wszystkiego najlepszego z okazji urodzin! Rocznik 96'? Najlepszy :) super przydatne porady!

    black-bird-says.blogspot.com

    OdpowiedzUsuń
  5. Fajny post, dla mnie kody CSS to czarna magia.

    OdpowiedzUsuń
  6. Ja ostatnio się bawiłam ;) bo chciałam mieć zdjęcia dopasowane do szerokości posta. Wbrew pozorom nie jest to trudne

    OdpowiedzUsuń
  7. Świetny post, na pewno skorzystam! :)
    Wszystkiego najlepszego!

    OdpowiedzUsuń
  8. 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ń
  9. Wszystkiego najlepszego! Dużo radości i satysfakcji z tego, co robisz! :* Dziękujemy za podpowiedzi :)
    pozdrawiamy BT

    zapraszamy do nas http://studentkinapropsie.blogspot.com/

    OdpowiedzUsuń
  10. W takim razie wszystkiego najlepszego i sto lat! ;)
    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 ;)

    OdpowiedzUsuń
  11. Wszystkiego najlepszego!
    Stawiam właśnie bloga od nowa i ciągle coś mi nie pasuje, więc na pewno się przyda. Dzięki! :)

    OdpowiedzUsuń
  12. Widzę, że jesteśmy z jednego rocznika ^^ Spełnienia marzeń :)
    Z kodów na pewno skorzystam bo przymierzam się do blogowych zmian :D
    Mój blog - Klik

    OdpowiedzUsuń
  13. spóźnione ale WSZYSTKIEGO NAJLEPSZEGO ! ;)

    http://przymierzakwm.blogspot.com/

    OdpowiedzUsuń
  14. Fajny post. Przydatny :) Sama coś pokombinuje :)

    OdpowiedzUsuń
  15. Chętnie skorzystam. Wszystkiego dobrego z okazji urodzin!

    OdpowiedzUsuń
  16. Świetny post dla początkujących i nie tylko :)

    OdpowiedzUsuń
  17. podoba mi się post, nie widziałam jeszcze tego typu ;)
    ** użyje przy zaokrągleniu os. kom :D
    pozdrawiam :)

    OdpowiedzUsuń
  18. 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ń