Graphic Tricks #10: Social Icons (effetto hoover e risorse)

Ciaoooo amici!!!

Oggi mi cimento in qualcosa che non ho mai fatto , ovvero parlarvi di grafica e html. Non l'ho mai fatto apertamente perchè non ne è mai capitato l'occasione sul mio Briciole, anche se spesso e volentieri mi sono sbizzaritta a usarne di diversi: inoltre ho ricevuto email da parte di altri blogger che chiedevano consigli e aiuti. Per quanto possibile, ho cercato di aiutare tutti, perchè sì, io sono una frana in queste cose, però in due anni e mezzo di blogging qualche codice utile l'ho imparato, e allora volevo condividerlo con voi :3 Lo specifico, non sono un'esperta, molte cose non so neanche che significano (non è incoraggiante, I know >-<"), ma ci sono e per come le uso io funzionano, quindi, se tutto va bene, dovrebbero funzionare anche per voi ^^

Detto ciò, andiamo!

Questo codice HTML in particolare che vi spiegherò oggi serve per avere delle Social Icons interattive, se possiamo dire così, ovvero che cambino colore al passaggio del mouse. 

Il codice originale l'ho trovato su Carrie Loves, un blog statunitense dove potete trovare trovare anche dei bellissimi set di social icons con le icone più utilizzate, disponibili in tutte le tonalità che desiderate e in formati diversi di grandezze (32px, 48px e 72px). Le potete scaricare QUI. Mi raccomando lasciate un ringraziamento o like al blog o sui suoi social, perchè l'autrice mette a disposizione delle risorse bellissime gratuitamente (e se non ci fosse io non avrei saputo come fare XD)!!!

Partiamo allora dai fondamentali. Solitamente le nostre icone sociali (ma questo vale per qualsiasi immagine che riporti a un link, come i bannerini dei nostri blog o dei giveaway) riportano alla pagina Facebook del blog, di Twitter eccetera eccetera e hanno questo codice:

<a href="LINK PAGINA" title="nome della pagina"><img alt"nome della pagina" src="URL ICONA O IMMAGINE" / /></a>

Esempio:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" src="http://imgur.com/GW8kk2R.png" / /></a> 

Per avere l'effetto interattivo al passaggio del mouse, come questo qui...

...dobbiamo per prima cosa avere a disposizione due set differenti di social icons. Ad esempio, nel mio caso ho scaricato  Radian Orchid e Warm Mint proprio da Carrie Loves.

Scegliamo quale dei due sarà l'immagine fissa e quale quella che si vedrà al passaggio del mouse - nel mio caso Radiant Orchid è l'icona fissa, Warm Mint quella che apparirà con il mouse poggiato sopra - e usando un qualsiasi sito di hosting come Imgur, Tinypic o simili, ricavate l'url dell'immagine. Ecco le mie:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R

Warm Mint (Icona 2): http://imgur.com/R3cYaTC

Attenzione! Su Imgur avrete solo il link all'immagine, ma per farla funzionare nel codice in questione, bisogna aggiungere .png alla fine dell'URL. Quindi diventeranno:

Radian Orchid (Icona 1): http://imgur.com/GW8kk2R.png

Warm Mint (Icona 2): http://imgur.com/R3cYaTC.png

Il codice HTML di base che ci serve per avere l'effetto interattivo è questo:

<a href="LINK PAGINA" title=""><img alt"nome pagina" onmouseout="this.src='URL ICONA1'" onmouseover="this.src='URL ICONA2'" src="URL ICONA1" / /></a> 

Quindi, andiamo a inserire i nostri URL:

<a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"><img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a>

Abbastanza semplice, no?

Consiglio! Per centrare la nostra icona aggiungete all'inizio del codice <div align="center"
HTML</div> utilissimo anche per centrare un'immagine o del testo nei nostri post o nella sidebar.

<div align="center"><a href="https://www.facebook.com/bookbloggersideeffects/" title="BBSE su Facebook"> <img alt="BBSE su Facebook" onmouseout="this.src='http://imgur.com/GW8kk2R.png'" onmouseover="this.src='http://imgur.com/R3cYaTC.png'" src="https://imgur.com/GW8kk2R.png" / /></a></div>

Inserite il codice HTML nella vostra sidebar con il gadget Html - se siete alle prime armi potete seguire questo nostro tutorial.

Spero di essere stata chiara, insomma dovete solo fare opera di copia e incolla ;) Fatemi sapere se vi sono stata utile e se userete questo codice per rendere le vostre social icon più carine e accattivanti!!! Alla prossima (forse), 

Rosa