Jak spersonalizować LinkWithin? Cz. 1

LinkWithin to bardzo przydatne narzędzie - o tym jak go zainstalować i do czego służy można przeczytać w poprzednim poście.

Zainstaluj u siebie LinkWithin - jak to zrobić? Dowiesz się TUTAJ

Dzisiaj słów kilka o jego edycji i spersonalizowaniu - tak by odpowiadał naszym oczekiwaniom, 

Wchodzimy w nasz szablon, robimy kopie zapasową szablonu i edytujemy HTML. 

 Tutaj można znaleźć możliwość edycji szablonu w HTML

Na początku zmienimy tekst "You might also like" na "Twój własny tekst" czyli nasz "Tytuł" możesz użyć zamiast niego na przykład "Zobacz również:" czy "Spodoba Ci się także:".

Klikamy "Kontynuuj", wciskamy CTRL+F i szukamy w kodzie 

</head>

Po znalezieniu, linijkę nad </head> wklejamy kod:

<script>linkwithin_text=&#'TWÓJ WŁASNY TEKST';</script>

oczywiście wpisując w niego tekst który chcemy zobaczyć w tytule całego widgetu i klikamy zapisz Szablon. Zobacz o ile lepiej wygląda ten gadżet z polskimi znakami.

Kolejne kroki pozwolą nam na spersonalizowanie gadżetu według własnego widzimisię. Można użyć wszystkich a można tylko jednego - do wyboru do koloru. Każdy kod musi być wklejony w sekcji CSS czyli przed znacznikiem 

]]></b:skin>

 Zmiany jakie wprowadzają dane kody postaram się pokazać obrazkowo. Obraz pod tytułem "Tak było" to obraz zawsze standardowy - przed jakimikolwiek zmianami.

 1. Ten kod pozwoli nam usunąć logo i link widgetu LinkWithin, dodatkowo zmniejsza się odległość od widgetu do stopki

#linkwithin_logolink_0 {
display:none!important;
}
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important; margin: 0 0 20px 0!important;
} 

2. Wpisując ten kod odsuwamy go od stopki o 20px, zamiast 20 możemy wpisać dowolną wartość. Radzę go wkleić jeśli użyliście kodu 1. - wtedy ładniej wszystko wygląda. Obrazka nie będzie bo nie widać prawie zmian.

.linkwithin_outer{
margin: 0 0 20px 0!important;
}

3.Poniższy kod zmienia kolor tekstu Tytułu widgetu. Wystarczy że wkleisz swój kolor zamiast XXXXXX, możesz również zmienić wielkość czcionki zmieniając 16 na inną wartość. Przypominam, że kody kolorów znajdziesz TUTAJ

.linkwithin_text {
color:#XXXXXX!important;
font-size:16px!important;
padding-bottom:5px!important;
}

4. Zmieniając XXXXXX na inny kod koloru zmienisz tło obrazków, zmieniając YYYYYY zmienisz kolor separatora (tej kreski) pomiędzy obrazkami

.linkwithin_posts a {
background:#XXXXXX !important;
border-right:1px solid #YYYYYY!important;
}

5. Poniższy kod zmieni kolor tła który pojawia się po najechaniu myszką na obrazek: Wystarczy zmienić XXXXXX na wybrany kolor:

.linkwithin_posts a:hover {
background:#XXXXXX !important;
} 

Niebawem kolejna część możliwości edycji tego widgetu :)