TECHNICZNIE cz.3: Ikonki społecznościowe, like boxy i inne.

Cześć! To moje 3 podejście do napisania tej notki, blogger chyba bardzo nie chce żebym go dziś opublikowała bo kasuje całą moją pracę i jeszcze w dodatku zapisuje wszystko automatycznie, nie pomaga Ctrl+Z. Może jednak tym razem się uda. Dzisiaj chciałam kontynuować cykl postów technicznych i pokazać Wam jak utworzyć na Waszym blogu ikony społecznościowe, dodać gadżet like boxa, czy wyskakujące okno z Waszym fan page.

Zaczynam od ikonek społecznościowych. Co to jest? To grafika, która przenosi Was na fan page Waszego bloga na Facebooku, czy do profilu na Instagram, bądź pozwala na wysłanie do Was wiadomości za pomocą menadżera poczty. 

Proces tworzenia ikonek społecznościowych zaczynamy od znalezienia odpowiednich grafik, wszystkie powinny być w jednym wymiarze, najlepiej w formacie .png z przezroczystym tłem. Następnie wrzucamy je na jakiś serwer, tak aby każde zdjęcie miało osobny link, ja używam portalu Photobucket, po utworzeniu własnego konta możemy przechowywać tam swoje grafiki i bez problemu uzyskujemy link do konkretnego zdjęcia/obrazu.

Kiedy już mamy załatwioną sprawę grafiki przechodzimy do panelu Bloggera i klikamy:

Układ ⇒ Dodaj gadżet ⇒ HTML/JavaScript i w pole "treść" wpisujemy wg wzoru:

<center> <div id="navbarmenu"> <ul><center> <a href="Link_Do_Przekierowania_1" title="Nazwa_Ikonki_1"><img alt="Nazwa_Ikonki_1" src="Link_Do_Grafiki_1" /></a> <a href="Link_Do_Przekierowania_2" title="Nazwa_Ikonki_2"><img alt="Nazwa_Ikonki_2" src="Link_Do_Grafiki_2" /></a> </center> </ul> </div> </center>

Linijkę:

  <a href="Link_Do_Przekierowania_1" title="Nazwa_Ikonki_1"><img alt="Nazwa_Ikonki_1" src="Link_Do_Grafiki_1" /></a>

powtarzamy tyle razy ile jest to konieczne.

Jeśli chcecie, aby ikonka np. z kopertą przenosiła Was do automatycznego tworzenia wiadomości email na Wasz adres (jeśli ktoś ma menadżera poczty) to konieczna jest taka linijka w kodzie:

<a href="mailto:Adres_Email" title="email"><img src="Link_Do_Grafiki" /></a>

Oczywiście już szybciutko objaśniam Wam co znaczą konkretne rzeczy w kodzie:
Link_Do_Przekierowania - link, na który zostaniemy przeniesieni po kliknięciu w grafikę,
Nazwa_Ikonki - będzie się wyświetlać po najechaniu na ikonkę myszką, np. "Facebook", "Instagram" itp.
Link_Do_Grafiki - link do grafiki, którą umieściliśmy na serwerze,
Adres_Email - Twój adres email.

Teraz czas na like boxy, są różne rodzaje, najlepiej tworzyć go przez TĄ stronę, mamy tam podgląd wszystkich zmian, które wprowadzamy.

Facebook Page URL - adres do Waszego fan page

Width - szerokość (najlepsza będzie troszkę mniejsza niż szerokość paska bocznego),

Height - wysokość,

Show Friends' Faces - po włączeniu tej funkcji będą wyświetlać się profile osób, które lubią tą stronę,

Show Posts - po włączeniu tej funkcji będą wyświetlać się będą najnowsze posty publikowane na fan page,

Show Header - jeśli włączymy tą opcję będzie się wyświetlał tekst "Znajdź nas na Facebooku",

Show Border - gdy jest włączona ta funkcja mamy ramkę dookoła gadżetu, jeśli ją wyłączymy nie mamy ramki.

Gdy wszystko już nam pasuje klikamy "Get code" i kopiujemy oba kody do schowka. Wchodzimy w panel Bloggera i klikamy Układ ⇒ Dodaj gadżet ⇒ HTML/JavaScript i w pole "treść" wpisujemy całość. Zapisujemy i mamy już wszystko gotowe.

Jeśli chcecie wyskakujące okno to polecam Wam TĄ stronę, gdzie uzyskujemy gotowy kod html, który wklejamy na bloga w sekcji body. Aby to zrobić wchodzimy w panel Bloggera:

Szablon ⇒ Edytuj kod HTML i odszukujemy tam następujący fragment kodu:

</body>

przed nim wklejamy otrzymany kod i zapisujemy zmiany.