20 sty 2015

Przydatne kody CSS na bloga

Hej, hej, hej! :)
Dzisiaj przychodzę do Was z postem dotyczącym szablonu blogowego, a mianowicie jak go zmienić i ulepszyć. Przedstawię Wam kilka kodów, z których korzystam, które są pomocne lub które uważam za warte pokazania. Myślę, że taki post będzie przydatny, bo każdy by chyba chciał u siebie coś ulepszyć lub samemu zrobić sobie szablon, a to wcale takie trudne nie jest, wystarczy się obeznać właśnie z kodami HTML i CSS oraz trochę pokombinować. :)


Na początek typowo muszę Wam powiedzieć, gdzie trzeba te kody wpisywać (nie każdy to wie). A więc Szablon >>> Dostosuj >>> Zaawansowane >>> Dodaj arkusz CSS. 
Ja używam aktualnie 8 kodów i wszystkie są mi potrzebne, nie mam jakiś pierdółek i niepotrzebnych bzdetów. 
Wszystkie wartości, np. 8px, możemy dowolnie zmieniać!


h3.post-title {text-align: center;}
Wyśrodkowanie tytułu posta. Możecie zmienić center na right - tytuł przesunie się na prawo, lub na left - lewo.


.column-right-inner {text-align: center; }
Wyśrodkowanie tekstu w prawej kolumnie. Zamiast prawej kolumny możecie dać lewą (left), zależy jaką macie, a zamiast wyśrodkowania right lub left (tekst na prawo lub lewo).



.date-header {text-align:center;}
Wyśrodkowanie daty; tak jak w powyższych przypadkach można ją umieścić też z prawej lub lewej strony.



h3.post-title {border-bottom: 1px #000000 dotted;}
Podkreślenie tytułu posta, ja mam dotted, czyli wykropkowaną linię, a Wy możecie ustawić także solid - linię ciągłą lub dashed - linię kreskowaną.



.post-body {text-align: justify;}
Wyjustowanie tekstu w poście. Polecam używanie tego kodu, gdyż wtedy lepiej się czyta notki. ;)



body .main-inner .Blog {margin-top: -8px;}
Wysokość nagłówka



.Attribution {  display:none; }
Usunięcie napisu ''Technologia Blogger'' na dole strony.



.sidebar .widget { border:0px white; margin-bottom: -20px; margin-left:-41px; width:229px;}
Nie mam pojęcia, jak wytłumaczyć ten kod, nie pamiętam nawet skąd go wzięłam, przeszukanie stron nawet nie pomogło! Mniej więcej chodzi o ustalenie odległości od posta i gadżetów oraz o odległość pomiędzy gadżetami. 
Najlepiej będzie to przedstawić na screenie przed i po kodzie : 


Inne:


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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Mam nadzieję, że któryś z kodów Wam się przydał/kiedykolwiek przyda. Jeśli chcecie drugą część, w której pokazałabym jeszcze inne kody, napiszcie w komentarzu, a ona być może się pojawi. :)

25 komentarzy:

  1. Bardzo przydatny post! Sama niedawno takich szukałam:)

    OdpowiedzUsuń
  2. Przydatne kody :)

    http://weraweronika.blogspot.com/2014/12/niespodzianka-konkurs.html

    OdpowiedzUsuń
  3. Świetny post! Mam nadzieję, że porady się komuś przydały, mi osobiście niezbyt, bo w sumie mam już design, HTML i CSS na bloggerze opanowane do perfekcji, ale chętnie czytam instrukcję blogerek :3. Może akurat będzie coś ciekawego, czego jeszcze nie umiem. Buziaczki kochana.

    Wpadnij do mnie. ♥
    malinowe-ciasto.blogspot.com

    OdpowiedzUsuń
  4. mega przydatny post, ja skorzystam z kilku kodów na pewno, dzięki :3
    Zaobserwowałam, miło by było gdybyś sie odwdzięczyła <3
    donutworrybehappy.blogspot.com - zapraszam do mnie, najnowszy post z kosmetycznymi ulubieńcami ;)

    OdpowiedzUsuń
  5. Pomocne! ♥ :) Dzięki.
    Bardzo fajny blog!! :) .
    -------------------------------------------
    Kliknęłabyś w bannery romwe, sheinside w bocznym pasku,?
    Mój Blog - klik!
    Ja się zrewanżuję tym samym lub obserwacją( jak mi się spodoba twój blog! .
    napisz jak kliknęłaś w banner sheinside w ostatnim poście.! ( sprawdzam ).
    --------------------------------------------------------------

    OdpowiedzUsuń
    Odpowiedzi
    1. Więcej reklamy niż samego skomentowania treści posta, także nie licz, że kliknę.

      Usuń
  6. Bardzo przydatne, sama często wykonuję designy i wiem, że kody to podstawa :)

    izilleys.blogspot.com

    OdpowiedzUsuń
  7. Przydatne! Bardzo!
    niuntis.blogspot.com

    OdpowiedzUsuń
  8. znam te wszytskie kody, które wymieniłaś :)

    Serdecznie Zapraszam♡
    pisanepasja.blogspot.com - kliknij tu!

    OdpowiedzUsuń
  9. Bardzo fajny blog! Dodajemy do obserwowanych i zapraszamy do siebie!
    http://justmakeyourstyle.blogspot.com/

    OdpowiedzUsuń
  10. Naprawdę pomocne :)
    Czy poświęcisz chwilkę na kliknięcie w zdjęcie w ostatnim poście ? Byłabym wdzięczna
    najaablog.blogspot.com

    OdpowiedzUsuń
  11. Przydatny post :)
    www.blog017.blogspot.com - serdecznie zapraszam ♥

    OdpowiedzUsuń
  12. Przydatny post :)
    Kody na pewno wielu osobom się przydadzą ;)

    justlife-jurka.blogspot.com

    OdpowiedzUsuń
  13. Bardzo fajny wpis! będe tutaj zaglądać :)
    Pozdrawiam! :))
    MalinowaMamba - klik

    OdpowiedzUsuń
  14. Bardzo przydatne :3
    http://onlydreams8.blogspot.com/

    OdpowiedzUsuń
  15. Bardzo przydatne kody! Super notka :)

    takeiteasy-a.blogspot.com

    OdpowiedzUsuń
  16. Cieszę się, że do Ciebie zajrzałam, bo właśnie takie kody będą mi teraz bardzo potrzebne. Chcę zmienić wygląd bloga, ale gotowe szablony nie zawierają w sobie tego, co jest mi potrzebne.
    A pisałaś może post jak dodać na pasku bocznym zdjęcie i opis? Ja mam aktualnie dodany gadżet połączony z kontem Google +, a chciałabym to zmienić.

    CROWDED DREAMS

    OdpowiedzUsuń
  17. Dziękuuuuję *-* Użyłam większość, dzięki temu mam piękniejszego bloga! :D
    Pozdrawiam

    OdpowiedzUsuń
  18. Dzięki za Twoje rady! Dzieki Tobie moj blog wygląda jak wygląda! Zapraszam! https://artyikrafty.blogspot.com/

    OdpowiedzUsuń

Na komentarze odpowiadam TUTAJ.
Nie uznaję obserwacji za obserwację, ani spamu typu ''Świetny post linkxyzdf.blogspot.com'', takie komentarze będą jak najszybciej usuwane.