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.