Kody CSS

Hey , Kochani <3 Tak długo mnie tu nie było , aż się stęskniłam ;* Ferie mijają tak szybko , aż za nimi nie nadąrzam .. Wstaje rano robię to co muszę , zjem coś , obejrzę jakiś film i jest już 20.00 .Boje się powrotu do szkoły i ciągłego stresu przed kartkówkami , już jestem przerażona ;c


~ * ~

Dzisiaj przygotowałam dla Was post o KODACH CSS. Nie każdy wie o co chodzi, więc postaram się wytłumaczyć, a jeszcze bardziej chciałam pomóc początkującym blogerką które nie są  w to wtajemniczone ;) (mimo tg że wiem że ja nie jestem jakąś Świetną Blogerką )


Kody to coś, dzięki czemu blog wygląda lepiej .Są one do dowolnego dopasowania, natomiast ich obsługa jest dość łatwa, prosta i przyjemna. Oczywiście, znać trzeba język kodów, aczkolwiek jest on również prosty, co one same. Trzeba wiedzieć gdzie wstawić jaką wartość, gdzie ile pikseli, gdzie, na przykład "together", a gdzie "separately", gdzie "solid", gdzie "dotted" aczkolwiek po pewnym czasie wydaje się to banalne. W tym poście postanowiłam podać przykład kodów, które z niezmierną prostotą dodawać można na bloga i udekorować nimi jego wizerunek.

Kody CSS:
Wchodzimy w bloggera, wybieramy "szablon",  "dostosuj", następnie "zaawansowane", aż w końcu "dodaj arkusz CSS". W białe pole, które widnieje po prawej stronie wpisujemy kody CSS.

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; 
}
Wszelkie "0.4", "0.70", "1", itp. możemy zamieniać na własne parametry. Warto nieco pokombinować, ażeby uzyskać pożądany efekt. 

Wyśrodkowanie tekstu w prawym pasku bocznym:

.column-right-inner {text-align: center; }

Analogicznie "right - prawy" zamieniamy na "left - lewy" w zależności od tego z której strony znajduje się u Was pasek boczny. Również "center - na środku" możemy zamienić na "right", lub "left", zależy, z której strony chcemy, aby był tekst. 

Podkreślenie postu:

h3.post-title {border-bottom: 1px #000000 solid;}

"1px" możemy zamienić na dowolną wartość, odpowiada to za szerokość podkreślenia. "#000000" odpowiada za kolor podkreślenia. "#" i sześć zer symbolizuje czerń. Rozmaite kolory HTML znaleźć możecie na tej stronie: http://windows.home.pl/kolory.htm. "Solid" odpowiada za styl podkreślenia - czy ma być to podkreślenie linią ciągłą - solid, linią kropkowaną - dotted, czy też linią kreskowaną - dashed. Zmieniamy wedle własnego uznania.

Wyśrodkowanie tytułu posta:

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

"Center" odpowiada za wyśrodkowanie. Można wpisać tam również "right", jeżeli chce się, aby tytuł posta znalazł się z prawej strony, lub "left", jeżeli z lewej.

Cień w tytule posta:

h3.post-title, .comments {text-shadow: 1px 1px 5px}

Piksle zmieniać możemy wedle własnego uznania, odpowiadają one za rozmiary cienia w tytule posta. Automatycznie odpowiada ów kod również za cienie w komentarzach. Jeżeli chce się ich uniknąć zamiast ". comments" wpisujemy ".c". 

Obramowanie komentarza:

.comment .comment-block {
margin-left: 70px;
position: relative;
border: 1px solid #000000;
overflow: hidden;
padding: 15px 20px 5px;
Zmieniać można piksele, odpowiadające za szerokość obramowania oraz kolory (link do palety kolorów HTML podałam powyżej). "Solid" zmieniać możemy na "dotted", bądź "dashed". 

Wyśrodkowanie nagłówka:

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;

Wyśrodkowanie daty:

 h2.date-header {text-align: center;}

"Center" zmieniać możemy na "right", lub "left", w zależności od tego, z której strony chcemy, aby znajdowała się data.

Okrągłe awatary w komentarzach:

.avatar-image-container { shadow:none; border: none; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin: .2em 0 0; }
Oczywiście można zmieniać wartości, odpowiadające za wysokość i szerokość.
~ * ~

To już wszystko. Mam nadzieję, że ten post okazał się być dla Was przydatny. W razie jakichkolwiek problemów skontaktujcie się ze mną na maila, a ja z chęcią Wam pomogę. 

Chcielibyście więcej takich postów ?


17 komentarzy:

  1. Bardzo ciekawy post :) I fajny blog
    Zapraszam do mnie może akurat Ci się u mnie spodoba ( zachęcam do zaobserwowania )
    key-tina.blogspot.com

    OdpowiedzUsuń
  2. Przydatny post, rób takich więcej . ;))

    OdpowiedzUsuń
  3. Jej na prawdę mi pomogłaś, na pewno będę czekać na kolejny < 3
    http://weru-blog.blogspot.com/

    OdpowiedzUsuń
  4. Może małe obserwowanko. Jesli tak daj znac..
    olaaaa1792.blogspot.com

    OdpowiedzUsuń
  5. Super,bardzo przydatny post,sama się chyba tak pobawię w wolnej chwili :)
    Pozdrawiam

    biszkopcik86.blogspot.com

    OdpowiedzUsuń
  6. przydadzą mi się te twoje rady ;*
    dziękuje .
    może wspólna obserwacja ?
    mint-strawberry.blogspot.com

    OdpowiedzUsuń
  7. I tak tgo nie ogarniam. :c
    http://veronicablogger7.blogspot.co.uk/

    OdpowiedzUsuń
  8. No tak! Wreszcie ktoś mi objaśnił, przydadzą się ;)

    OdpowiedzUsuń
  9. Bardzo przydatny post. Pozdrawiam : ) http://jusinx.blogspot.com/

    OdpowiedzUsuń
  10. Dzięki za ten post :D teraz czas na poprawki ^^

    OdpowiedzUsuń
  11. Dziękuje za post dużo się dowiedziałam <3!!!

    OdpowiedzUsuń
  12. Przydatne kody ! <33
    http://milenaabloog.blogspot.com

    OdpowiedzUsuń
  13. Świetny post! Z pewnością wykorzystam niektóre z tych kodów :)
    perfectlyunfabulousblog.blogspot.com

    OdpowiedzUsuń
  14. Świetne i pomocne! :3 jestem pewna, że wykorzystam niektóre kody ♥

    OdpowiedzUsuń
  15. a Znasz kod na przycienienie zdjęcia po najechaniu na nie ? jeżeli ktoś zna odpowiedź bardzo bym prosił o pomoc denerwuje mnie też wykropkowana linia -------------------------------- która znajduje się na samym dole bloga tam gdzie stopka też najchętniej bym się jej pozbył :( http://radoksofficial.blogspot.com

    OdpowiedzUsuń
  16. Świetny post i bardzo przydany, czekam na więcej. :)

    dodatki-nastolatki.blogspot.com

    OdpowiedzUsuń