Jak dodać ikony social media na bloga? Tutorial.

Jeśli chcecie dodać na bloga przyciski odsyłające do waszych stron społecznościowych, trafiliście w dobre miejsce. Dziś pokażę wam jak umieścić takie ikony obok zdjęcia profilowego w kolumnie bocznej. Osiągniecie u siebie podobny efekt:

Korzystam z ikon Font Awesome. Jeśli chcecie zainstalować taką graficzną czcionkę u siebie koniecznie zerknijcie TUTAJ
1. Pierwszy krok to wybór zdjęcia profilowego i umieszczenie go w dowolnym serwisie hostującym grafikę. Potrzebujemy kodu HTML obrazka.
2. Następnie wybieramy odpowiednie ikony ze strony Font Awesome, przykładowo będą to facebook, instagram, google+ i youtube. Adresy ikon skopiujcie do notatnika.
3.Wchodzimy na blogu w Układ > Dodaj gadżet >HTML/Java
4. Wklejamy poniższy kod uzupełniając go własnymi danymi:

KOD HTML NASZEGO OBRAZKA

<br /><br />Dowolny tekst powitalny<br />

<a href="ADRES STRONY NA FACEBOOKU"><i class="fa fa-facebook-square fa-3x"></i></a>

<a href="ADRES PROFILU NA INSTAGRAMIE"> <i class="fa fa-instagram fa-3x"></i></a>

<a href="ADRES GOOGLE+"><i class="fa fa-google-plus fa-3x"></i></a>

<a href="ADRES KANAŁU YOUTUBE"> <i class="fa fa-youtube-square fa-3x"></i></a>

Pamiętajcie o wklejeniu pełnych adresów zaczynających się od http://, tylko wtedy przyciski odeślą waszego czytelnika do odpowiedniej strony internetowej. Wielkość ikon Font Awesome możemy łatwo dopasować:

Zdjęcie, które dodałam w avatarze jest okrągłe. Możecie osiągnąć taki efekt dzięki kodom CSS. W moim przypadku kod zaczyna się od HTML1, u was może to być HTML2, HTML3, itd. Łatwo to sprawdzić. Klikając prawym przyciskiem myszy na gadżet wybieramy opcję Zbadaj.

#HTML1 img {border-radius: 100%;}

Zobaczcie też mój poprzedni post: 

JAK DODAĆ IKONY SPOŁECZNOŚCIOWE OBOK MENU STRON BLOGA?