Ikonki społecznościowe ułożone w plaster miodu

poniedziałek, 22 sierpnia 2016

Ikonki społecznościowe - każdy doskonale wie, że są one potrzebne na blogu, aby odesłać naszych czytelników do naszych portali społecznościowych, aby mieć z nimi najlepszy kontakt. Niektórzy na swoich blogach umieszczają ikonki w kształcie kwiatków lub w łatki, kotki, pieski i czego jeszcze dusza zapragnie. Inni stawiają na tradycyjny prosty wygląd, a co byście powiedzieli na to, aby ułożyć ikonki w plaster miodu? Czy nie byłaby to miła odmiana? Coś innego, coś co przykułoby dużą uwagę czytelników, bo przecież nie wiele blogów ma ikonki ułożone w plaster miodu.

W dzisiejszym wpisie pokażę Wam jak zrobić ułożenie takich ikonek + będziecie mieli do pobrania pakiety ikonek społecznościowych, które umożliwią Wam takie ułożenie. Zaczynamy.

1. Pobierz pakiet ikonek.

Pakiet pomarańczowy

Pobierz pakiet

Pakiet czerwony

Pobierz pakiet

Pakiet różowy

Pobierz pakiet

Pakiet fioletowy

Pobierz pakiet

Pakiet chabrowy

Pobierz pakiet

Pakiet niebieski

Pobierz pakiet

Pakiet turkusowy

Pobierz pakiet

Pakiet morski

Pobierz pakiet

Pakiet miętowy 

Pobierz pakiet

Pakiet zielony

Pobierz pakiet

Pakiet limonkowy

Pobierz pakiet

Pakiet żółty

Pobierz pakiet

Pakiet szary

Pobierz pakiet
2. Jeśli już mamy pobrany wybrany pakiet ikonek, to przechodzimy teraz do układ - dodaj gadżet - HTML/JavaScript i wrzucamy tam taki kod:

<!--początek kod blonparia-->
<div class='facebook'><a href='#'><img alt='facebook' src='LINK DO IKONKI'/></a></div>
<div class='instagram'><a href='#'><img alt='instagram' src='LINK DO IKONKI'/></a></div>
<div class='pinterest'><a href='#'><img alt='pinterest' src='LINK DO IKONKI'/></a></div>
<div class='youtube'><a href='#'><img alt='youtube' src='LINK DO IKONKI'/></a></div>
<div class='googleplus'><a href='#'><img alt='googleplus' src='LINK DO IKONKI'/></a></div>
<div class='twitter'><a href='#'><img alt='twitter' src='LINK DO IKONKI'/></a></div>
<div class='tumblr'><a href='#'><img alt='tumblr' src='LINK DO IKONKI'/></a></div>
<!--koniec kod blonparia-->

# - link do naszego profilu
LINK DO IKONKI - musimy wrzucić ikonkę na jakiś hosting i pobrać do niej link. Uwaga IKONKĘ, a nie cały folder - żeby nie było tak jak ostatnio, ktoś napisał, że wrzucił folder na hosting, a grafiki mu się nie pojawiły.

Po zapisaniu i bez CSSa nasze ikonki będą wyglądać tak:

3. Jeśli już uzupełniliśmy powyższy kod linkami do ikon to teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy tam taki kod:

.facebook {margin: 90px;}
.facebook:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.instagram {margin: -199px 0 5px 90px;}
.instagram:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.pinterest {margin: -34px 0 5px 50px;}
.pinterest:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.youtube {margin: -9px 0 5px 50px;}
.youtube:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.googleplus {margin: -34px 0 5px 90px;}
.googleplus:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.twitter {margin: -88px 0 5px 130px;}
.twitter:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.tumblr {margin: -112px 0 99px 130px;}
.tumblr:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}

Analiza kodu: 

.facebook {margin: 90px;}
.facebook:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.instagram {margin: -199px 0 5px 90px;}
.instagram:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.pinterest {margin: -34px 0 5px 50px;}
.pinterest:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.youtube {margin: -9px 0 5px 50px;}
.youtube:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.googleplus {margin: -34px 0 5px 90px;}
.googleplus:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.twitter {margin: -88px 0 5px 130px;}
.twitter:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}
.tumblr {margin: -112px 0 99px 130px;}
.tumblr:hover {
opacity : 0.70;
filter : alpha(opacity=70);
}

Manipulacja ikonkami góra-dół
Manipulacja ikonkami prawo-lewo
TYLKO PRZY OSTATNIEJ IKONCE - margines dolny ( odstęp między ikonkami, a innymi gadżetami) 

Wszystkie pogrubione i kolorowe wartości są zmienne. 

Efekt końcowy: 

Podoba Wam się ta instrukcja? ;) 

Jeśli spodobał Ci się wpis, przekaż go dalej :)