Come inserire e allineare i bottoni dei social network in un blog di Blogger [tutorial]

In questo tutorial vi spiegherò come inserire ed allineare i bottoni dei social media (FB, Twitter, Pinterest, Instagram, Flickr ecc)

La premessa è che abbiate dei bottoni (in formato jpg o png). 

Se ancora non li avete li potete scaricare (i miei li ho trovati qui ma nel web ce ne sono di tutti i tipi!) o comprare, a voi la scelta. 

Caricare i bottoni 

Dopo che avere scaricato i bottoni che volete inserire nella colonna laterale del vostro blog caricateli su Picasaweb o Photobucket. 

Qui dovete accertarvi di aver reso pubblica la visualizzazione dell’immagine e poi più in basso trovate Link a questo album. 

Cliccandoci sopra potete trovare il codice Html che poi utilizzerete per linkare il bottone all'immagine. Flaggate Nascondi link album. 

Copiate il link che trovate in Incorpora immagine ed estraete la parte che inizia con <img src. 

Lasciatelo lì che poi vi servirà.


Ora che avete caricato le immagini possiamo iniziare a comporre il codice per i bottoni. 

Il passo successivo è scrivere tutto il codice

Prima di iniziare vi invito a scrivere il codice con Notepad se usate Windows o TextEdit se lavorate con Mac. Non scrivete il vostro codice Html con Word.

Questo è lo “scheletro” del vostro bottone per creare il codice di da cui, cliccandoci sopra, si accede ad un link:

<a href="" title=""><img src="" width="" height="" alt=""></a>
 

Come si compone il codice e come usarlo

Il primo elemento che troviamo è: 

<a href=""

Il link del vostro social media andrà posizionato tra le due virgolette. 

Per esempio, se sto creando il mio link a Pinterest, inserirò il link come segue:

<a href="http://www.pinterest.com/smile1510".

Il link ad un’email sarà un po’ differente: scrivetela in questo modo 

<a href="mailto:smile1510.2@gmail.com"

Il secondo elemento è 

title="  ">

Nel titolo inserite il nome del social media che stai linkando. Per continuare con l’esempio di Pinterest, in questo caso inserirò: title="Pinterest">. Il testo che inserite apparirà quando il vostro visitatore passerà sopra il mouse della vostra icona. 

Il terzo elemento è

<img src="     "

Qui inserirete il link dell’immagine del vostro bottone. Ci ricolleghiamo quindi al codice che avete estratto dal link trovato in Picasaweb o Photobucket.

width="" height="" alt="">

In questa parte infine inserite le misure che avranno le icone e il testo alternativo.

Io per la mia icona Pinterest l’ho compilato così:

width="45" height="45" alt="Smile1510 on Pinterest">

Potete variare la larghezza e l’altezza in base alle vostre esigenze. Se volete inserire molti bottoni e la larghezza della sidebar non è molto larga provate a rimpiccilire le icone.

Le mie ora sono 45, se ne aggiungessi un’altra probabilmente dovrei variare le misure e mettere 35. 

Dopo che avete fatto tutto ciò dovete chiudere l’elemento con la tag </a>. 

Riuniamo gli elementi 

Qui sopra ho scomposto tutti gli elementi per farvi capire un po’ come si compone il codice. Riunendo tutti gli elementi il codice completo appare come segue:

 

<a href="http://www.flickr.com/photos/smile1510" title="Flickr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIu8JEjTfemW_Mb7EsM3R7h5PeUI9v86qGevP9wdMmxHXcHs75eJTJUOwMDoZ0plykjX6Y2GUEZa4-bidz4XH_ajaKHPgDfjDPIJBOTXAusfNMTbyfq8dpwlcLRBujuhkVWgwwxH3jl1c/s800/flickr.png" height="45" width="45" alt="Smile1510 on Flickr"/></a> 

Ripetete la stessa procedura per ciascun bottone.  

Manca solo un ultimo passo per allineare i bottoni. 

Allineiamo i bottoni

Bisogna raccogliere tutto dentro ad un div, che non è altro che un aggretatore. 

<div class="social-sidebar-buttons">

    </div>

Copiate tutto e incollatelo dentro ad un gadget di Blogger Html/JavaScript. 

Il gioco è fatto! 

Se non vi sentite sicuri vi lascio di seguito il codice delle mie icone: 

<div class="social-sidebar-buttons">

<a href="http://www.pinterest.com/smile1510" title="Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivu6kSPx1wikzoMhtxF0SQ-ZMBJSsN-kCZnt08H1CGv3xuE9JwF7HLVvp8Es5ezAD6Ys9xKiuSY7KGyzn8g5bRc6QzKVtKiAeLwflWEImqa5JdZiYH5fdQmgHAizVPngUJ6YA5y-WIes4/s800/pinterest.png" width="45" height="45" alt="Smile1510 on Pinterest" /></a>

<a href="http://followgram.me/smile1510" title="Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskWL5yASi_abQ0SglDJTVb3ugJ-su5-7TiGdtxHoC9DZLExQhIiJFQytW8oCq9N03juL4iPLMyjRreJgyGsJtgWo97VftnSgq8AhcAuGor3Jh0GNz377VuO7hYlPglRM-y0PiUADGwNY/s800/instagram.jpg" width="45" height="45" alt="Smile1510 on Instagram" /></a>

<a href="http://www.flickr.com/photos/smile1510" title="Flickr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIu8JEjTfemW_Mb7EsM3R7h5PeUI9v86qGevP9wdMmxHXcHs75eJTJUOwMDoZ0plykjX6Y2GUEZa4-bidz4XH_ajaKHPgDfjDPIJBOTXAusfNMTbyfq8dpwlcLRBujuhkVWgwwxH3jl1c/s800/flickr.png" height="45" width="45" alt="Smile1510 on Flickr"/></a>

</div>

 Dovete semplicemente sostituire le parti evidenziate in giallo! 

 Spero che questo post vi possa essere stato d’aiuto e d’essere stata sufficientemente chiara.

Stay tuned!