Jak zaokrąglić rogi zdjęć obrazków na blogspocie?

Okrągłe obrazki na blogu

Atrybutem css, który powoduje zaokrąglanie obrazków jest:

border-radius: 5px 10px 15px 20px;

gdzie kolejne wartości oznaczają:

- lewy górny róg: 5px

- prawy górny róg: 10px

- prawy dolny róg: 15px

- lewy dolny róg: 20px

Im większa wartość wyrażona w px (czyli pikselach) tym większe zaokrąglenie.

Aby wszystkie rogi były jednakowo zaokrąglone należy użyć takich samych wartości np:

border-radius: 10px 10px 10px 10px;

Jak zaokrąglić obrazki w pasku gadżetów bloga?

Aby zaokrąglić wszystkie zdjęcia, we wszystkich gadżetach paska bocznego należy użyć kodu:

.sidebar img {border-radius: 10px 10px 10px 10px;}

Jak zaokrąglić zdjęcie profilowe (avatar) na bloggerze?

Aby zaokrąglić tylko zdjęcie profilowe w bloku O mnie, czyli gadżecie Profil należy użyć kodu:

.profile-img { border-radius: 45px 45px 45px 45px; }

Gdzie wstawić kody?
Skopiuj wybrany kod (powyżej). Następnie przejdź do swojego bloga. Wejdź w Szablon, potem kliknij przycisk Dostosuj:

Kliknij opcję Zaawansowane i przewiń suwak na sam dół. Teraz wybierz Dodaj arkusz CSS. Wklej teraz skopiowaną zawartość:

 

kliknij na obrazek, aby go powiększyć

Pod tym oknem masz podgląd swojego bloga. Widzisz tu wprowadzone zmiany, sprawdź jak wyglądają teraz zaokrąglane przez ciebie obrazki. Jeśli chcesz zwiększyć ich zaokrąglenie zwiększasz wartości px w kodzie, jeśli chcesz aby zaokrąglenie było delikatniejsze to zmniejsz wartości. Aby zachować zmiany kliknij pomarańczowy przycisk Zastosuj do bloga. Możesz teraz wrócić do bloga klikając Powrót do Bloggera.

... już niedługo więcej przykładów