15 sierpnia 2013

Jak dodać ruchome ikonki społecznościowe

Skopiuj kod do notatnika:

<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="LINK DO FACEBOOKA" target="_blank"><img src="LINK DO IKONKI FACEBOOKA" border="0" alt="FB" /></a><a href="mailto:ADRES EMAIL" target="_blank"><img src="LINK DO IKONKI EMAIL" border="0" alt="email" /></a><a href="LINK DO TWITTER" target="_blank"><img src="LINK DO IKONKI TWITTER" border="0" alt="Twitter" /></a ></center> </div>

uzupełnij wytłuszczone elementy linkami.

Otwórz UKŁAD w bloggerze i dodaj gadżet HTML/Java w który wklej gotowy kod




Jeżeli chcesz dodać więcej ikonek to po ostatnim

</a >
wklej kod:

<a href="LINK DO PROFILU/STRONY" target="_blank"><img src="LINK DO IKONKI" border="0" alt="link" /></a >

Jeżeli chcesz żeby ikonki wyświetlały się pionowo jedna pod drugą to po każdym

</a>

wklej

<br/>
Przykład:  najedź na ikonki społecznościowe na tym blogu tuż pod paskiem menu. 

55 komentarzy:

  1. Jak zwykle pomocny tutorial :) Myślisz, że dałoby się jakoś przenieść te przyciski nad nagłówek bloga?

    OdpowiedzUsuń
  2. Jejku od dawna tego szukałam i nie wiedziałam jak to zrobić! Dziękuję Ci za ten post ♥
    meyssely.blogspot.com

    OdpowiedzUsuń
  3. Mogę wiedzieć skąd brałaś te ikonki?

    OdpowiedzUsuń
  4. Niestety mam problem z tymi linkami do ikonek, chodzi o to, że nie wiem gdzie ich szukać, google grafika? Proszę o pomoc.

    OdpowiedzUsuń
  5. Ikony należy pobrać z internetu, lub wykonać samemu a następnie umieścić w portalu hostującym grafike np. Photobucket i tam dostępne będą linki do Twoich grafik.

    OdpowiedzUsuń
  6. u mnie nie ,ładują się ikonki czy to wina źle wpisanego kodu czy czego?
    pozdrawiam i liczę na odpowiedź

    OdpowiedzUsuń
    Odpowiedzi
    1. Doma moja kochana koleżaneczko :DD te ikonki trzeba specjalnie wgrać, napisz na mejla to Ci powiem ♥

      Usuń
    2. mogłybyście mi wytłumaczyć jak to wgrać ? :)

      Usuń
  7. mam pytanie. :) jak dodać lubię to "lubię to" na pasek stron i zrobić tak żeby ten pasek u góry był ciągle widoczny jak się przesuwa stronę?

    OdpowiedzUsuń
  8. Linki do ikonek czyli jakie linki? Skąd je mam wziąźć?

    OdpowiedzUsuń
  9. nie wiem czemu, ale nie działa :( Wyświetlają się jakieś dziwne kratki z iksami. Co robić?

    OdpowiedzUsuń
    Odpowiedzi
    1. jeszcze raz wgrać ikonki i skopiować adresy

      Usuń
  10. a mi się po wgraniu wyświetlają na środku, jak zrobić aby były po prawej?

    OdpowiedzUsuń
    Odpowiedzi
    1. musisz przesunąć w układzie na prawo, lub gdzie chcesz

      Usuń
  11. Bardzo dziękuję za instruktaż. Pomocny!
    Podpowiedz proszę, dlaczego pobrane przeze mnie ikony są takie duże a na innych blogach mniejsze. Nie mogę edytować wielkości, próbowałam ikon z różnych źródeł i zawsze jest tak samo.

    OdpowiedzUsuń
  12. Zrobiłam i wszystko jest ok, oprócz tego że te ikonki są ok. 5 razy większe od twoich. Jak je zmniejszyć?

    OdpowiedzUsuń
  13. Czy w te wytłuszczone miejsca muszę wstawić linki i obrazki do stron, które są tam napisane, czy do tych, które chcę aby były na blogu, w obojętnie jakie miejsca? Proszę o odpowiedź :)

    OdpowiedzUsuń
  14. Fajne porady:) Przydadzą się ;)
    Dzięki:)

    OdpowiedzUsuń
  15. mam problem związany z tym, że po dodaniu kodu do gadżetu pod nagłówkiem mam nie równe odstępy pomiędzy poszczególnymi ikonami; jak mogę ustawić widoczność tych ikon po prawej stronie bloga (zmieniałem nazwę z center na left i right ale za każdym razem ikony wyświetlane są po lewej stronie...) dzięki za pomoc

    OdpowiedzUsuń
  16. Ja mam bardzo dziwnie... Bo jak już skopiowałam ten kod do HTML i zmieniam już wytłuszczony druk na linki i sie ładuje to po ladowaniu pojawia sie takie cos na blogu LINK DO FACEBOOKA" target="_blank">LINK DO IKONKI FACEBOOKA" border="0" alt="FB" />ADRES EMAIL" target="_blank">LINK DO IKONKI EMAIL" border="0" alt="email" />LINK DO TWITTER" target="_blank">LINK DO IKONKI TWITTER" border="0" alt="Twitter" /> pomocy! :D

    OdpowiedzUsuń
  17. dodaj intrukcje jak dodałam fb kolo stron

    OdpowiedzUsuń
  18. DZIĘKUJĘ! <3 Jesteś boska! :*

    OdpowiedzUsuń
  19. a jak wgrać te ikonki? Bo mi się nie wyświtlają na blogu?

    OdpowiedzUsuń
  20. BŁAGAM O POMOC, czarna magia siedzę nad tym od rana i powoli tracę cierpliwość :( Chodzi o to że wyświetla mi się na blogu link i nazwa, ale nie ma obrazków :<

    OdpowiedzUsuń
  21. hej, nie rozumiem. Niby wszystko git, ale na blogu pojawią mi się ikonki poziomo i obok nich jakieś adresy :(

    OdpowiedzUsuń
  22. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  23. nie potrafie zmniejszyć moich ikon :/

    OdpowiedzUsuń
  24. same połamane obrazki mi wychodzą :( nie wiem co źle robię, te"" mają być usunięte czy mają zostać?

    OdpowiedzUsuń
  25. Wszystko jest dobrze ale jak dodaje 4 ikonkę to ona jest daleko od pozostałych ? co mam zrobić by była normalnie ? ;(

    OdpowiedzUsuń
  26. jak zrobić takie, żeby były nieruchome?

    OdpowiedzUsuń
  27. Mnie też interesują ikonki nieruchome - jak je zrobić? I czy można zmienić ich kolor, żeby pasował do kolorystyki bloga? :)

    OdpowiedzUsuń
  28. http://hafija-background.blogspot.com/2012/12/pasek-aktywnych-ikonek-spoecznosciowych.html#.Uwc53Pl5NfY

    OdpowiedzUsuń
  29. A wiesz może jak zrobić taki pasek ikonek jak na tym blogu? http://www.kolorowekredki.com.pl/

    OdpowiedzUsuń
  30. Błagam pomóż mi.. Męczę się z tym już tyle czasu.. załadowałam ikonki na tej stronie, którą polecałaś photobucket.com . Próbowałam wklejać każdy link i z żadnym nie działa. nie wiem o co chodzi. Proszę pomóż

    OdpowiedzUsuń
  31. Wogóle się nie da :( Beznadziejne i teraz próbuję to usunąć i się nie da :(

    OdpowiedzUsuń
  32. Wogóle mi to nie działa :( Proszę pomóż !!

    OdpowiedzUsuń
  33. dziękuję za świetny tutorial, efekt moich działań już widnieje na blogu :)

    OdpowiedzUsuń
  34. Dziękuję Ci!!! Świetny tutorial! Dla tych, którzy mają problem z dużymi ikonkami: na iconfinder.com można po wybraniu ikony zmniejszyć jej rozmiar. Dla zainteresowanych podaje link do ikonki instagrama https://cdn3.iconfinder.com/data/icons/picons-social/57/78-instagram-64.png i emaila https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-email-64.png :D mam nadzieję, że się przyda!

    OdpowiedzUsuń
  35. Proszę pomocy jest niby wszystko ok ale nie ma tych zdjec (czyli zdjec ych ikonek ) Jest tylko zdjecie jakies przecietne na pół.. Proszę pomocy :;;;;

    OdpowiedzUsuń
  36. Mam pytanie . Bo Mam te ikonki ale wgl nie ma tych ikonek ( obrazków ) jak by nie chcą się wgrać i z tego tylko 3 się ruszają a te pozostałe nie ;/ Od czego to zależy . Bardzo proszę o pomoc .

    OdpowiedzUsuń
  37. Po wielu próbach i płaczach nareszcie się udało!!! Taniec szczęścia! Dzięki...

    OdpowiedzUsuń
  38. przydało się dzięki Tobie mam ruchome ikonki, ślicznie dziękuję!
    http://mambycmilaczyszczera.blogspot.com :)

    OdpowiedzUsuń
  39. Te linki to po prostu facebook.com czy do funpage itd?

    OdpowiedzUsuń
  40. hej zrobiłam juz wszystko + posprawdzałam kody
    lecz nie wszystkie się chcą pojawić, a za każdym razem
    jak odświeżam są one w innym położeniu.
    Co powinnam zrobić? ;c

    OdpowiedzUsuń
  41. Dziękuje! Bardzo się przydało :)
    Zapraszam secondhandbox.blogspot.com.

    OdpowiedzUsuń