Ikonki społecznościowe zmieniające kolor.

8 gru 2014

Jeden z pierwszych, jeśli nie pierwszy mój wpis o blogowaniu dotyczył widgetów społecznościowych. Przygotowałam wówczas dla Was kilka. Ich minusem jednak jest to, że nie możecie wybrać do jakich portali odsyłają. Dzisiaj mam dla Was coś znacznie fajniejszego! Możecie wybrać ikonki takie jak się Wam podobają i te które potrzebujecie. Do tego jeszcze będą zmienić kolor po najechaniu na nie kursorem. Fajnie, co? To do roboty! :)


PRZYGOTUJ IKONKI


Możesz stworzyć swoje własne lub skorzystać z bezpłatnych, które są dostępne tu lub tu. Ikonkę odsyłającą do danego portalu musisz mieć w dwóch kolorach. Jeśli te, które znalazłaś są dostępne tylko w jednym kolorze możesz zmienić ich kolor np. za pomocą picmonkey. Wszystkie zamieść gdzieś w Internecie np. albumy google.

PRZYGOTUJ KOD


Poniższy kod dotyczy jednej ikonki. Dla każdej kolejnej trzeba go powielić i podstawić odpowiedni adres profilu np. na FB lub google+ do którego ma prowadzić oraz podlinkować odpowiednie ikonki.

<a href="ADRES PROFILU NP. FACEBOOK"><img src="ADRES URL IKONKI 1" alt="Tekst alternatywny" border="0" onmouseover="this.src = 'ADRES URL IKONKI 2'" onmouseout="this.src = 'ADRES URL IKONKI 1'"/>

* ADRES URL IKONKI 1 - to ikonka widoczna przed najechaniem na nią kursorem.
** ADRES URL IKONKI 2 - to ikonka, która będzie widoczna po najechaniu kursorem
*** Adres uzyskacie klikając na otwartą w przeglądarce ikonkę prawym przyciskiem myszy i wybierając "Kopiuj adres url obrazka"
**** Zwróćcie uwagę, że ADRES URL IKONKI 1 jest do podmiany w dwóch miejscach

Jeśli chcesz, aby ikonki były wyśrodkowane to przed kodem wklej <center>, a za kodem </center>
Jeśli chcesz, aby ikonki były wyrównane do prawej to przed kodem wklej <p align="right>, a za kodem </p>

WSTAW IKONKI NA BLOGA (BLOGGER)


Wejdź w UKŁAD i utwórz gadżet "HTML/JavaScript". Wklej do niego swój kod. Zapisz i przenieś gadżet w miejsce w którym mają być ikonki.

-------------------------------------------------------------------------------------------------------

Spis wszystkich postów o blogowaniu znajduje się w STREFIE BLOGEREK

---------------------------------------------------------------

Tak to już jest, że szewc bez butów chodzi. Dzisiejszy post zmobilizował mnie, aby zrobić sobie nowe ikonki:)

Tekst alternatywnyTekst alternatywnyTekst alternatywnyTekst alternatywnyTekst alternatywnyTekst alternatywny


16 komentarzy:

  1. Dzięki, wielkie za ten temat, właśnie szukam fajnych ikonek i znalazłam tą stronkę http://icons.mysitemyway.com/category/social-media-logos/

    OdpowiedzUsuń
  2. Nie znałam tej strony. Dzieki, przyda się!

    OdpowiedzUsuń
  3. nie ma za co, cisze się że się przyda :)

    OdpowiedzUsuń
  4. Tak! Tego potrzebowałam :) i jeśli wkleję wszystkie kody w jednym gadżecie, to ustawią się obok siebie w jednej linii?

    OdpowiedzUsuń
  5. a ja nie rozumiem tej instrukcji :/

    OdpowiedzUsuń
  6. Wstyd się przyznać, ale w ogóle nie ma na moim blogu sensownie wyglądającego widgetu społecznościowego. Mam chaotycznie rozdzielone obserwacje Bloggerowe, G+ i Bloglovin', a fanpage na fejsie założyłam tak niedawno, że jakoś jeszcze nie miałam czasu podpiąć go na blogu. Muszę w weekend do tego przysiąść - oczywiście z pomocą Twoich postów :)

    OdpowiedzUsuń
  7. Tę tajemną wiedzę już (jakimś cudem!) posiadłam. Ha! To chyba pierwszy taki post z Twojej blogowej serii ;)

    OdpowiedzUsuń
  8. Przydatna instrukcja, nie wiedziałam, że ikonki można zmienić takim prostym kodem. :) Pzdr

    OdpowiedzUsuń
  9. Gdyby przyszło Ci zmniejszać je w programie graficznym to się wstrzymaj. Możesz dodać na końcu kodu każdej z nich jej rozmiar w pikselach


    OdpowiedzUsuń
  10. Dzięki za instrukcję! Mam jedno pytanko: jak mogę zmniejszyć ikonki?

    OdpowiedzUsuń
  11. Ooo już nie zawracam głowy, już wiem :)

    OdpowiedzUsuń
  12. Chyba możesz być ze mnie dumna :) Bardzo Ci dziękuję za tę instrukcję! http://czekoada.blogspot.com

    OdpowiedzUsuń
  13. Polecam https://www.iconfinder.com/
    Od jakiegoś czasu korzystam z jej zasobów.

    OdpowiedzUsuń
  14. Dzięki wielkie to jest to czego właśnie szukałam. Sposób bardzo prost a mega efektywny :)

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!