HTML help corner: social icons

18:38

Cześć, kochani!

Nigdy nie wspominałam o tym na tu blogu, ale bardzo interesuję się designem komputerowym. Przeróżnym - grafik, szablonów stron, gadżetów. Szata graficzna tego bloga to w głównej mierze moja zasługa, tak samo jak mojego tumblra. Dlatego co jakiś czas dostaję pytania o to, jak zrobiłam to czy tamto. Postanowiłam więc stworzyć nową kategorię postów na moim blogu, a mianowicie HTML help corner, czyli dosłownie kącik porad html :)

Dzisiaj zajmiemy się tak zwanymi social icons, czyli niewielkimi ikonkami, które poprzez kliknięcie na nie prowadzą nas do różnych stron. Zwykle używanych do podlinkowania facebooka, instagrama, twittera i innych stron społecznościowych, stąd nazwa. Oczywiście w linku możecie umieścić, co tylko chcecie :) Oto przykłady - szare kółka jakiś czas temu gościły na moim blogu, ale postanowiłam wprowadzić trochę koloru do szablonu i zmieniłam je na wzorzyste wstążki.
Nic nie zrobimy, jeśli jednak naszych ikonek nie mamy. Wiele gotowych do użycia możecie znaleźć na iconarchive i tą stronę bardzo polecam. Od razu jest też wybór wielkości. Nic prostszego!
Oczywiście można zrobić taką ikonkę samemu - na podanej stronie nie było takie kółeczka do strony ask.fm, więc musiałam sobie poradzić sama. Wstążki to też moja robota. W tym wypadku trzeba pamiętać o ustaleniu jednego rozmiaru ikon i wstawieniu ich na stronę przechowującą obrazy, np. tinypic.
Dajcie znać, czy chcielibyście taki tutorial na własne ikonki ;)

Teraz czeka nas już tylko dodanie gadżetu. Na bloggerze wygląda to tak:
 wejdź na zakładkę Projekt > Układ > Dodaj gadżet > HTML/Java script
 wprowadź tekst wyjściowy, czyli
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
tu wprowadź linki
</div></div>
 do każdego linku wyjściowy kod wygląda tak (oczywiście można dodać ich dowolną ilość, ale trzeba uważać, by nie przesadzić):
<a href="LINK DO STRONY"><img border="0" src="LINK DO OBRAZU" /></a> 

I gotowe!
Co myślicie o takich prostych poradnikach? Chcielibyście, bym opisała coś konkretnego? :)

You Might Also Like

13 komentarze

  1. Z chęcią przeczytałabym więcej podobnych postów, bo akurat ikonki wiedziałam jak zrobić, ale z chęcią dowiem się czegoś nowego :)

    http://minimalistyczny.blogspot.com/

    OdpowiedzUsuń
  2. Bardzo przydatne! Chętnie przeczytam więcej postów z takimi instruktażami :))

    www.fotoinigi.blogspot.com

    OdpowiedzUsuń
  3. Ojjj, ja w HTML-ach jestem zielona :D Zapraszam na nowy post dotyczący Zumby ♥ Pozdrawiam

    OdpowiedzUsuń
  4. dzięki wielkie za te post, chciałbym ustawić sobie takie ikonki na bloga :P zapraszam do mnie, pozdrawiam :*

    OdpowiedzUsuń
  5. Super że zrobiłaś taki tutorial ,jak będę miała więcej czasu ot napewno nad tym przysiądę. Już zyskałaś stałą czytelniczkę kącika :)

    OdpowiedzUsuń
  6. To najprostszy poradnik dotyczący social icons, który widziałam do tej pory, a ostatnio wdziałam tego na prawdę sporo :)
    Dzięki Tobie chyba w końcu opuści mnie niebieski pasek oferowany przez inatagram i w końcu zrobię coś swojego :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo się cieszę, dzięki i powodzenia :)

      Usuń
  7. i wszystko jasne!
    Ps. śliczne zdjęcie :) takie delikatne,
    pozdrawiam :)
    klaudiakalina.blogspot.com

    OdpowiedzUsuń
  8. Post bardzo mi się przydał, szczegolnie ta strona z ikonkami :)

    Zapraszam do mnie na konkurs, gdzie nie trzeba nic lajkować i obserwować :) !

    OdpowiedzUsuń
  9. myślę że takie poradniki to fajny pomysł, czekam na kolejny post :)

    OdpowiedzUsuń
  10. Też się interesuję tego typu rzeczami :) Jak najbardziej dodawaj więcej takich poradników, może dowiem się czegoś nowego :)
    http://rosylette.blogspot.com/

    OdpowiedzUsuń
  11. Dla mnie takie poradniki to super sprawa :)

    OdpowiedzUsuń

Czytam wszystkie komentarze i odpowiadam na każde pytanie :)

Popular Posts

WeHeartIt

Subscribe