Ikonki społecznościowe - zwykłe i ruchome

Cześć!
Dzisiaj w końcu będzie tutorial, o który najczęściej mnie pytacie. Pomimo tego, że w internecie można znaleźć już kilka takich instrukcji i nie ma w tym nic trudnego, to wciąż dostaję masę pytań 'Jak dodać na bloga ikonki społecznościowe?'. Przygotowałam dla Was dwie instrukcje. Jedne ikonki są zwykłe, a drugie obracają się i rozjaśniają po najechaniu kursorem. A więc do dzieła!



Obydwa sposoby wykonujemy prawie tak samo. Używamy do tego tylko innego kodu. Od czego zacząć?
Układ > Dodaj gadżet > HTML/JavaScript

ZWYKŁE IKONKI
W puste pole wklejamy kod:

<a href="ADRES STRONYTARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a><a href="ADRES STRONYTARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a><a href="ADRES STRONYTARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a>

Jeśli chcesz dodać kolejną ikonkę znów wklej kod:
<a href="ADRES STRONYTARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a>

Efekt:

PhotobucketPhotobucketPhotobucket


RUCHOME IKONKI
Wklejamy kod:

<style> #social a:hover 
{background-color: transparent; opacity:0.1;} 
#social img { 
-moz-transition: all 0.8s ease-in-out; 
-webkit-transition: all 0.8s ease-in-out; 
-o-transition: all 0.8s ease-in-out; 
-ms-transition: all 0.8s ease-in-out; 
transition: all 0.8s ease-in-out; } 
#social img:hover { 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
transform: rotate(360deg); } 
</style> <div id="social"> <center><a href="ADRES STRONY" target="_blank"><img src="ADRES URL IKONKI" border="0" alt="link" /></a><a href="ADRES STRONY" target="_blank"><img src="ADRES URL IKONKI" border="0" alt="link" /></a><a href="ADRES STRONY" target="_blank"><img src="ADRES URL IKONKI" border="0" alt="link" /></a></center> </div>

Jeśli chcesz dodać kolejną ikonkę po ostatnim </a> wklej:
<a href="ADRES STRONY" target="_blank"><img src="ADRES URL IKONKI" border="0" alt="link" /></a>

Efekt:


linklinklink

I to tyle! Mam nadzieję, że instrukcje się przydały. Jeśli macie jakieś pytania śmiało piszcie/

Jaki chcielibyście zobaczyć tutorial w następnym poście?



Kliknij, aby zaobserwować bloga!

41 komentarzy:

  1. Świetny tutorial :) Na pewno wielu osobom pomoże! :)

    OdpowiedzUsuń
  2. Myślę, że ten tutorial bardzo przyda się tym, którzy jeszcze nie wiedzą jak dodać ikonki :D Fajnie wszystko czytelnie opisane.

    Pozdrawiam, atramka xx

    OdpowiedzUsuń
  3. Przydatny post, na pewno wiele osób skorzysta z tego poradnika :*
    http://sapphireblog1.blogspot.com/

    OdpowiedzUsuń
  4. Pamiętam jak wielki miałam z tym problem :)
    Świetnie wytłumaczone, pozdrawiam! :D
    Mój blog - klik ^^

    OdpowiedzUsuń
  5. Twój blog jest super ! :)
    niesmialavicki.blogspot.com

    OdpowiedzUsuń
  6. Super zdjęcia i blog!♥ Zachęcam Cie do obserwacji mojego bloga byłoby miło :)
    http://lovelysoophie.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Naprawdę nie stać Cię na nic więcej niż kopiuj - wklej? ;)

      Usuń
  7. Przydatny post, w przyszłości na pewno wykorzystam coś takiego, bo dotąd na blogu mam zwykłe ikonki, bez żadnego efektu :)

    http://emiemaila.blogspot.com/

    OdpowiedzUsuń
  8. Przydatne!

    Zapraszam na nowy post! Jeśli Ci się spodoba będzie mi bardzo miło, jeśli skomentujesz i zaobserwujesz mój blog. :)
    >> ALEXANDRAK-BLOG.BLOGSPOT.COM <<



    OdpowiedzUsuń
  9. Bardzo przydatny poradnik, na pewno pomoże wielu osobom. :)
    Twój blog ma wsobie to coś, dlatego zostaję u Ciebie na dłużej! Jeśli spodoba Ci się mój blog, dołącz do obserwatorów, a ja jak najszybiej odwdzięczę się tym samym. :)
    POKLIKASZ W BANNERY(SPRAWDZAM)? DAJ ZNAĆ, JAK MAM SIĘ ODWDZIĘCZYĆ!

    OdpowiedzUsuń
  10. O bardzo przydatne , kiedyś ie wiedziałam jak to zrobić. Ale po jakimś czasie znalazłam sposób. A teraz jak będę czegoś nie wiedziała będę wchodziła na twojego bloga. :))
    Mam prośbę czy mogłabyś kliknąć w linki w moim poście bardzo mi na tym zależny napisz jak a ja się odwdzięczę. Ola-Mylifestyle

    OdpowiedzUsuń
  11. Świetne i jasne wskazówki! ❤

    OdpowiedzUsuń
  12. Bardzo przydatny post :) Świetnie wszystko wyjaśniłaś!
    Czy mogłabyś poklikać w linki: Mój Blog - klik! Byłabym bardzo wdzięczna! :)

    OdpowiedzUsuń
  13. Takie ikonki to świetny pomysł :D
    Myślę, że może za jakiś czas, jeśli blog się bardziej rozwinie coś takiego założymy ♥
    KLIK-BLOG

    OdpowiedzUsuń
  14. Powiedz mi Kochana jak dodać rotator wpisów :)
    Chciałabym mieć taki :) Napisz u mnie w komentarzu lub na swoim blogu, mam nadzieję, że pomożesz ;)
    igablogg.blogspot.com

    OdpowiedzUsuń
  15. Super instrukcja! :3


    NOWY POST! Kliknij tutaj
    JAK ZACZĄĆ WSPÓŁPRACĘ? Kliknij tutaj

    OdpowiedzUsuń
  16. Przydatny post, zastanawilam sie ale nigdzie nie mogłam tego znaleźć :)

    OdpowiedzUsuń
  17. Przydatny post! ;)
    wonderfuul-adventure.blogspot.com

    OdpowiedzUsuń
  18. Przydatny post, ja na szczęście mam już wszystkie potrzebne ikonki, ale wiem ile się męczyłam, żeby znaleźć rady odnośnie ich. Dobrze, że stworzyłaś takie posty pomagające blogerom. Coraz mniej jest osób, które robią takie blogi i posty, a szkoda, bo takie strony są bardzo potrzebne. ;)

    Zapraszam do mnie: http://fashionforazmariaa.blogspot.com/

    OdpowiedzUsuń
  19. Pomocny post. Ciekawie piszesz. Jest tu dużo przydatnych rzeczy. Będę częściej wchodzic na Twojego bloga. Pozdrawiam i zapraszam www.szalonaa-ja.blogspot.com

    OdpowiedzUsuń
  20. Na pewno przydatne dla wszystkich, którzy chcą podzielić się swoimi portalami społecznościowymi na blogu ;) Ja akurat z mało których korzystam. Co do tutoriali/postów ogólnie, może pomocne narzędzia do tworzenia nagłówków? Jakieś Twoje ulubione programy, online i na komputer?
    Opowiastki Prawdziwe (klik)

    OdpowiedzUsuń
    Odpowiedzi
    1. Myślę, że taki post może się przydać wielu osobom. :) Dzięki za pomysł!

      Usuń
  21. Przydatne:) Mamy prośbę, czy mogłabyś poklikać u nas w kliki w ostatnim poście? To dla nas bardzo ważne, z góry dziękujemy:) http://fashiongllam.blogspot.com/+może obs za obs?

    OdpowiedzUsuń
  22. Super wpis, na pewno się przyda :) pozdrawiam :)

    OdpowiedzUsuń
  23. Całkiem przyjemnie to wygląda - idealne dla kogoś, kto ma strony do udostępniania. Ja takowych nie posiadam, ale dobrze wiedzieć w razie czego ;)
    Heaven in Black | Truth of Thunder

    OdpowiedzUsuń
  24. Bardzo przydatny post, na pewno z niego skorzystam, przy zmianie wystroju bloga.
    Zapraszam do siebie: http://aldehydd.blogspot.com/

    OdpowiedzUsuń
  25. U mnie już się takie znajdują.
    Posty przydatny. Na pewno pomoże nie jednej osobie. ;)

    Pozdrawiam, I am Angelika - klik!

    OdpowiedzUsuń
  26. Kiedyś długo się z tym bawiłam. :)

    OdpowiedzUsuń
  27. Fajnie że zrobiłaś taki tutorial, wielu osobą pomoże :)
    NOWY POST! Kliknij tutaj

    POKLIKASZ? Kliknij tutaj

    OdpowiedzUsuń
  28. zdecydowanie post warty przeczytania! teraz powodzenia wszystkim, ktorzy beda to robic :d
    Zapraszam na konkurs! Do wygrania duuużo ciekawych nagród!
    KLIKNIJ TUTAJ ♥

    OdpowiedzUsuń
  29. Na końcu dowiedziałam się, jak to zrobić :) Dziękuję serdecznie :)

    Brzydki Ptak Blog

    Zapraszam do udziału w konkursie "Back to School"
    http://brzydkiptak.blogspot.ru/p/konkurs-back-to-school.html

    OdpowiedzUsuń
  30. Bardzo pomocny post! Z pewnością przyda się wielu osobom! :)

    Pozdrowionka ^^
    ♥by-sylwia.blogspot.com♥

    OdpowiedzUsuń
  31. świetnie, że dodałaś ten post :)

    Kochana poklikasz w linki w najnowszym poście SheIn ?
    Bardzo proszę :* Z góry ślicznie dziękuję ! :)

    OdpowiedzUsuń
  32. Świetny post, skorzystałam :))

    http://milkamikam.blogspot.com/

    OdpowiedzUsuń

Nie reklamuj się na moim blogu.
Wysil się trochę i napisz coś więcej niż 'Fajny blog'.
Jeśli spodobał ci się mój blog - zaobserwuj.