Tutorial - Zmiana wyglądu LinkWithin

Post miał być rano jednak z trudem wyrobiłam się aby dodać go w ogóle jeszcze dzisiaj :). Przygotowałam krótki  tutorial jak zmienić wygląd miniatur w LinkWithin na okrągłe oraz jak zmienić tekst pod tymi miniaturami. Nie miałam pomysłu przyznam co jeszcze mogłoby wam się przydać więc jeśli ktoś ma jakieś pytania to komentarze czekają :). Z chęcią zedytuje tego posta i dodam odpowiedzi. Jeśli coś jest nie jasne -pytać! ^^

Wstęp, czyli jak użyć tego co zaraz podam

Wszystkie zmiany będziemy wprowadzać tak samo. Przygotowałam gotowe fragmenty kodu które trzeba wkleić w następujące miejsce.
Wchodzimy w ustawienia bloggera -> Szablon -> Pomarańczowy przycisk 'Dostosuj' -> Zaawansowane.
W zaawansowanych wybieramy opcje ostatnią czyli 'Add CSS' lub 'Dodaj własny arkusz CSS'. Gotowy kod wklejamy w okienko po prawej.

W niektórych przypadkach będzie możliwość wybrania jaki kolor ma mieć dany element. Kolory w kodzie możemy podawać używając ich angielskich nazw lub domyślnie kodu który składa się ze znaczka  # i sześciu cyfr/liter. Taki kod możecie sobie zdobyć wybierając inną opcje w miejscu w którym już jesteśmy np Linki lub Tło. Przy każdym kolorze mamy wtedy odpowiadający mu kod który możemy skopiować.

Część właściwa czyli zmiana wyglądu LinkWithin

Zmiana kształtu miniatur z kwadratów na koła

Wystarczy skopiować i wkleić poniższy kod:

.linkwithin_posts a div div {

-webkit-border-radius: 60px;

-moz-border-radius: 60px;

border-radius: 60px;

}

Tekst pod miniaturą

Ponieważ tekst pod miniaturą możemy zmienić znacznie bardziej niż kształt miniatur jest to troszkę bardziej skomplikowane. Mamy tutaj bazowy kod odpowiadający za ten tekst

.linkwithin_title {

Tutaj wklejamy parametry które chcemy

}

I parametry które wklejamy w jego środek.

Wyśrodkowanie tekstu

text-align: center;

Zmiana koloru

color: #000000 !important;

gdzie: #000000 możemy zastąpić dowolnym kolorem

Pogrubienie tekstu

font-weight: bold !important;

Wielkość tekstu

font-size:16px !important;

Tekst pisany tylko dużymi literami

text-transform: uppercase;

Możemy stosować kilka parametrów na raz np jeśli chcemy mieć pogrubiony wyśrodkowany tekst kod będzie wyglądał tak:

.linkwithin_title {

text-align: center;

font-weight: bold !important;

}