Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Przepis na ikonki społecznościowe

||
Prawie wszystkie dostępne od ręki szablony posiadają opcję wprowadzenia ikonek społecznościowych. Są jednak templatki, gdzie dodawanie tym podobnych elementów wiązałoby się ze zburzeniem koncepcji designu lub z góry zostało narzucone, iż dany wygląd będzie wolny od wszelakich powiązań z mediami. Dla uparciuszków, którzy za wszelką cenę chcą zamieścić ikonki społecznościowe gdzieś w widocznym miejscu na blogu, przygotowałam dzisiejszą instrukcję. Zabawa polega jedynie na skopiowaniu adresu URL obrazka, podlinkowaniu go do wybranej strony i wstawieniu tego wszystkiego do gotowego kodu. W razie wątpliwości, pytajcie!

1) Na samym początku musimy znaleźć sobie ikonkę, która nas interesuje. Przyjmijmy wersję taką, że chcemy dodać na bloga odnośniki do naszego konta na Facebooku i Twitterze. Wchodzimy na stronę www.iconfinder.com, w białym pasku z napisem Search for icons wklepujemy nazwę serwisu społecznościowego, który nas interesuje. Naszym oczom ukaże się rzesza ikonek. Przewijamy stronę nieco w dół i w lewym pasku bocznym wybieramy opcję Free.

2) Teraz ujawniła się lista właściwych ikonek. Szukamy takiej, która najbardziej nam odpowiada. Zawsze możemy skorzystać z lewego paska, który oferuje filtrację wyników wyszukiwania (według koloru, tła itd.). Gdy już znaleźliśmy swój ideał, klikamy na niego.


3) Przed nami wyłania się ikonka w całej okazałości. Nad nią znajdują się rozmiary. Wybieramy taki, który nas interesuje. Możecie na bieżąco obserwować i regulować wielkość znaczka, gdyż podgląd aktualizuje się automatycznie. Skopiujmy adres URL obrazu tejże ikonki. Kiedy ta część jest już za nami, przechodzimy do "montażu".


4) Wchodzimy w panel bloga >> układ >> dodaj gadżet (w wybranym przez nas miejscu) >> HTML/JavaScript, po czym w białe pole wklejamy poniższy kod.
<a href="ADRES STRONY" TARGET="_blank"><img src="LINK DO IKONKI"border="0" alt="Photobucket" /></a>

5) W miejsce oznaczone jako Adres strony wklejamy odnośnik do naszego konta. W moim przypadku byłoby to https://www.facebook.com/katalog.grafikow. Zamiast słów Link do ikonki wklejamy adres URL naszego obrazka. Gotowe! Powielamy kod i uzupełniamy innymi danymi.

Jestem zdania, że każdy powinien sobie poradzić z tą instrukcją, gdyż jest ona dziecinnie prosta. Wystarczy powielać jedną formułkę, a jedynym wysiłkiem jest tutaj odnalezienie ikonki, która nam odpowiada oraz wypełnienie kodu odpowiednimi danymi. Mam nadzieję, że podołacie wyzwaniu!

12 komentarzy

  1. Odpowiedzi
    1. Cieszy mnie to niezmiernie :)

      Usuń
    2. Mi nie chce się przekierować jak kliknie się na ikonke ;/

      Usuń
    3. Dopóki nie zobaczę kodu, nie jestem w stanie pomóc. Polecam sprawdzenie, czy nic nie zostało omyłkowo usunięte podczas tworzenia poszczególnych linków. ;)

      Usuń
  2. Świetny post/instrukcja :D Od dawna chciałam umieścić u siebie na blogu te ikonki tylko nigdy nie mogłam się zebrać do poszukania albo zrobienia ich :D Korzystam!

    Pozdrawiam [ diaphanerose.blogspot,com ]

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że mogłam pomóc podrzucając tę instrukcję!

      Usuń
  3. a jak usunąc te ikonki społecznościowe z szablonu?

    OdpowiedzUsuń
    Odpowiedzi
    1. Układ > edytujesz gadżet z tymi ikonkami i na dole obok "zapisz" i "anuluj" jest też przycisk "usuń".

      Usuń
  4. Prosto, krótko i na temat. Dziękuję :-)

    OdpowiedzUsuń
  5. Super, bardzo mi pomogłaś! Dziękuję :)

    OdpowiedzUsuń
  6. Jak skopiować ten adres ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Prawy klawisz na obrazku i wybierz "Kopiuj adres obrazu". ;)

      Usuń