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 STRONY" TARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a><a href="ADRES STRONY" TARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a><a href="ADRES STRONY" TARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a>

Jeśli chcesz dodać kolejną ikonkę znów wklej kod:

<a href="ADRES STRONY" TARGET="_blank"><img src="ADRES URL IKONKI"border="0" alt="Photobucket" /></a>

Efekt:

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:

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!