26 aprilie 2013

Cum sa adaugati social media icons/butoane personalizate header-ului

M-am chinuit putin sa aranjez butoanele alea sus, deoarece daca le adaugam ca imagini cu link nu mergeau pozitionate decat unele sub altele. A fost mai usor cu cele din lateral si pana la urma am procedat asemanator si pentru cele de sus.
Asadar, iata ce aveti de facut daca vreti sa adaugati butoane, atat in partea de sus, cat si in bara laterala:

1. Cautati butoanele. Sunt foarte multe variante, in toate formele si culorile posibile. Doar dati un search cu "social media icons" pe Google si o sa gasiti tot ce va vrea inima.
De pe aici imi gasesc eu de obicei butoanele:
http://www.hongkiat.com/blog/category/free-icons/
http://www.iconfinder.com/
http://iconsparadise.com/   sau vesnicul http://deviantart.com/
Daca aveti ceva experienta in Photoshop/orice alt program asemanator si vreti sa va faceti singuri butoanele, cautati niste clipart-uri potrivite si apucati-va de editat.

2. Urcati butoanele pe un site. Eu folosesc Photobucket, dar mai sunt multe altele pe care cred ca le stiti.

3. Acum o sa fie putin mai complicat, dar nu va panicati, veti trece si peste asta usor. Am sa va explic cum trebuie sa procedati pentru un buton, pentru mai multe fiind nevoie doar sa repetati acest pas.

Mergeti la Panoul de control -> Aspect -> "Adaugati un obiect gadget"


















Daca vreti ca butoanele sa fie in partea de sus, selectati optiunea de sus, iar daca vreti sa fie in bara laterala, selectati optiunea din... bara laterala.

Selectati gadget-ul "HTML/JavaScript".


In caseta, adaugati urmatorul cod:
<a href="adaugati un link aici"><img src="adaugati linkul imaginii aici" /></a>
Inlocuiti adaugati un link aici cu linkul paginii/site-ului catre care doriti sa conduca butonul, apoi adaugati linkul imaginii aici cu linkul imaginii butonului. Pentru a gasi linkul imaginii butonului, dati click dreapta pe imagine, apoi pe "copiati adresa URL a imaginii".
* Nu stiu daca merge si fara ghilimelele alea codul, dar eu le pastrez pentru orice eventualitate.

Daca nu ati inteles, va dau un exemplu concret:
Vreau ca butonul aflat aici sa redirectioneze catre postarile care au la etichete si "Alb si negru"(modul meu de a spune creatii). Intru pe blog, dau click la etichete (numite "rafturi" la mine pe blog) pe "Alb si negru", apoi copiez de sus linkul.

Inlocuiesc in cod prima parte cu linkul proaspat copiat si pe care l-am scris cu italic:
<a href="http://chucky-world.blogspot.ro/search/label/Alb%20si%20Negru"><img src="adaugati linkul imaginii aici" /></a>

Merg la imagine, dau click drepata si "copiati adresa URL a imaginii":

Inlocuiesc in cod partea a doua cu linkul pe care l-am ingrosat:
<a href="http://chucky-world.blogspot.ro/search/label/Alb%20si%20Negru"><img src="http://i1235.photobucket.com/albums/ff423/Mirunyk24/butoncreatii.png" /></a>

Dupa asta salvati gadgetul si gata!

Optional: Asta e mai ales pentru butoanele adaugate la header: inainte de cod adaugati <center> si dupa </center> pentru a centra butoanele (arata ciudat cand sunt inghesuite intr-o parte).


V-am zis ca ma apuc de tutoriale, deci asta am si facut. Pentru intrebari si sugestii apelati cu incredere la comentarii, imi cam place sa fac tutoriale din astea si sa va pot fi de folos.

2 comentarii:

Tu ce părere ai?

Ti-a placut? Transmite mai departe!