O co chodzi?

Potrzebujesz grafiki na swojego bloga?
Banera, tła, drobnych elementów czy całego szablonu? Nie ma problemu. Grafika zajmuje się od paru lat i mogę zaoferować Ci coś wykonanego profesjonalnie i tylko dla Ciebie.


piątek, 26 października 2012

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

18 komentarzy:

  1. A ja mam inny problem z LinkWithin - pod każdą notką pokazuje mi linki do tych samych notek.... sprawdzałam u innych, i tam przy każdym poście są linki do innnych postów....nie wiem o co chodzi :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Z chęcią bym pomogła ale niestety nie widze u Ciebie w ogóle lInkWithin :< Musiałabyś go najpierw wgrać zebym zobaczyła co tam się dzieje.

      Usuń
    2. Nie miałam go, właśnie z tego powodu. Ale dzisiaj go wrzuciłam ponownie i......działa. Nie wiem z czym był wcześniej problem.

      Usuń
    3. Hej! mnie również pokazują sie te same linki pod każdym postem. Bardzo proszę o pomoc!!!!!!! Jak sobie z tym poradzić.
      Http://maisondereve_pl.blogspot.com

      Usuń
  2. Dziękuję Ci za pomoc:* już to zmieniłam ^^

    OdpowiedzUsuń
  3. Kasiu moja kochana poproszę kalendarzyk na listopad ^^

    OdpowiedzUsuń
  4. A mogłabyś podać kod żeby kwadrat był z zaokrąglonymi rogami :)

    OdpowiedzUsuń
    Odpowiedzi
    1. trzeba zmienić 60px na mniejszą liczbę np. 5px i wtedy będą zaokrąglone rogi:)

      Usuń
  5. Szukałam szukałam i w końcu znalazłam przydatny post jak zmienić kwadraty na koła:) I działa:)

    OdpowiedzUsuń
  6. użyłam i bardzo dziękuję :) wszystko prosto i na temat :D

    OdpowiedzUsuń
  7. jeśli chcę zrobić :
    Zmiana kształtu miniatur z kwadratów na koła\

    to nie wiem dokładnie w której linijce kodu mam to wkleić? Albo co zastąpić?

    OdpowiedzUsuń
  8. a czy jest sposób na wyśrodkowanie całego paska, żeby ładniej to wyglądało pod postem ?

    OdpowiedzUsuń
  9. Witam,
    mam ogromną prośbę. Jeśli jest to możliwe , to czy mogłabyś podać mi kod, który zmieni wygląd gadgetu niemal identycznego z linkwithin tj.nrelate?
    Chciałabym, aby zdjęcia mały okrągły kształt.
    Dzękuję i pozdrawiam, ania ka
    mój blog www.lobzovkajestdzis.blogspot.com

    OdpowiedzUsuń
  10. wszystkim z problemem LinkWithin zapraszam tutaj : http://trytodesign.blogspot.com/2014/05/problemy-z-linkwithin-przesiadka-nrelate.html

    OdpowiedzUsuń
  11. A ja nie potrafię sobie dodać takiego gadzetu na bloga :(
    A bardzo by mi się przydał ...

    OdpowiedzUsuń
  12. Przydał mi się wpis :) Dziękuję :) A czy masz może kod na wyśrodkowanie tego? ponieważ gry wpisuję kody z innych blogów to mi nie działają :( chciałabym tez usunąć kreski między tymi postami proponowanymi, pomożesz?:)

    OdpowiedzUsuń