Gadżety - Top komentatorki z avatarami

Już parokrotnie, dostałam pytanie jak zrobić aby w tak popularnym gadżecie jak Top Komentatorki zrobić aby obok Nicków pojawiały się avatary. Sposobów jest miliard jednak wybrałam dla was ten najprostszy i jak dla mnie najładniejszy wizualnie. Podstawowy efekt uzyskamy w dosłownie 2 sekundy klikając jeden przycisk. Jeśli macie jakieś pytania lub coś jest nie jasne to piszcie w komentarzach :)

Ponieważ jestem grafikiem a nie programistą w przypadku takich tematów jak ten będę posiłkować się innymi (głównie zagranicznymi) stronami gdzie ludzie, którzy się na tym znają tworzą gadżety.  Na jedną z takich stron trafiłam niedawno właśnie w poszukiwaniu odpowiedzi na to jak udoskonalić Top Komentatorki. Strona ma adres: http://bloggeritems.com i niestety jest w języku angielskim i nie każdy musi od razu wiedzieć jak się po niej poruszać. Z tego posta dowiecie się jak z takiej strony skorzystać aby uzyskać taki efekt:

1. Wchodzimy na stronę: http://bloggeritems.com/2012/02/top-commentators-widget-with-avatars.html
2. Znajdziemy na niej formularz taki jak na obrazku niżej:

3. Dla uproszczenia ponumerowałam wszystkie pola i tutaj wytłumaczę co możemy w nie wpisać

1. Link do obrazka który wyświetli się jeśli nasz top komentator nie ma avataru. Domyślnie jest to:

2. Liczba top komentatorek, która ma się wyświetlać (domyślnie 5)

3. Długość tekstu wyświetlanego po najechaniu na nick komentatorki (zostawiamy domyślne)

4. Liczba dni w których ma zbierać dane o komentatorkach np. gdy wpiszemy 7 to gadżet będzie pokazywał nam top komentatorki z jednego tygodnia. Przy domyślnych 30 pokazuje nam dane z miesiąca.

4. Po wypełnieniu wszystkich 4 pól lub zostawieniu ich po prostu tak jak są klikamy żółty przycisk ADD WIDGET.

5. Otwiera się nowe okno widoczne poniżej :

6. Po wypełnieniu obu pól klikamy dodaj widżet. Jeśli nic się nie dzieje (zdarzyło mi się tak dwa razy). Wyłączamy stronę i zaczynamy od punktu nr 1. Zwykle jednak wszystko idzie dobrze i strona przenosi nas do panelu bloggera gdzie w układzie bloga widzimy gadżet pod nazwą podaną jako tytuł.

Dla zaawansowanych!

Większość parametrów tego gadżetu powinna dopasować nam się sama tzn. kolory linków itp będą takie jak wszystkich innych rzeczy na naszym blogu. Jedyne co możemy chcieć zmienić to kolor ramek avatarów. W tym celu wchodzimy w ustawienia bloggera -> układ i klikamy edytuj przy gadżecie z top komentatorkami. Na początku znajdziemy tam taki fragment:

.top_commenters_content img{width: 32px;height: 32px;background-position: center;margin: 3px 3px 0 0;padding: 2px;border: #CCC solid thin;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: inset 0 0 3px #F0F0F0;-webkit-box-shadow: inset 0 0 3px #F0F0F0;box-shadow: inset 0 0 3px #CCC;border-image: initial;}

Ten fragment kodu powyżej: border: #CCC odpowiada za kolor obramowania. Aby go zmienić wystarczy #CCC wymienić dowolnym kolorem który możemy znaleźć np w kreatorze szablonu bloggera. Ja na swoim blogu wymieniłam ten kolor na #000000 czyli na kolor czarny.

Zmiana języka

Możemy też zmienić język z angielskiego na polski. W tym celu ponownie wchodzimy w ustawienia bloggera -> układ i klikamy edytuj przy gadżecie z top komentatorkami. Znajdujemy fragment

// Language define
var Lang_Click_To_View_Profile_Of = 'Click to view profile of ';
var Lang_Comments = ' comments';
var Lang_Comment = ' comment';
var Lang_View_The_Latest_Comment_Of = 'View the latest comment of ';

I zamieniamy dowolnie wyrażenia między ' '. Dla przykładu moje propozycje:
Click to view profile of  - Kliknij aby zobaczyć profil
Comments - komentarzy (to aktualnie nie wygląda dobrze bo u nas wszystko się odmienia i o ile będzie to słowo wyglądało dobrze przy np 6 komentarzy to już przy 3 komentarzy nie brzmi za dobrze)
Comment - komentarz
View the latest comment of - Zobacz ostatni komentarz

Zmiana koloru napisów

Jeśli z jakiegoś powodu kolor napisów w gadżecie nie dopasuje nam się do kolorów na stronie możemy zmienić go ręcznie. W tym celu ponownie wchodzimy w ustawienia bloggera -> układ i klikamy edytuj przy gadżecie z top komentatorkami. Znajdujemy fragment

.top_commenters_info a {color: #666;}

I tutaj tak jak w przypadku ramki wymieniamy: #666 na wybrany przez nas kolor.