Jak mieć ładnego bloga? - Czyli najprzydatniejsze kody CSS

Hejka!

Zapewne wiecie, że sama, jakże wspaniała i kreatywna treść nie wystarczy, aby przyciągnąć czytelników. Większość osób, odwiedzających blogi, lubi poruszać się w estetycznej witrynie. Warto zaznaczyć, że odpowiednio zmodyfikowany tekst, również łatwiej się czyta. Poniżej przedstawię, kilka przydatnych kodów CSS, które większość zapewne zna i wykorzystuje na swoich blogach. Wierzę jednak, że komuś kiedyś one się przydarzą. :)

1. Gdzie wpisujemy/wklejamy kody CSS?

Wystarczy, że wejdziemy na naszego bloga a następnie, w 'Projekt' na górnym pasku. Kolejnym krokiem, jest naciśnięcie 'Dostosuj' -> 'Zaawansowane' -> 'Dodaj arkusz CSS'.

2. Wyrównanie tekstu

Mamy cztery rodzaje, automatycznego wyrównania tekstu.

♥ WYŚRODKOWANIE -> .column-center-inner {text-align: center;}

♥ WYRÓWNANIE DO LEWEJ -> .column-center-inner {text-align: left;}

♥ WYRÓWNANIE DO PRAWEJ -> .column-center-inner {text-align: right;}

♥ WYJUSTOWANIE -> .column-center-inner {text-align: justify;}

3. Ramki w poście

♥ Linia ciągła -> .post {border-style: solid;}

♥ Linia kropkowana -> .post {border-style: dotted;}

♥ Linia podwójna -> .post {border-style: double;}

♥ Linia kreskowana -> .post {border-style: dashed;}

Warto znać, również kod na grubość linii -> .post {border-width: 2px;}

WARTOŚĆ 2PX MOŻNA ZMIENIAĆ.

Oraz na kolor linii -> .column-center-inner {border-color: #000000;}

WARTOŚĆ #000000 MOŻNA ZASTĄPIĆ CHOĆBY Z TEJ STRONY

4. Wyśrodkowania

♥ tytułu posta -> h3.post-title {text-align: center;}

♥ daty -> .date-header {text-align:center;}

♥ tekstu w prawej kolumnie -> .column-right-inner {text-align: center; }

5. Usunięcie napisu "Technologia Blogger" na dole strony -> .Attribution { display:none; }

6. 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;

}

7. Rozjechanie się literek po najechaniu na nie kursorem -> a:hover { letter-spacing: 3px; }

8. Efekty po najechaniu kursorem na zdjęcie

♥ zamglenie

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

♥ czarno-białe

.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%); }

♥ powiększenie

.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);

}

Pozdrawiam, M.

blogspot

17 komentarze

Ewa_S11/28/2017
Świetny pomysł z kodami☺
Ja raczej nie skorzystam-boje się że coś poprzestawiam😊
Jednak szczerze przyznam że Twój blog wygląda ślicznie i bardzo przyjemnie się go ogląda😍💞☺
Pozdrawiam
Lili-93.blogspot.com
OdpowiedzUsuń
Odpowiedzi
Po prostu Kasia11/28/2017
Dziękuję za ten wpis <3
OdpowiedzUsuń
Odpowiedzi
Paweł11/28/2017
Świetny pomysł z tymi kodami. Na pewno nie jednemu użytkownikowi się przydadzą;).
Mnie zainteresował ten z efektami na zdjęcie. Jak znajdę chwilę, to spróbuję się tym pobawić.
Zostaję z Tobą na dłużej!
Pozdrawiam
zmienicswiat.blogspot.com
OdpowiedzUsuń
Odpowiedzi
Bloomy Witch11/28/2017
bardzo przydatny post, skorzystam :)
https://anothergirlinthesea.blogspot.com/
OdpowiedzUsuń
Odpowiedzi
_cup_11/28/2017
oj może coś zmienię we wyglądzie mojego bloga
zapraszam
mój blog |KLIK|
OdpowiedzUsuń
Odpowiedzi
JUST EMSi11/28/2017
ja w sumie w swoim szablonie nie wprowadzam zadnychz zmian bo boje sie ze cos zepsuje hahhaah

https://justemsi.blogspot.com/
OdpowiedzUsuń
Odpowiedzi
Sheira11/29/2017
Przydatne ;) Na razie nie zamierzam już nic w kodzie szablonu kombinować, ale może kiedyś wrócę do tego wpisu ;)
OdpowiedzUsuń
Odpowiedzi
Paulan11/29/2017
Kiedyś napisałam podobny post :) Takie poradniki są bardzo przydatne dla osób, które nie znają się na tym :)
http://paulan-official-blog.blogspot.com/
OdpowiedzUsuń
Odpowiedzi
Anks_blog11/29/2017
Zdecydowanie taki post jest bardzo przydatny. Ładny blog to podstawa :) Kody zawsze się przydają :)
Mój blog - Klik
OdpowiedzUsuń
Odpowiedzi
Klaudia Nieścioruk11/29/2017
Świetny post, bardzo mi się przydał! :) Cieszę się, że tu trafiłam :)

klaudia-niescioruk.blogspot.com
OdpowiedzUsuń
Odpowiedzi
Klaudencja11/29/2017
Bardzo ciekawe zdjęcia, wyglądasz naprawdę rewelacyjnie <3

ZAOBSERWUJ: Klaudencja.blogspot.com
OdpowiedzUsuń
Odpowiedzi
Window of Fashion by Moni11/29/2017
Fajne tipy! Interesujący jest efekt zamglenia zdjęcia. :) Jak na razie nie planuję wprowadzać ulepszeń, żeby czegoś nie zepsuć. :D
OdpowiedzUsuń
Odpowiedzi
Improve your life11/29/2017
Przydatny wpis, do którego pewnie będę w miarę potrzeby wracać:) Obserwuję.
OdpowiedzUsuń
Odpowiedzi
Jovana Tomic11/30/2017
Very interesting post and nice photo... kisses

Follow for follow? <3

http://www.ioannesstyle.com/

Can follow one each other on:
Bloglovin: https://www.bloglovin.com/blogs/ioannes-style-19150239
Instagram: https://www.instagram.com/ioannes_style/
OdpowiedzUsuń
Odpowiedzi
Aleksis-Aliss11/30/2017
Bardzo przydatny post :)

Zapraszam do mnie:
BLOG

INSTAGRAM
OdpowiedzUsuń
Odpowiedzi
Cake Monika12/03/2017
Bardzo fajny oraz przydatny post!

Zapraszam cakemonika.blogspot.com :)
OdpowiedzUsuń
Odpowiedzi
Martyna Kochanowska12/11/2017
Teraz już wiem dlaczego masz taki piękny blog :)

Pozdrawiam
OdpowiedzUsuń
Odpowiedzi