Jak dodać na bloga obracające się ikony społecznościowe?

Jeżeli prowadzicie bloga, to z pewnością macie różne, powiązane z nim konta na portalach społecznościowych, którymi chcielibyście podzielić się z czytelnikami. Przyjemnym dla oka sposobem jest stworzenie małych ikonek i opakowanie ich w linki. Te, które przygotowałam dla was na dziś, po najechaniu na nie kursorem myszy, obracają się.


Przykładowy efekt końcowy możecie zobaczyć poniżej (ale bez odnośników). Czarne ikonki będą do pobrania w kolejnej notce.

Aby wstawić takie ikonki na swojego bloga, wystarczy wejść w opcję Układ swojego bloga oraz dodać gadżet HTML/JavaScript. W jego treści należy wkleić cały poniższy kod. Oczywiście w miejsce tekstu LINK-DO-PROFILU wklejamy odnośnik do profilu społecznościowego (np. fanpage, instagram), a tekst LINK-DO-IKONKI zastępujemy adresem do odpowiedniej grafiki (link kończący się rozrzerzeniem pliku .jpg, .gif lub .png).

<style>
.social
{
   text-align: center;
}

.social li
{
   display: inline;
   list-style-type: none;
}

.social img
{
   -webkit-transition: all 0.75s ease-in-out;
   -moz-transition: all 0.75s ease-in-out;
   -ms-transition: all 0.75s ease-in-out;
   -o-transition: all 0.75s ease-in-out;
   transition: all 0.75s ease-in-out;

   margin:5px;
   width: 50px;
}

.social img:hover
{
   -moz-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
}
</style>

<ul class="social">
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
</ul>

Aby wstawić kolejną ikonkę, wystarczy na samym końcu, przed linijką </ul> wstawić kod:

<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>

Kod można dostosować do swoich potrzeb. Standardowo ikony wyświetlane są poziomo.  Aby ustawić je w pionie, wystarczy zamienić linijkę display: inline; na display: list-item;

Aby zmienić rozmiar ikonek należy zmienić liczbę 50 w linijce width: 50px; na taką, jaka nam odpowiada.

18 sierpnia 2014

7 komentarzy :

  1. Wytlumaczysz humaniscie?

    OdpowiedzUsuń
  2. Wytlumaczysz humaniscie?

    OdpowiedzUsuń
  3. Please
    Wytlumacz mu bo spami!!!

    OdpowiedzUsuń
  4. Jak zrobić, żeby te ikonki były w innym, miejscu?

    OdpowiedzUsuń
  5. A czy wiesz może jak zrobić, żeby po najechaniu zmieniały się na inny kolor i obracały?:)

    OdpowiedzUsuń
  6. Bardzo Ci dziękuje, za te kilka wpisów, dzięki którym odbmieniłem swojego bloga !

    OdpowiedzUsuń

Dzięki za komentarze! Wszystkie czytam i staram się na nie odpowiadać.
Zanim zadasz pytanie sprawdź, czy odpowiedzi na nie nie ma w zakładce FAQ znajdującej się na górze strony.