ZMIANA WYGLĄDU KART NA BLOGU. PRZYDATNE KODY CSS

Prowadząc swojego bloga dbamy nie tylko o content, ale także o wizualną stronę naszej witryny. Dziś pokaże wam jak w szybki i łatwy sposób zmienić wygląd Kart na blogu przy pomocy kodów CSS. Zapraszam

Zaczniemy od rzeczy, które można zmienić bez użycia kodów. Blogger oferuje nam kilka opcji.

Wchodzimy w Układ > Projektant Szablonów > Zaawansowane:

W zakładce Tło kart możemy zmienić: czcionkę, kolor tekstu i kolor tekstu po zaznaczeniu.

W zakładce Tło kart: kolor tła, kolor tła po zaznaczeniu

W zakładce Akcenty interesuje nas funkcja zmiany obramowania kart

Są to bardzo podstawowe opcje. W praktyce okazuje się, że w większości przypadków niewystarczające. Konieczne jest użycie kodów CSS. Pozostając w tej samej strefie roboczej, wchodzimy w ostatnią zakładkę o nazwie Dodaj arkusz CSS. Tutaj możemy wpisać gotowe kody CSS. Pamiętajcie aby przy wklejaniu gotowego kodu zrobić spacje i ją zlikwidować, ewentualnie kliknąć Enter i backspace. Mówiąc prosto program musi "załapać" zmiany.

1. Wyśrodkowanie kart:

#PageList1 ul { text-align:center; margin:20px}

#PageList1 ul li { float: none; display: inline; }

Oprócz wyśrodkowania dodałam odstęp 20px, jeśli potrzebujecie innego marginesu wpiszcie własną wartość wyższą lub niższą. Możecie też zlikwidować ten fragment.

2. Dodanie własnego obrazka,grafiki obok stron kart:

#PageList1 ul li:before {

content: url(KOD URL NASZEGO OBRAZKA);

margin: 5px}

Własny obrazek, najlepiej zapisany w formacie PNG, z przezroczystym tłem, należy umieścić w serwisie hostującym grafikę, skopiować adres URL i wkleić w miejsce w kodzie.

Pomiędzy kartami dodałam margines 5px, możecie zmieniać swobodnie jego wielkość, lub zlikwidować ten fragment.

3. Zmiana tła kart, marginesy, odstępy, dodanie własnej grafiki w tle:

.tabs-outer {

background-color: pink;

padding: 10px;

margin: 20px; 

background-image: url(KOD URL OBRAZKA);}

1.background-color: pink. Kolor tła, możemy wpisać słownie lub wkleić kod RGB,np.  #ff99ff

2. padding w tłumaczeniu dopełnienie dla elementu, można dowolnie ustawić wartość

3. margin, czyli margines, odstęp. dobieramy pożądaną wartość w px

4.background-image: url(KOD URL OBRAZKA); ustawienie w tle własnej grafiki, obrazka

Po wpisaniu kodu zmiany w wyglądzie kart przedstawiają się następująco:

4.Dodanie ramki wokół tekstu kart

.tabs-outer{

border: 1px solid KOLOR;}

Słowo solid określa rodzaj linii. Możemy tu równie dobrze wpisać:

W ostatnim przypadku mieszamy ze sobą style, należy wpisać taki kod:

.tabs-outer{

border: 1px  KOLOR;

border-style: inset dashed dotted double}

5. Zaokrąglenie rogów ramki:

.tabs-outer{

border: 1px solid;

border-radius: 20px}

Jeśli chcemy bardziej sprecyzować:

.tabs-outer{

border: 1px solid;

border-radius: 15px 45px 5px 6px;}

Jeśli niektórych rogów nie chcemy zaokrąglać stosujemy przykładowo zapis:

.tabs-outer{

border: 1px solid;

border-radius: 15px 45px 0 0;}

Przykład na obrazku poniżej:

6. Zmiana tła kart po najechaniu kursorem myszki:

Opcja 1.

.tabs-outer .widget li a:hover {

background-color:pink;

border-radius: 40px;}

Opcja 2.

.tabs-outer .widget li a:hover {

background-color:pink;

border-radius: 40px;

border-style: dotted ;}

Tak nasze karty wyglądają po zastosowaniu kodów:

Są to podstawowe kody zmieniające wygląd kart na blogu. Oczywiście jest ich dużo więcej. Pamiętajcie ogranicza nas tylko wyobraźnia;)