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

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? ;) 

20 komentarzy:

  1. Wow! Tylko... gdzie ja mialabym wcisnac :p hihi - ale pomysl mi sie naprawde bardzo podoba!

    OdpowiedzUsuń
  2. wow świetne, tyle, że ja mam bloga w wordpress.com :( czyli raczej mi się nie uda, eh jak przejdę na własny serwer to się zacznie praca nad grafiką bloga :)

    OdpowiedzUsuń
  3. Z tego co wiem, na WP też da się jakoś dodać HTML/JavaScript, ale nie mam pojęcia jak, bo na WP nie siedzę :)

    OdpowiedzUsuń
  4. To ułożenie jest oryginalne i eleganckie, niezłe.

    OdpowiedzUsuń
  5. Miodkowy miodek z miodku.

    Chciałam napisać głupi komentarz, ale muszę przyznać, ze bajerancki efekt. xD

    OdpowiedzUsuń
  6. Świetny pomysł ! Dobrze, zadbałaś o każdego tworząc rózne opcje kolorystyczne :) "miodzio" !

    OdpowiedzUsuń
  7. Hahaha xD
    Głupie komentarze są spoko ;D

    OdpowiedzUsuń
  8. Genialne! Sama bym uzyla tego na moim blogu, jednak moje obecne mi odpowiadaja,wiec zrezygnuje ;)

    OdpowiedzUsuń
  9. haha czas z tym plastrem miodu... nie widziałam jeszcze u nikogo czegoś takiego! Oryginalne! ;))

    OdpowiedzUsuń
  10. Wiesz, jak mi się nudzi to rozpisuje sobie coś dla siebie i później powstają takie instrukcje :D

    OdpowiedzUsuń
  11. natalia20041989 .23 sierpnia 2016 11:12

    O ja Cię, a ja własnie mam zamiar wstawić te ikonki społecznościowe, ten plaster miodu jest super i jeszcze jest fioletowy:P Może się skuszę:)

    OdpowiedzUsuń
  12. zajefajny pomysł, ogromnie mi się podoba, sama robiłaś ikonki?

    OdpowiedzUsuń
  13. Wszystkie grafiki (cliparty, ikonki etc.) do pobrania robię sama ;)
    To by było trochę dziwne, żeby jako grafik, nie robiła takich rzeczy :D

    OdpowiedzUsuń
  14. Bardzo ciekawy pomysł i superowe kolorki!
    Pozdrawiam serdecznie :)

    OdpowiedzUsuń
  15. Efekt bardzo ciekawy! Świetnie to wygląda :)

    OdpowiedzUsuń
  16. Bo nie dostosowałaś w CSSie kodu pod siebie. Wszystkie kolorowe i pogrubione wartości są zmienne, to znaczy, że nie są stałe i trzeba je dostosować pod siebie ;) Wartości w kodzie, to moje wartości, nie koniecznie mogą one się sprawdzić na innym blogu ;)

    OdpowiedzUsuń
  17. no właśnie próbuje od godziny dostosować pod siebie :p Ikonka facebooka jest jakby zakotwiczona, podobnie instagram. Niektóre można poruszać inne wcale

    OdpowiedzUsuń
  18. EDIT: udało się poprzesuwać niektóre ikony :) Plastra niestety nie ma, ale dziękuję za kody. Pozdrawiam!

    OdpowiedzUsuń
  19. Ikonka facebooka to nasz punkt odniesienie - ja trzeba najpierw ustawić, a później resztę, powinno się ładnie ułożyć :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona