2 marca 2013

Zmiana avatarów komentatorów anonimowych

Notka szybka, ale przydatna! (Czyli jak zawsze... -,-)
Często jest tak, że wchodzimy na swojego bloga, patrzymy na komentarze i... jesteśmy bardzo niezadowoleni.
Zazwyczaj przypływ nowych opinii bardzo nas cieszy, jednak - zwłaszcza dla początkujących bloggerów - estetyka będzie się wydawała w pewnym stopniu zaburzona. Spójrzmy:
Wycięłam treść komentarza
 Oto standardowy avatar komentującego Anonima. Brzydactwo. Niby uniwersalny - a jednak nie pasuje ani do bloga fantasy, ani do sweet blogaska, ani do mrocznego pamiętnika. Zastosowałabym go chyba tylko do jakichś blogów informacyjnych. Hm. Tak, perfekcyjnie by pasował.
Tylko, co zrobić, jeśli nie prowadzimy bloga z wiadomościami?
Zanim przejdę do naszej instrukcji, przedstawię coś jeszcze.

Niestety, nie znalazłam nigdzie takiego przykładu, więc zrobiłam screena z jakiegoś innego bloga.
 Poznajecie? To brzydkie, pomarańczowe logo Bloggera, przyklejone jako avatar do komentarza...
Czyżby pozostało nam tylko płakać? Pisać petycje do Bloggera, żeby zmienił to ohydztwo?
Otóż nie.
Zerknijcie poniżej:
Anonimowy użytkownik
Użytkownik z profilem Bloggera, ale bez avatara
Na blogu fantasy pomyślałam, że powinnam dać jakieś klimatyczne avatary - plus, żeby zachować tę "anonimowość", postarałam się znaleźć obrazy zakapturzonych postaci (tutaj dodatkowy przykład - z zasłoniętą twarzą). Oczywiście, podejrzewałam, że większość moich odbiorców będzie płci żeńskiej, więc biedny Mietek mógł poczuć się trochę jak zniewieściały. Z początku miałam ochotę dać jakieś paskudztwo, żeby ludziom odechciało się komentować z Anonimów (przynajmniej poczytałabym ich blogi z dzikiej ciekawości...), ale pomyślałam, iż to może być jeden krok za daleko. ;D
Jak to zrobić?
Na samym początku najlepiej znaleźć obrazki. Możemy poszperać na stronach, gdzie oferują nam avatary 100px na 100px. Możemy też wyciąć taki kwadrat z większego obrazka/zdjęcia.
Przykłady:
Cloud <3


Taki znany fotomontaż, że już mi się znudził xD

Potrzebujemy bezpośredniego linku do naszego obrazka.

1. Zapisz swój szablon. Naprawdę - zapisz go. Jak tu coś Ci nie wyjdzie, to później zapanuje taki chaos, że nie jesteś sobie w stanie wyobrazić. W celu zapisania szablonu wchodzisz w Panel Nawigacyjny > Szablon > na górze jest opcja Zapisz/Przywróć kopię zapasową > Pobierz pełny szablon. Zacznie się pobieranie małego pliczku.
2. Panel nawigacyjny > Szablon > Edytuj kod HTML > Rozszerz szablony widżetów.
3. Odszukaj kawałek kodu. Kliknij Ctrl + F i wklej to w pole wyszukiwania:

</body>

(wcześniej tu był inny urywek kodu - teraz powinno być dobrze)
Wciśnij Enter. :)
Teraz spójrz nad wyszukaną frazę i wklej to, co jest poniżej. Całość, która nas interesuje, powinna wyglądać tak (nie patrz na zaznaczone kolorem linki, bo masz inne - musisz je zamienić na swoje):

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;http://photos.nasza-klasa.pl/35706573/1/square/6f743eb4fa.jpeg?v=0&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;http://avatarmaker.net/free-avatars/avatars/nature_217/scenery_275/autumn_fantasy_avatar_100x100_23467.jpg&#39;)
.ssyby(&#39;blank&#39;)
</script>

Na żółto (teraz widzę, że to bardziej pomarańcz...) zaznaczyłam link do avatara anonimowego użytkownika. Skasuj go i wklej swój link do wybranego avatara znalezionego w sieci (lub zuploadowanego na jakiś serwer hostujący ^^).

Na różowo zaznaczyłam drugi link - jeśli go podmienisz, zmienią się avatary użytkowników posiadających konto Bloggera, ale niemających wgranej ikony.

4. Zamykamy oczy, mówimy "działaj, działaj!" i dajemy Zapisz. No dobra, początek tego punktu można pominąć. :)

67 komentarzy:

  1. Ojej.
    A ja myślałam, że to jakaś wyższa magia, której nie ogarnę i po którą nie wolno mi nawet sięgnąć, a tu się okazuje, że banał nad banałami.

    OdpowiedzUsuń
  2. A ja chyba jestem tępa, bo nie umiem tego zrobić ;c

    OdpowiedzUsuń
    Odpowiedzi
    1. W którym punkcie napotykasz problem? :)

      Usuń
    2. Ja nie mogę znaleźć punktu "body", nie wyskakuje ;-;

      Usuń
    3. W tym nowym HTMLu musisz najpierw kliknąć w pole z kodem HTML, a później kliknąć Ctrl + F, wtedy w HTML pojawi Ci się wyszukiwarka.
      Widzę u Ciebie body (w pierwszym blogu z Twojej listy).
      Jeśli nie znajdziesz i tak, to proszę mi wysłać szablon na maila oraz linki do tych avatarów, jakie chcesz wkleić. Już jednej dziewczynie to zrobiłam.

      Usuń
  3. U mnie w kodzie w ogóle nie znajduje takiej frazy O.o

    OdpowiedzUsuń
    Odpowiedzi
    1. Wyślij mi na maila swój szablon, bo z przeglądarki chyba nie mam pełnego dostępu do Twojego bloga.

      Usuń
  4. Mi tak samo nie znajduje:/

    OdpowiedzUsuń
    Odpowiedzi
    1. Już wiem, jaki lapsus popełniłam ;D Za sekundę edycja.

      Usuń
  5. Powiedzcie mi ludzie, co ja wtedy piłam... >o>

    OdpowiedzUsuń
  6. Nie mogę tego znaleźć... Może przez zmieniony kod?

    OdpowiedzUsuń
    Odpowiedzi
    1. /body
      ?
      O.O Musisz to mieć! Zaraz popatrzę.

      Usuń
    2. Przecież masz ^.^ Kliknij myszką nad /body i wklej tam ten długi kod, który mam w poście ^^

      Usuń
    3. Taaa... ja niekumata jak zwykle o.o
      Dzięki za zwrócenie mi na to uwagi :3

      Usuń
  7. Nigdy nie próbowałam - nawet o tym nie pomyślałam (mało osób komentuje z wordpresa), ale myślę, że wiem jak to zamienić...
    Ale to trochę ryzykowne =o= Musiałabym najpierw przetestować. Za chwilę to zrobię i odpiszę czy mój pomysł działa.

    OdpowiedzUsuń
  8. Bosz, nie mogę tego przetestować, bo nie mam nikogo z kontem na Wordpressie >o<
    Ten pomysł jest trochę ryzykowny :S
    Wyszukaj w HTMLu taką frazę:
    http://img1.blogblog.com/img/openid36-rounded.png

    To link, pod którym jest avatar wordpressa. Myślę, że jeśli zamieniłabyś go (we wszystkich miejscach) z linkiem do innego avatara, to może zadziałałoby... Ale zapisz koniecznie szablon najpierw :S
    O, Usa x Seiya <3 Maj fejwryt.

    OdpowiedzUsuń
  9. O! A ja poproszę jeszcze o instrukcje jak zmienić kursor myszki na taki, jaki mi się podoba (swoją drogą, mogłabym mieć zamiast kursor Bolesława Prusa? :D)

    i o wyjaśnienie, nie tylko w komentarzu, ale w nocie jak zrobić to coś na menu jak ty masz, bo kiedyś czytałam, że to nagłówek czy jakoś tak, ale bardzo mnie interesuje, jak to zrobiłaś :D

    OdpowiedzUsuń
  10. Nie masz? O.O Przecież wg bloggera, to masz x'D Wyślij mi szablon na maila ^^

    OdpowiedzUsuń
  11. Dobrze, Prusie, to mam już trzy pomysły na posty... x'D Myślę, że mogłabyś mieć Prusa za kursor, ale byłby niewygodny w operowaniu. Np. mi o wiele łatwiej się klika, jeśli obrazek ma jakąś mini strzałkę obok ^^

    OdpowiedzUsuń
  12. Masz cudownego Bloga. ^^ PIsz tak dalej. Polecę go znajomym na pewno i będę cię odwiedzac. :)

    OdpowiedzUsuń
  13. Będę Cię wielbić przez wieki za stworzenie tego bloga i tej instrukcji. x'D Wszyściutko działa perfekcyjnie, świetnie tłumaczysz. Po prostu cud, miód i Harry Potter. ^^ Mogę się spodziewać szybkiego nadejścia nowej notki?

    OdpowiedzUsuń
    Odpowiedzi
    1. ^o^ Yeaah!
      Tak, chociaż mam teraz (znowu) nawał pracy na uczelni. Kolejna notka będzie o suwakach - nie tylko w poście. Notka sama nie będzie długa, tylko muszę mieć dużo screenów ^^
      Jeśli ktoś ma jakieś pytania, to ja bardzo często sprawdzam pocztę i widzę czy się tu pojawił jakiś komentarz, czy może ktoś miał problem i napisał mi maila. ^^

      Usuń
  14. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  15. a i mam jeszcze jedną sprawę :o : http://zapytaj.onet.pl/Category/007,010/2,23800453,BlogspotBlogger__jak_zmienic_kolor.html

    OdpowiedzUsuń
    Odpowiedzi
    1. Nigdy nie używałam tego gadżetu, ale myślę, że to ma związek z linkami.
      Z pulpitu nawigacyjnego wejdź w szablon > dostosuj > zaawansowane > zmień kolory linków lub link do kanału. Ważne, żebyś nie miała tam czarnego.

      Usuń
    2. i właśnie tu pojawia się ten problem, że nigdzie nie mam czarnego i już nie wiem co robić :/

      Usuń
    3. Daj adres swojego bloga, to go przebadam ;D

      Usuń
  16. Hey! :3 A mogłabyś mi pomóc w jednej sprawie? Zastanawiam się jak zrobić obrazkowe tło w pasku bocznym...

    OdpowiedzUsuń
  17. Wyszło mi! Jupi! Wspaniała instrukcja! Dobrze napisana, łatwa do zrozumienia :)

    OdpowiedzUsuń
  18. A mnie wyświetla, że nie posiadam takiego elementu jak "" ._.' Musiałam rozdzielić, żeby Blogspot wpuścił to do komentarza.

    OdpowiedzUsuń
  19. Mi blogger odmawia zapisania szablonu z powodu błędnego kodu (w tych linijkach w których dodałam kod z tej strony). Nie interpretuje tych ślaczków: &#39 Powinny być inne.

    OdpowiedzUsuń
    Odpowiedzi
    1. Czy jest tam średnik po liczbie 9?

      Usuń
    2. To jest apostrof zapisany inaczej. Jeśli nie brakuje tam żadnego średnika i dalej masz problem, to spróbuj zamienić wszystkie ' na '

      Usuń
    3. Lol, nawet w komentarzu mi zamieniło. Tę frazę &39średnik na '

      Usuń
    4. Mi brakuje średnika! Nie bardzo wiem, gdzie go wstawić. Próbowałam w różne miejsca ;cc

      Usuń
  20. Nie wyszukuje mi tego fragmentu kodu :/
    http://harrymione-diary.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Ale ja widzę "/body" u ciebie >.> Może napisałam coś niedokładnie?
      Znajdujesz /body i wklejasz tam ten długaśny kod, który jest w notce. Zamieniasz tylko linki.

      Usuń
  21. Dobra, a ja mam trochę inne pytanie: jaką wielkość ma to tło? Bo ja chciałabym sobie ustawić tak samo bloga, ale niestety zawsze jest za mały albo za duży obrazek -.- Podasz mi dokładne wymiary? Bardzo proszę *O* Bo chciałabym sama coś wykombinować, a nie brać cały czas od was te niesamowite szablony :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli chodzi Ci o tło postów, to spójrz tu:
      http://imageshack.us/a/img5/9951/tloo.png
      Wymiary: 576x28, waga: 1,6kb
      Jeśli chodzi Ci o tło całego bloga:
      U mnie jest to 1466 x 790px, aczkolwiek robiłam je "na czuja". Mój laptop ma rozdzielczość 1366x7XX, więc zrobiłam troszkę większe, żeby ludzie z większym monitorem nie mieli jakichś problemów. W dodatku tło samo dostosowuje się do wielkości monitora... Wagowo ma prawie 2 mega, o ile dobrze czytam.

      Usuń
  22. Nie wiem jak ci dziękować! :D
    Znalazłam tę instrukcję i muszę powiedzieć, że on razu się udało! :D
    Super, dziękuję za jej wstawienie :*

    OdpowiedzUsuń
  23. U mnie też nie wyszukuje tej frazy. ;c Piszę, że nie odnaleziono...
    leonetta-forever.blogspot.com :c

    OdpowiedzUsuń
  24. Dlaczego blogger chce ode mnie jakiegoś średnika? ;cc

    OdpowiedzUsuń
    Odpowiedzi
    1. A czy jak usuniesz kod, to nie wymaga go?
      Używałam tego kodu u siebie i innym też działał, więc dziwne >_<
      A zmieniasz linki na swoje? Może jak dasz z moimi linkami to podziala?

      Usuń
    2. Nie wiem, jak to się stało, ale teraz wkleiłam cały Twój fragment z niezmienionymi linkami, zapisałam, a potem wstawiłam swoje linki i... działa :O. Niesamowity ten html :D.

      Usuń
    3. Czasem się coś skasuje przypadkowo i nie idzie dojść gdzie co i jak :D Dobrze, że już działa.

      Usuń
  25. Witaj!:) Ikonki zmienione, ale mam do Ciebie pytanie - czy da się zmienić ich wielkość? Wiem, że takie wymiary są uniwersalne, ale mnie odpowiadałyby większe - czy jest taka możliwość?:) Jeśli tak, to prosiłabym Cię *oh my master* o wytłumaczenie:D:*

    OdpowiedzUsuń
    Odpowiedzi
    1. Za ten miły komentarz pod ostatnim postem zrobię wyjątek i dopiero po Tobie się zmyję ;D
      Znalazłam takie cuś:
      .comments .avatar-image-container img {
      max-width: 36px;
      }

      Poszukaj u siebie tego i zmień te piksele :) Myślę, że tak inne dziewczyny robią np. okrągłe obramowanie - dopisują border-radius.
      Jak nie możesz znaleźć po 'container' to wklej to arkusza CSS i sprawdź.

      Usuń
    2. Nie mam nigdzie takiego czegoś - ani max-width, ani 36px, ani avatar-image, nic:o Ale dziękuję za pomoc i poświęcenie:D

      Usuń
  26. Dziewczyno, czy Ty zdajesz sobie sprawę z tego, jaka jesteś wspaniała ? Ile pomocy dajesz nawet nowicjuszom bloggera ?
    Ja, w tych całych HTML, CSS troszkę się bawię, ale nie jestem w stanie zrobić coś takiego. To dla mnie czarna magia. Albo nie... ja jestem chyba jakaś ciemnota.
    Albo prawidłowe wklejenie kodu mi pomogło, albo modlitwa " działaj, działaj ", bo to chyba niemożliwe, żeby mi coś się udało.

    Pozwolę sobie powiedzieć, że jesteś wspaniała, tym samym kończąc mój bezsensowny monolog. :3

    OdpowiedzUsuń
  27. A ja w ogóle, gdy wchodzę na Edytuj kod HTML nie mam opcji Rozszerz szablony widżetów :c

    OdpowiedzUsuń
  28. Też nie mam czegoś takiego. Sama zawsze muszę szukać bo mm jakiś inny niż wszyscy. Szkoda że Fin nie pisze. W zapytaj zostwiłam moje pytanie, ale odp nie ma.....

    OdpowiedzUsuń
  29. a jak ma się windows 8?

    OdpowiedzUsuń
  30. Pięknie dziękuję za tutorial :D właśnie tego mi brakowało :)

    OdpowiedzUsuń
  31. Ja z trochę innym pytaniem...
    Wszystkie moje komentarze mają ikonkę anonimowego komentatora, nawet ci komentujący, którzy mają konta na bloggerze, chciałabym by mieli "własne", a nie domyślne. Jak to zmienić, pomożesz?
    Dziękuję :)

    OdpowiedzUsuń
  32. Dzięki za instrukcję ^.^
    Nigdzie w HTML nie znalazłam rozszerzenia szablonu widżetów, więc trochę pokombinowałam i udało mi się - po prostu wkopałam kod na sam koniec jeszcze przed html i mi pykło ^o^
    Instrukcja była spoko i działa jak najbardziej kod, więc dziękuję :)
    Pozdrawiam:
    Darka3363

    OdpowiedzUsuń
  33. witam
    u mnie działa ale dlaczego na stronie głównej nie zmienił się avatarek komemntatora z obrzydłą ikonką blogera

    OdpowiedzUsuń
  34. Kompletnie mi nie działa, wciąż pojawia się jakiś błąd, nie wiem, co robię źle. Wszystko zrobiłam dokładnie tak, jak podałaś. :/

    OdpowiedzUsuń

szukaj