Ikony społecznościowe w menu

W propozycjach od dłuższego czasu wisi prośba o ikony społecznościowe w menu. Przyznam szczerze, że wstrzymywałam się z tą instrukcją, bo tak naprawdę nie wiedziałam, czy dokładnie o to chodzi tej osobie. Dlaczego? Ponieważ ikony społecznościowe można dodać w menu na różne sposoby (chodzi mi bardziej o wizualizację tych opcji). Ikony społecznościowe to bardzo wygodne wyjście, jeśli chcemy w prosty sposób zwrócić uwagę naszych czytelników na konkretne portale. No dobra, w takim razie zaczynamy!

1. By dodać ikony użyjemy ramki Java/HTML, więc dodajmy ją już do naszego bloga w układzie. Do tej instrukcji posłużę się szablonem Simply clever, bo dalej mam go na próbnym blogu, a na gotowym szablonie będzie wszystko lepiej widać.

2. Szukamy naszych ikon. Dużo gotowych znajduje się na deviantart.com - polecam. Wiele dostępnych opcji pod tym linkiem - klik. Wybieramy sobie jedną z dostępnych paczek, a potem zapisujemy na naszym dysku. Otwieramy plik. W tym miejscu, żeby mieć porządek, proponuję utworzyć nowy folder na dokładnie te ikony, które nas interesują - facebook, twitter, fm, kto co woli.

3. Odpalamy jakiś hosting, np. tinypic.com i tam linkujemy nasze social icons. U mnie będzie ich aż 3 (szaleństwo!): facebook, e-mail oraz follow+. Teraz bierzemy się za dodaną wcześniej ramkę, czyli JavaScript/HTML.

4. Korzystamy z kodu na odsyłacz obrazkowy, tj.

<a href="adres"><img src="adres naszego obrazka"/></a>

i używamy go do każdej ikony, jaką chcemy dodać. Za "adres" dodajemy docelowy adres strony, gdzie obrazek ma nas wyrzucić, a za "adres naszego obrazka" wklejamy adres zalinkowanej wcześniej social icon. W moim przypadku kod będzie wyglądał tak:

<a href="http://www.blogger.com/follow-blog.g?blogID=1963577186215401607"><img src="http://oi57.tinypic.com/t9d0yx.jpg"/></a>

<a href="milto: affabre.sis@gmail.com"><img src="http://oi57.tinypic.com/15xs6f9.jpg"/></a>

<a href="https://www.facebook.com/GraphicalThoughts"><img src="http://oi61.tinypic.com/2jch3tc.jpg"/></a>

Zapisujemy gadżet. Nasz efekt póki co - zobacz.

5. Idziemy dalej. Teraz musimy dopasować naszą ramkę w miejsce, które nam pasuje - tutaj już spraw należy do Was, bo w zależności, gdzie chcecie, żeby ikony były, taki kod musicie naskrobać. Jeśli wiedzie, jaki numer ma dana ramka, możecie to zrobić spokojnie w edycji CSS. Przykładowo, u mnie w szablonie jest to ramka #HTML1. Próbujemy więc. Osobiście nie mam tak dużych wymagań, chcę jedynie wyśrodkować ikony i zwiększyć odległość międzdzy nimi, a więc:

#HTML1 {text-align: center; letter-spacing: 10px;}

efekcik drobniutkich zmian

Dzięki temu jednak, że nasze ikonowe menu działa w zwykłej edycji CSS, możemy dodać więcej efektów - a:hover, jakieś bordery, cienie - co w duszy nam gra. W tym również position: fixed/absolude/relative, co ułatwi nam dopasowanie ramki w tym miejscu, o które dokładnie nam chodzi. Warto też zauważyć, że nie trzeba tworzyć nowej ramki HTML. Jeśli już jakąś posiadamy i szczęśliwie zawiera ona elementy naszego menu, wystarczy dodać do niej kod z <a href>[nasze obrazy/odnośniki]</a>, który wisi wyżej. 

No, to chyba tyle. Jeśli macie jakieś pytania do tej instrukcji i efektów - proszę zostawiać je w komentarzach pod postem lub standardowo na ask.fm.