piątek, 30 maja 2014

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;}

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

9 komentarzy:

  1. właśnie o tym myślałam przy planowaniu nowego szablonu i miałam się do Was zwrócić z prośbą o pomoc :) takie miłe zaskoczenie. Wasz blog jest niezwykle pomocny. w blogosferze szukam swojego miejsca już od podstawówki i zawsze tworzyłam szablony najprościej jak się dało. dzięki Wam w końcu zebrałam się i zaczęłam bawić się CSSem <3 będę tutaj częstym gościem ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Miło czytać takie słowa :) Skoro dzięki nam zabrałaś się do CSS'a, to tym bardziej zapraszam do naszego konkursu! :D

      Usuń
  2. Kiedyś bardzo potrzebowałam takiej instrukcji :)

    OdpowiedzUsuń
    Odpowiedzi
    1. O dziwo, jest to bardzo prosta instrukcja i sama nie wiem, czemu leżała odłogiem tak długo... Zawsze było coś do roboty i dopiero teraz mam czas na przejrzenie ich i zmierzenie się z niektórymi ;)

      Usuń
  3. W skórkach na życzenie montuję gadżet, w którym wystarczy uzupełnić adresy a ikony pojawią się same. Zrobiłem to z lenistwa i dla świętego spokoju (wiele osób nie zna HTML i trzeba by im tłumaczyć jak to uzupełniać).
    Wole też jak takie dodatki/menu tworzone jest za pomocą listy (ul/li), może nieco więcej kodu, ale fajnie się to wszystko potem ogarnia w CSS.

    OdpowiedzUsuń
  4. A jak zrobić żeby te ikony znalazły się obok kart w nieruchomym menu na górze strony? Tak jak tu: http://zlodziejka-ksiazek.blogspot.com/

    OdpowiedzUsuń
  5. wszystko super tylko nie potrafie znalezc która to ramka html :(

    OdpowiedzUsuń
  6. wszystko super tylko nie potrafie znalezc która to ramka html :(

    OdpowiedzUsuń
  7. Miałabym prośbę o pomoc w szacie menu/kart. Chodzi mi o to jak dodać między tytułami menu np.kropkę czy gwiazdkę.

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler