~ * ~
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 ?
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;
}
margin-left: 70px;
position: relative;
border: 1px solid #000000;
overflow: hidden;
padding: 15px 20px 5px;
}
margin-left:auto;
margin-right:auto;
}
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;
}
~ * ~
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 ?
Bardzo ciekawy post :) I fajny blog
OdpowiedzUsuńZapraszam do mnie może akurat Ci się u mnie spodoba ( zachęcam do zaobserwowania )
key-tina.blogspot.com
Przydatny post, rób takich więcej . ;))
OdpowiedzUsuńJej na prawdę mi pomogłaś, na pewno będę czekać na kolejny < 3
OdpowiedzUsuńhttp://weru-blog.blogspot.com/
Może małe obserwowanko. Jesli tak daj znac..
OdpowiedzUsuńolaaaa1792.blogspot.com
Super,bardzo przydatny post,sama się chyba tak pobawię w wolnej chwili :)
OdpowiedzUsuńPozdrawiam
biszkopcik86.blogspot.com
Przydatna notka ;)
OdpowiedzUsuńprzydadzą mi się te twoje rady ;*
OdpowiedzUsuńdziękuje .
może wspólna obserwacja ?
mint-strawberry.blogspot.com
I tak tgo nie ogarniam. :c
OdpowiedzUsuńhttp://veronicablogger7.blogspot.co.uk/
No tak! Wreszcie ktoś mi objaśnił, przydadzą się ;)
OdpowiedzUsuńBardzo przydatny post. Pozdrawiam : ) http://jusinx.blogspot.com/
OdpowiedzUsuńDzięki za ten post :D teraz czas na poprawki ^^
OdpowiedzUsuńDziękuje za post dużo się dowiedziałam <3!!!
OdpowiedzUsuńPrzydatne kody ! <33
OdpowiedzUsuńhttp://milenaabloog.blogspot.com
Świetny post! Z pewnością wykorzystam niektóre z tych kodów :)
OdpowiedzUsuńperfectlyunfabulousblog.blogspot.com
Świetne i pomocne! :3 jestem pewna, że wykorzystam niektóre kody ♥
OdpowiedzUsuń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ńŚwietny post i bardzo przydany, czekam na więcej. :)
OdpowiedzUsuńdodatki-nastolatki.blogspot.com