Dołącz do Avon

Jeśli lubisz produkty AVON i chcesz zamawiać je taniej niż w katalogu, to już teraz zarejestruj się bez żadnych zobowiązań. Możesz kupować kosmetyki ze zniżką do 40% tylko dla siebie i oszczędzać, lub możesz sprzedawać je innym i zarabiać. Będąc z Avon korzystasz z wielu dodatkowych bonusów. Dzięki zakupom możesz odebrać pełnowartościowe produkty już od 1zł. Rejestracja w Avon nie zobowiązuje się do zamawiania co katalog. Możesz kupować w dowolnym momencie, a na każdy zakup otrzymasz zniżkę.

REJESTRACJA AVON

22 sie 2015

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!

40 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. Bardzo przydatny post :) Świetnie wszystko wyjaśniłaś!
    Czy mogłabyś poklikać w linki: Mój Blog - klik! Byłabym bardzo wdzięczna! :)

    OdpowiedzUsuń
  12. 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ń
  13. 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ń
  14. Super instrukcja! :3


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

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

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

    OdpowiedzUsuń
  17. 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ń
  18. 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ń
  19. 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ń
  20. 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ń
  21. Super wpis, na pewno się przyda :) pozdrawiam :)

    OdpowiedzUsuń
  22. 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ń
  23. Bardzo przydatny post, na pewno z niego skorzystam, przy zmianie wystroju bloga.
    Zapraszam do siebie: http://aldehydd.blogspot.com/

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

    Pozdrawiam, I am Angelika - klik!

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

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

    POKLIKASZ? Kliknij tutaj

    OdpowiedzUsuń
  27. 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ń
  28. 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ń
  29. Bardzo pomocny post! Z pewnością przyda się wielu osobom! :)

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

    OdpowiedzUsuń
  30. Świetny tutorial , bardzo pomocny ! :)
    poozytywna96.blogspot.com-klik ❤

    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ń

Dziękuję za każdy miły komentarz!
Nie reklamuj się na moim blogu.
Jeśli spodobał ci się mój blog - zaobserwuj.

design by DESIGNCHANEL (c) don't copy!