sobota, 24 czerwca 2017

JAK SZYBKO UPIĘKSZYĆ BLOGA? 5 PRZYDATNYCH I ŁATWYCH TRIKÓW I KODY CSS

Cześć!
Ostatnio zmieniłam sporo rzeczy w szablonie mojego bloga i w końcu mogę powiedzieć, że jest prawie idealny dla mnie. Długo mi zajęło dojście do wyglądu, który marzył mi się od zawsze. Wprowadziłam sporo drobnych zmian, które razem pozwoliły mi osiągnąć pożądany efekt. 
Razem ze zmianami przyszedł mi do głowy pomysł na ten wpis. Chciałabym się z Wami podzielić pięcioma trikami i kodami css, które pozwolą upiększyć waszego bloga łatwo i szybko.
Jeśli ten post Wam się spodoba to na pewno niedługo pojawi się kolejna część!
Niektóre z nich pewnie znacie, bo nie będą to kody wymyślone przeze mnie.
Ale brakuje mi właśnie takiego wpisu, który zebrałby wszystkie najbardziej przydatne triki w jednym miejscu. 
Jesteście ciekawi jak możecie w prosty sposób zmienić design swojego bloga?
Zapraszam do przeczytania!
blogger design kody css triki html kod css szablon

Najpierw zacznijmy od samych podstaw czyli jak użyć kodu css?
1. Wejdź w motyw, a następnie dostosuj
2. Kliknij w zaawansowane i na samym dole dodaj arkusz css
3. Po dodaniu kodów css pamiętaj o zapisaniu!
blogger design kody css triki html kod css szablon

#1 ZAOKRĄGLANIE AVATARÓW W KOMENTARZACH
Wielkość px możecie modyfikować według swoich potrzeb. Im większa liczba tym większe zaokrąglenie.
.avatar-image-container { shadow:none;
border: none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: .2em 0 0;
}
blogger design kody css triki html kod css szablon

#2 EFEKTY PO NAJECHANIU NA ZDJĘCIA
Wysunięcie zdjęcia:
.post img{ -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.post img:hover { -o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1); }

Podświetlenie zdjęcia:
.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; 
}

Obracanie zdjęcia:
.post img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.post img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Czarno-białe zdjęcie:
.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { -webkit-filter:
grayscale(100%); }

Zamglone zdjęcie:
.post img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease
; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }


.post img:hover { opacity:0.7;
filter:alpha(opacity=50); }

#3 GADŻET BEZ TYTUŁU
Jeśli chcesz dodać gadżet bez tytułu w jego miejsce wystarczy wpisać <!>
blogger design kody css triki html kod css szablon

#4 EFEKTY PO NAJECHANIU NA LINKI
Rozjechanie się liter linków
a:hover { letter-spacing: 5px }

Rozjechanie się słów linków
a:hover { word-spacing: 5px }

Ramka wokół linków
a:hover {border-style: solid;}

Cienie 
a:hover {text-shadow: 1px 2px 5px #000000 }

Więcej ciekawych efektów po najechaniu na linki TUTAJ

#5 ZMIANA WYGLĄDU CIASTECZEK
Na blogu grafiterka.pl możecie znaleźć instrukcję jak zmienić informację o ciasteczkach na blogu.
Są tam trzy różne opcje-biało-złote, biało-czerwone i różowo-białe.
blogger design kody css triki html kod css szablon

Mam nadzieję, że pomogłam komuś przy zmianie wyglądu swojego bloga.
Dajcie znać czy chcecie więcej tego typu wpisów!
DODAJ MNIE NA SNAPA
adrienneyt
MASZ PYTANIA?
adriennev@wp.pl
Nowy film na moim kanale (klik):

42 komentarze:

  1. Super porady!:D
    Z pewnością z nich skorzystam, jak będę zmieniać wygląd bloga!
    Oglądałam filmik, mega lubię Twój kanał!:D Jesteś świetna!♡
    asiaknebel.blogspot.com

    OdpowiedzUsuń
  2. Super porady, muszę w nich skorzystać by moja strona prezentowała się o niebo lepiej :D
    Mój blog

    OdpowiedzUsuń
  3. Rady super, jednak ja jestem totalny laikiem kodów i boję się grzebać tam gdzie nie powinnam żeby nie zepsuć bloga, na szczęście mam bliską osobę, która się na tym co nieco zna :D
    ZAPRASZAM:
    BLOG: http://roksanakalinowska.blogspot.com
    INSTAGRAM: @kalinowskaar

    OdpowiedzUsuń
  4. Świetne rady! Najbardziej przydatna, myślę, że jest ta ze zmianą wyglądu ciasteczek! :D

    WWW.PIANKAOFSTYLE.PL-KLIK!

    OdpowiedzUsuń
  5. Naprawdę fajny i pomocny wpis :) Zapraszam do mnie:
    http://livestrue.blogspot.com/?m=0

    OdpowiedzUsuń
  6. Super porady! Również uważam, że każdy blog powinien mieć odpowiedni wygląd, by milej się na niego wchodziło i przeglądało ;)
    Pozdrawiam♥
    http://rikaa-blog.blogspot.com/

    OdpowiedzUsuń
  7. Świetny post. Rady mi się sprzydają :D
    Zapraszam
    http://jadziaandtosia.blogspot.com/

    OdpowiedzUsuń
  8. Bardzo przydatny post! Od początku prowadzenia bloga szukam sposobów na to, by mój blog był wizualnie ładny, a jestem w tych sprawach zielona. Bardzo chętnie skorzystam z Twoich rad. :)
    Pozdrawiam ♥

    OdpowiedzUsuń
  9. Świetne porady, myślę że nie jedna osoba z nich skorzysta!
    Pozdrawiam
    ZAPRASZAM NA MÓJ KANAŁ

    OdpowiedzUsuń
  10. Jej dziękuję za ten poradnik, naprawdę, ciągle czuję, że czegoś mi w moim blogu brakuje, a dzięki temu na pewno choć trochę uda się go poprawić :)

    OdpowiedzUsuń
  11. Świetne porady! Jutro na pewno któres z nich wykorzystam u siebie na blogu;))

    http://fashioneasiness.blogspot.com/

    OdpowiedzUsuń
  12. Skorzystam z każdej rady, ponieważ juz dawno szukałam podobnych ! :)

    xclaudia-wojcik.blogpsot.com

    OdpowiedzUsuń
  13. Ja boję się grzebać w szablonie. Można zapisać niby kopię przed "grzebaniem". Ja mimo wszystkon staram się jak najmniej ingerować w szablon.
    Odwdzięczam się za szczery komentarz.
    Pozdrawiam,annnathalie.blogspot.com

    OdpowiedzUsuń
  14. Bardzo przydatne rady): Wkrótce z nim skorzystam :)

    OdpowiedzUsuń
  15. Świetny post, czekam na kolejną część! :)

    ab-photographs.blogspot.com

    OdpowiedzUsuń
  16. Kilka kodów już znam i sama użyłam u siebie, jednak wykorzystałam ten z rozjeżdżaniem się słów w linku - bardzo fajny efekt.
    Pozdrawiam, Ola.

    OdpowiedzUsuń
  17. Fajny wpis, pomocny. Ja się dopiero tego wszystkiego uczę

    OdpowiedzUsuń
  18. Mega przydatny post! dla kogos takiego jak ja-idealny, jestem antytalentem :-D buziaki Kochana!


    http://nataliazarzycka.blogspot.com/2017/06/holiday-2017.html

    OdpowiedzUsuń
  19. Skorzystałam z jednego efektu, dzięki! :))

    Pozdrawiam
    Http://www.merloczek.pl Obserwuję!

    OdpowiedzUsuń
  20. Porady faktycznie bardzo przydatne. Ja nie skorzystam, gdyż czekam na nowy szablon :)
    Pozdrawiam cieplutko i lecę na Twojego YouTuba

    OdpowiedzUsuń
  21. Świetny post! Bardzo przydatny :)) Myślę, że skorzystam z kodów :D
    Pozdrawiam! :D

    OdpowiedzUsuń
  22. Świetny post! Jest bardzo przydatny, szczególnie dla początkujących :)
    Mój Blog - klik!

    OdpowiedzUsuń
  23. Bardzo pomocne!
    Na pewno z 2 skorzystam!

    http://live-telepathically.blogspot.com/

    OdpowiedzUsuń
  24. post przyda się na pewno!
    trynabepositive.blogspot.com

    OdpowiedzUsuń
  25. Bardzo fajne kody :) W końcu kilka przydatnych w jednym miejscu :)
    Pozdrawiam!
    http://pannakuchcewicz.blogspot.com/

    OdpowiedzUsuń
  26. Świetne porady! Od razu skorzystałam :D Dziękuję i pozdrawiam ^^
    Mój blog

    OdpowiedzUsuń
  27. your post very good and very nice. See Every Dress on the Red Carpet and you want more fashion styles ideas check this Blog lifestylebean.com

    OdpowiedzUsuń
  28. przydatne rady :)
    agnieszka-gromek.blogspot.com

    OdpowiedzUsuń
  29. o dzięki Kochana wielkie !!!!!!!Zaraz sobie coś dodam hihiih :*

    OdpowiedzUsuń
  30. I'm following you now to get updates from your blog, hope you would like to follow back. Thanks much.
    https://chicporadnik.blogspot.com

    OdpowiedzUsuń
  31. Fajne triki :) Kiedyś bawiłam się sama w tworzenie szablonów, ale moje umiejętności nie były zbyt efektowne, dlatego postanowiłam korzystać z gotowych :) W takie dodatki mogę się chyba jednak pobawić :P
    JustMajka.blogspot.com

    OdpowiedzUsuń
  32. swietny post, wszystkie wskazowki sa godne zapamietania! pozdrawiam goraco ;)


    nowy post
    http://justemsi.blogspot.com/2017/06/stars-are-among-us.html

    OdpowiedzUsuń
  33. Przydatne rady, nawet takie drobne zmiany wiele wnoszą. :)
    Chyba skorzystam z tych ciasteczek. :D

    OdpowiedzUsuń
  34. Great post just as your all blog. I think that you are an awesome blogger, and I wish you luck in future! Kisses :* If you want, look my blog and follow me if you like it. <3
    CALLOFBEAUTY
    zrinka_skiljo

    OdpowiedzUsuń
  35. Zna te wszystkei porady i z niektórych tez korzytsałam w szablonie swojego bloga :)

    OdpowiedzUsuń
  36. Dziękuję za ciekawe tricki - napewno część z nich wykorzystamy u siebie... Pozdrawiamy serdecznie <3

    OdpowiedzUsuń

Related Posts Plugin for WordPress, Blogger...