DESIGN, PRZYDATNE

Jak zrobić i dodać na bloga ikonki mediów społecznościowych?

ikonki social media dog

ikonki social media dog

Na szybko przed wyjazdem – jak w prosty sposób, bez drogich programów przygotować ikonki mediów społecznościowych na bloga. Bo prawdą jest, że jak Cię widzą, tak Cię piszą. Tzn nie wystarczy samo pisanie najlepszych tekstów. Dobry (profesjonalny) wygląd bloga pomaga, by czytelnicy i ewentualne firmy zainteresowane współpracą potraktowały nas poważnie. U mnie wygląd bloga kuleje. Ale postanowiłam to zmienić. Inspirując się tym, co podoba mi się w blogosferze (a co? kopiować nieładnie, ale inspirować się tym, co robią inni jest jak najbardziej wskazane). Zresztą nikt nie ma monopolu na dobre pomysły. Ale pragnę to zrobić korzystając z darmowych (i ogólnie przystępnych narzędzi), by udowodnić, że każdy bloger może stworzyć ładnego (i profesjonalnie wyglądającego bloga). To moje wyzwanie na najbliższe miesiące. Mam zamiar dzielić się z Wami moimi postępami prac. I jednocześnie zachęcić Was do pójścia moim śladem, czyli do dopracowania (dopieszczenia) wyglądu bloga. Tak, by odpowiadał Waszej osobowości (i temperamentowi) i stał się miejscem, do którego każdemu (tj.  autorowi i czytelnikom) miło będzie zaglądać.

A tymczasem na szybko przed wyjazdem wzięłam na warsztat ikonki mediów społecznościowych. To takie must have na blogu. Jednocześnie dobrze by współgrały z klimatem bloga i by maksymalnie je zindywidualizować.  Szczęśliwie nie trzeba być tu artystą-grafikiem. Możemy skorzystać z gotowych ikonek za free.  

Gdzie znalezć  ikonki mediów społecznościowych?

Oto kilka stron, na których znajdziecie całe pakiety ikonek mediów społecznościowych do pobrania:
50 free social media icons
44 must have free social-media-icon-packs

free-social-media-iconsgrafika na bloga, jak zrobić ikonki mediów społecznościowych
Ikonki ze strony Dribbble

Jak zrobić  ikonki mediów społecznościowych?

Po wybraniu najbardziej pasującej nam od strony estetycznej planszy, kopiujemy ją i zapisujemy na komputerze. 

Następnie w dowolnym programie graficznym wycinamy te, które są nam potrzebne. U mnie były to ikonki z Facebooka, Twittera, Google Plus i Pinterestu. 

Zeby było jak najprościej możecie skorzystać z ogólnie dostępnego programu jakim jest Picmonkey.com. Trochę trzeba będzie w nim pogrzebać. Ale czyż istnieje lepsza metoda, by się czegoś nauczyć?

Wchodzimy do Picmonkey, wybieramy Edit, pobieramy zapisaną planszę z ikonkami. Za pomocą opcji Crop wycinamy potrzebne nam ikonki. Ja wycięłam je w formie kwadratu i pilnowałam, by miały jednakowe gabaryty. Zapisujemy każdą z ikonek pojedynczo. 

grafika na bloga, jak zrobić ikonki mediów społecznościowych
 

Kiedy mamy już przygotowane nasze ikonki, składamy je w całą listwę. Tu rownież posłużyłam się Picmonkey. Tym razem weszłam w Design. Sciągamy zapisane pojedynczo ikonki (w tym celu wybieramy ikonkę z Motylkiem). Ustawiamy je w formie listwy. Przycinamy (za pomocą opcji Crop) i zapisujemy.

grafika na bloga, jak zrobić ikonki mediów społecznościowych
 
 
grafika na bloga, jak zrobić ikonki mediów społecznościowych

Pamiętajmy o tym, by odpowiednio przewymiarować naszą listwę ikonek. W PicMonkey mamy w tym celu opcję Resize. Ta opcja jest dostępna w części Edit. Czyli jeszcze raz otwieramy PicMonkey, wybieramy Edit, pobieramy do niego naszą listwę i wybieramy odpowiednie wymiary (w zależności od szerokości naszego panelu bocznego, jeżeli do niego chcemy wstawić nasze ikonki). Ja wybrałam szerokość 200 px. 

Jak dodać  ikonki mediów społecznościowych?

Teraz skorzystamy z programu Image-maps.com   po to, by do każdej ikonki z naszej listwy dorzucić odpowiedni adres URL (prowadzący na nasz profil w wybranym medium). Sam program jest bardzo intuicyjny. Wszysto opisałam na zdjęciach.

grafika na bloga, jak zrobić ikonki mediów społecznościowych

 Sciagamy naszą uprzednio przygotowaną w PicMonkey listwę z ikonkami.

grafika na bloga, jak zrobić ikonki mediów społecznościowych

Kiedy obrazek został pobrany, możemy zacząć przygotowywanie jego Mapy z adresami URL, do których ma prowadzić.

grafika na bloga, jak zrobić ikonki mediów społecznościowych

 Kolejna plansza do przejścia.

grafika na bloga, jak zrobić ikonki mediów społecznościowych

Obrazek jest już wgrany, czeka na obrobkę (u mnie przykrywa go żołty komunikat). Teraz klikamy na niego  prawym klikiem myszki i wybieramy Create Rect (czyli stworz prostokąt).

grafika na bloga, jak zrobić ikonki mediów społecznościowych

 Zaznaczamy (tym wcześniej zamowionym przez Create Rec) prostokątem naszą pierwszą ikonkę i wpisujemy adres URL do jakiego ma prowadzić. Musicie tu po prostu wejść na Waszego fanpaga i pobrać jego URL, a następnie wkleić w rubyrkę Map URL. Postępujemy podobnie z pozostałymi ikonkami.

grafika na bloga, jak zrobić i dodać ikonki mediów społecznościowych

Tak to wygąda po wpisaniu właściwego adresu (tu mojego fanpaga Moda na bio)

grafika na bloga, jak zrobić i dodać ikonki mediów społecznościowych

Gdy każda ikonka jest już opisana (u mnie wszystkie zaznaczone na czerwono) pobieramy kod do wklejenia na blogu.

grafika na bloga, jak zrobić i dodać ikonki mediów społecznościowych

 Wybieramy opcję HTML Code.

grafika na bloga, jak zrobić i dodać ikonki mediów społecznościowych

 

grafika na bloga, jak zrobić i dodać ikonki mediów społecznościowych

Teraz wchodzimy do Bloggera, wybieramy Układ, dodaj gadżet i wybieramy HTML/Java Script i wklejamy nasz pobrany powyżej kod.

Miłej zabawy w ozdabianie bloga.

Pozdrawiam serdecznie

Beata

Zapisz się na newsletter i pobierz darmowy ebook: TWOJA MARKA NA INSTAGRAMIE

O AUTORZE

Jestem blogerką, emigrantką, poczwórną mamą. Kobietą, która nie jednego w życiu doświadczyła, z niejednego pieca jadła chleb.

Od prawie 20 lat mieszkam na emigracji we Francji, w Paryżu.

Uważam, że emigracja to dobra szkoła życia i wymagająca, choć bardzo skuteczna lekcja pokory. Ale też wewnętrznej siły i zdrowego dystansu do samego siebie i momentami wystawiającej nas na próby codzienności.

Jestem tu po to, by pomóc Ci lepiej pisać, skuteczniej docierać do czytelnika, wywołać większe zaangażowanie w social mediach. Czasami rozśmieszę lub zmotywuję.

Ale równolegle do Vademecum Blogera jestem autorem kilku niezależnych miejsc w sieci.

Ponieważ wiele osób pyta się mnie, jak mimo 4 ciąży i 40 - stki na karku udało mi się zachować linię nastolatki, uruchomiłam kanał na YouTube o zdrowym gotowaniu - bezglutenowo - bezmlecznie.

Znajdziesz mnie również na blogu BeataRed.com i powiązanym z nim Instagramie, gdzie piszę bardziej osobiście o Paryżu i mojej pasji, jaką jest nauka języka francuskiego.

A jeżeli interesują Cię praktyczne porady o tym, jak budować swoją obecność w sieci zapraszam na mój kanał na You Tube z blogowymi tutorialami.

(22) Comments

  1. Weronika z Młodej Pani Domu says:

    Twój post jest odpowiedzią na moje potrzeby! Właśnie zastanawiałam się, jak to inni robią, że mają takie fajne ikonki na blogu? Super post! Ja zamierzam popracować nad oprawą graficzną mojego bloga 🙂 Mam już nawet rozpisany mój wielki plan i zebrane ręce do pomocy 🙂 Fajnie, że jest ktoś, kto ma podobny cel 🙂 dzięki temu łatwiej będzie mi się zmobilizować. Pozdrawiam!

    1. Weronika z Młodej Pani Domu says:

      P. S. Miło mi się widzieć w Twoich „Podczytywanych” 😉

  2. Libetias says:

    Fajny sposób na wgranie unikatowych ikonek społecznościowych. Jednak osobiście wolę gdy po najechaniu na poszczególną ikonkę będzie jakaś reakcja (podświetli się, pojawi się napis dokąd link prowadzi, albo chociaż pojawi się link w lewym dolnym roku przeglądarki).

  3. ciekawy sposób jednak, dla mnie prościej zrobić to w programie graficznym 🙂

  4. świetny post, bardzo praktyczny

  5. super blog, bardzo dobry post – mega praktyczny!

  6. Dołączam do wyzwania, bo i mój blog potrzebuje solidnego remontu 😉
    Pozdrawiam

  7. Heh..mam podobny post przygotowany w ramach akcji upiększania blogów:P Mimo wszystko go zamieszczę w przyszłym tygodniu bo trafiają pewnie do mnie inne osoby:)
    Mam nadzieję, że nie będziesz miała nic przeciwko jeśli tu napiszę, że dzisiaj się kończy konkurs u mnie w którym do wygrania jest zaprojektowany przeze mnie główny baner blogowy.

    Ściskam!
    Karolina

  8. Ciekawy post, dla mnie może okazać się przydatny, bo chodzi mi po głowie, aby usunąć linki do portali społecznościowych z listy stron i przenieść je gdzieś indziej. A przy okazji można zachować konsekwencję stylistyczna ikonek:)

  9. Beatko, coraz ładniej tu się robi. Gdyby nie mąż spec, to pewnie bym skorzystała z Twojej instrukcji. Pozdrawim serdecznie.

  10. Bardzo ladne ikonki a dotego fajnie pokazane jak je zrobic.
    Poczatkujacym napewno sie przyda

  11. Też mi się marzy nowy wygląd bloga, ale ja to chyba jednak powierzę specjalistom.

  12. Fantastycznie, nareszcie trafiłam na fajne, czytelnie napisane blogowe rady. Człowiek się niekiedy gubi w tym e-projektowaniu a tu prosto i na temat. Wielkie dzięki:)

  13. Wow! Wspaniały artykuł, pięknie krok po kroku wyjaśnione, z takimi radami każdy sobie poradzi; )
    Pozdrawiam!

  14. Mam pytanie, czy ten Image Maps jest darmowy, bo wydaje mi się, że widziałam tam jakieś kwoty. Jeśli tak, to czy jest inny darmowy program do mapowania?

    1. Beatko: wydaje mi sie, ze ten program jest darmowy (przynajmniej ja skorzystalam z niego za darmo, ale moze tak jak ze wszystkim sa jakies opcje podstawowe bezplatne i inne w wersji pro (odplatne). Jezeli szukasz jakiejs dobrej opcji do stworzenia ikonek mediow spolecznosciowych, to moge jednoczesnie polecic Add This (bo dodatkowo – oprocz ikonek masz informacje o tym ile razy likowano Twoje wpisy). Jak dobrze pogrzebac to w Add This mozna rowniez wstawic wlasne obrazki lub skorzystac z dostarczonych przez nich ikonek. Kiedys przygotowalam o tym wpisy

      http://www.vademecumblogera.pl/2013/11/jak-dodac-listwe-przyciskow-follow-me.html#.U-4WU0CRlos

      i

      http://www.vademecumblogera.pl/2013/09/jak-dorzucic-przyciski-mediow.html#.U-4Xv0CRlot

      ale cos tam sie teraz na Add This pozmienialo. Musze do tego przysiasc i na nowo rozpracowac. Pozdrawiam Beata

    2. Wielkie dzięki, jeszcze raz spróbuję ten Image Maps bo jest genialnie intuicyjny. Muszę też rozejrzeć się za nowymi szablonami na bloggera /inspiracja też od Ciebie/ bo te, które są w wersji podstawowej wg mnie są słabe graficznie.
      Coco to Napoleon mody. Dzięki niej dziś my kobiety nosimy spodnie:)
      Pozdrawiam ciepło Beata

  15. Weronika z SAE says:

    Działa 🙂 hihi 🙂 mam ikonki 🙂 jakiż ze mnie informatyk!

  16. dzieki wielkie znow zapozyczylem cos od ciebie 🙂 fajnie ze wrzucasz tutaj swoje instrukcje, sa bardzo przydatne! Zajrzyj sobie jak cos do mnie i zobacz co zdzialalem:) Szału nie ma, ale zawsze to coś:) http://www.wksgymsport.pl

  17. wooooow! dopiero zaczęłam pisać bloga i bardzo chciałam go upiększyć, bardzo się cieszę, że trafiłam na Twój poradnik, jestem pod wrażeniem, bo dowiedziałam się, że jednak da się! 😀 Pozdrawiam i dziękuję!

  18. fajnie, że jest taki blog, jak Twój, nieoceniona pomoc w tworzeniu własnego 😉 dziękuję i pozdrawiam 🙂

  19. Weronika Węgrzynowska says:

    Droga Beatko! Świetny artykuł!
    Mam jednak małe pytanie: czy te instrukcje mogą być użyte tylko na platformie Blogger? Otóż postępowałam zgodnie z nimi w WordPressie, czego skutkiem jest przesunięcie obszarów klikania na „nie tą ikonkę co trzeba”, albo danie obszaru klikania w zupełnie innym miejscu. Czy mogłabyś pomóc? Pozdrawiam

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Zapisz się na newsletter i zgarnij praktyczny ebook o Instagramie

X