Zestaw czarnych ikon społecznościowych

Dziś paczka czternastu ikon społecznościowych w rozmiarach 100x100px. Wszystkie są czarne, z przezroczystym tłem i wycięciami, więc zdadzą egzamin niemal na każdym blogu. Idealnie sprawdzą się w tym tutorialu [KLIK].


W skład paczki wchodzą ikony, które możecie zobaczyć na powyższej grafice. Znajdziecie tam coś dla Facebooka, Bloglovin, RSS, Bloggera, Youtube, Aska, Twittera czy last.fm. Kliknięcie w poniższy link przenosi do Dysku Google, skąd można pobrać paczkę. Można to zrobić wciskając CTRL+S lub wybierając w lewym górnym rogu opcję Plik oraz Pobierz. Mam również nadzieję, że nie muszę nikomu przypominać, że przed użyciem tych grafik należy wrzucić je do sieci korzystając z hostingu (np. Picasa, Photobucket, Tinypic).

ZESTAW CZARNYCH IKON SPOŁECZNOŚCIOWYCH

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.