Social Media Icons for Blogger

U avgustu sam objavila prvi post ovog tipa sa savetima za početnike na Bloggeru (klik) i tada sam planirala da u narednom periodu uradim još nekoliko postova o savetima za "ulepšavanje" i personalizaciju bloga. Međutim, to nikako nije dolazilo na red, sve dok mi pre par dana nije stigao mejl sa pitanjem da objasnim kako napraviti sopstvene ikonice za društvene mreže.

Ove ikonice nalaze se kod mene na vrhu trake sa desne strane. One su sjajan način da čitaocima pružite uvid u to preko kojih sve mreža mogu pratiti vaš rad. Pri tome ne zauzimaju previše prostora, a privlače pažnju i deluju profesionalno. Zato će u ovom postu biti ukratko objašnjeno kako napraviti ikonice koje će odgovarati dizajnu vašeg bloga.

Najpre je potrebno da imate određenu sliku koju ćete koristiti kao pozadinu. To može biti neka fotografija koju ste sami uslikali ili čak nešto što ste napravili u Photoshop-u. Najbitnije je da je odgovarajućeg dezena koji će se uklopiti uz kompletan dizajn bloga. Ukoliko ne znate šta biste koristili i želite da se ograničite na što jednostavniji dizajn možete koristiti čak i jednobojnu pozadinu.
Kada sam redizajnirala blog letos, prvo sam napravila pozadinu zaglavlja u Photoshop-u pomoću različitih watercolor četkica koje sam skinula sa deviantART-a. Kasnije sam odatle, sa različitih delova, isecala krugove. Ovaj postupak u Photoshop-u je jako lepo objašnjen u ovom videe (klik).
Ukratko, najpre se uverite da vam je Layer otključan. I to radite tako što idete dupli klik na Layer i OK. Zatim je potrebno da koristite Ellipce Tool, selektujte Paths i dok povlačite mišem elipsu držite taster Shift kako biste dobili krug. Zatim idete desni klik na liniju kruga, pa Make Selection, OK. Zatim u meniju Select idete na Inverse, pa Edit i Clear. Zatim uradite Crop kako biste ostavili samo kvadrat dimenzija prečnika nacrtanog kruga, bez viška pozadine okolo. Nakon ovoga pozadinu možete ostaviti da bude transparentna ili možete dodati još jedan Layer i obojiti je u boju koja je na vašem blogu na tom mestu gde postavljate ove ikonice. Savetovala bih vam da se, ukoliko pozadina nije bela, ipak opredelite za transparentnu. Sve ovo je detaljno objašnjeno u videu koji sam linkovala, pa ukoliko vam iz ovog teksta nije najjasnije, obavezno pogledajte.
Kada ste sve to odradili, trebalo bi da ste dobili nešto ovako:

Sada se odlučite za dimenziju ove sličice koju ćete primeniti i na sve ostale. Sve zavisi od broja ovih ikonica koje ćete imati, kao i širine trake koja je sa strane na vašem blogu, ukoliko tu rešite da ih postavite. Širina moje bočne trake je 280 piksela i imam po četiri ikonice u jednom redu, tako da sam se odlučila da njihova dimenzija bude 50x50 piksela. Ovo ne mora da znači da će iste dimenzije odgovarati i vašem blogu, pa uzmite to u obzir i procenite sami neku optimalnu varijantu. Dimenziju menjate tako što odete na Image i zatim Image Size.

Kada smo stigli dovde, odradili smo veći deo posla. Ono što je još potrebno jeste da dodate simbole društvenih mreža (čuveno f, p, ptičica, i slično). Možete ih naći na internetu, ima raznih vrsta i boja (bele, crne). Jedan od sajtova je možda ovaj (klik). Ja se više i ne sećam odakle sam skinula svoje, ali znam da sam nešto morala da čačkam i menjam, jer mi nisu baš svi odgovarali. Ukoliko ne budete mogli da pronađete odgovarajuće ikonice bele boje, možete mi se obratiti na mejl, pa ću vam ih poslati tim putem. Vodite računa da ćete i dimenizije tih sličica ikonica morati da promenite tako da stanu u krug. Recimo, ako je dimenzija sličice pozadine bila 50x50 piksela, dužina simbola društvenih mreža može biti oko 35-40 piksela kako bi se to sve lepo uklopilo.

Na slici iznad, koristila sam sličicu belog slova f visine 37 piksela i pomoću Move Tool postavila sam je na sredinu kruga. I to je finalni rezultat. Ostaje vam još samo da sačuvate sličicu. Ukoliko ste koristili belu pozadinu, možete je čuvati kao jpg, a ako vam je pozadina bila transparentna onda se opredelite za png format.
Na sličan način napravite i preostale ikonice mreža na kojima ste aktivni.
Kada ste to završili potrebno je još samo sve postaviti na Blogger. Najpre je potrebno da sve ikonice upload-ujete na neki sajt sa slikama. Ja sam koristila Photobucket. Odatle ćete kasnije kopirati Direct, tj. link svake slike. 

Zatim idite na Blogger-u na Izgled i tu kliknite na Dodaj gadžet.

Izaberite opciju HTML/JavaScript.

Sada ćete, u taj novootvoreni prozorčić HTML/JavaScript iz prethodnog koraka, kopirati ovakav kod:

<a href='link vašeg profila na odgovarajućoj društvenoj mreži' target='_blank'><img alt='naziv društvene mreže' src="Direct link koji ste kopirali sa Photobucket-a" title='naziv društvene mreže'/></a> 

Polja u kojima su opisi, naravno, zamenite vašim linkovima. I tako uradite za sve ikonice onim redom kojim želite da vam se pojavljuju. Znači koliko društvenih mreža toliko i ovakvih kodova morate imati u HTML/JavaScript. Na mestu gde želite da ih prelomite u novi red, recimo kod mene posle četiri ikonice, odnosno ikonice za instagram, ubacite ispred ovog koda i <br />. To je oznaka za novi red. Kada sve završite kod bi trebalo da izgleda nekako ovako:

Na kraju je potrebno da kliknete na Sačuvaj u tom gadžetu, a kasnije i Sačuvaj raspored. I to je to. Ostaje jedino da pregledate da li vam odgovara kako sve to izgleda na vašem blogu i eventualno unesete neke izmene.

Nadam se da je ovaj post bio koristan. Ukoliko nešto nisam najbolje objasnila ili imate nekih nedoumica slobodno se javite u komentarima ili na mejl. Predložite mi i šta biste sledeće od postova ovog tipa voleli da pročitate.