mercoledì 30 gennaio 2013

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://lh6.googleusercontent.com/-wV47mxAvBmc/UP8FvkO0eBI/AAAAAAAACsQ/uSyDP6Wf4VA/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://lh6.googleusercontent.com/-U2VG5gz4K8Q/UP8HfdfZsOI/AAAAAAAACtw/AUJeryG_pzY/s800/pinterest.png" width="45" height="45" alt="Smile1510 on Pinterest" /></a>

<a href="http://followgram.me/smile1510" title="Instagram"><img src="https://lh6.googleusercontent.com/-MSmPiY0sMSc/UPmerM7cXMI/AAAAAAAACpY/tqWhC6FHT2k/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://lh6.googleusercontent.com/-wV47mxAvBmc/UP8FvkO0eBI/AAAAAAAACsQ/uSyDP6Wf4VA/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! 

87 commenti:

  1. Sei stata molto chiara..... spero solo di essere chiara anch'io quando domani proverò. Ciao grazie Simona

    RispondiElimina
    Risposte
    1. Ciao Simona! e benvenuta!
      sono sicura che ce la farai!!! in caso contrario ... fai un fischio!!! ;-)

      Elimina
  2. Caspiterinaaa! Grazie, è proprio quello che stavo cercando!! Sono Silvia, ho un blog creativo. Adesso vado a curiosare nel tuo blog di fotografia, visto che piace anche a me!
    Grazie ancora!!! :D

    RispondiElimina
    Risposte
    1. Ciao Silvia! E benvenuta! Sono davvero contenta che qui tu abbia trovato quello di cui avevi bisogno!! Il tuo blog l'ho conosciuto da poco, complimenti per le tue creazioni meravigliose! :-)

      Elimina
  3. Grazie ci proverò, molto interessante. Di solito sono negata... ma se mi impegno!

    RispondiElimina
    Risposte
    1. Benvenuta Debora! sono sicura che come anche altre sono riuscite a mettere i bottoni ... tu non sarai di meno! :-D

      Elimina
  4. finalmente un tutorial chiaro! grazie mille! :)

    RispondiElimina
  5. Finalmente un tutorial come si deve! grazie :)

    RispondiElimina
  6. Carissima,
    grazie per le tue idicazioni così dettagliate...io mi ci sto spaccando il cervello da un pò e ancora non ci sono riuscita :-( ma non mi do per vinta!!
    A presto

    RispondiElimina
  7. Ciao Cinzia, sto cercando di seguire il tuo tutorial però mi sono proprio bloccata all'inizio! Tu hai usato Picasaweb? Perchè a me non escono tutte le indicazioni che invece tu hai descritto? Uffiiii Help me please

    RispondiElimina
    Risposte
    1. Ciao Maria, benvenuta!
      ho visto nel tuo blog che ci sono i bottoni social, ci sei riuscita dunque? fammi sapere! Ciao!! :-)

      Elimina
    2. Ciao Cinzia, si alla fine ci sono riuscita!!!! Tutto grazie al tuo utilissimo blog... Sono felice di averti scoperta... Siamo anche diventate seguaci si Instagram vedo... un bacio consy

      Elimina
    3. Ciao Cinzia, avrei bisogno di un altro consiglio.... ho notato che tu hai inserito il gadget Cerca. Beh anch'io l'ho fatto, inserendo prima il bottone "Search" (che in pratica è un'immagine) e poi aggiungendo di sotto il gadget vero e proprio. C'è un modo per eliminare la parola "cerca" sulla sx?

      Forse capirai meglio se lo vedi http://caprimoments.blogspot.it
      Grazie mille per il tuo tempo
      un bacio

      Elimina
    4. Ciao Consy!

      il gadget di blogger da aggiungere come cerca non funziona più (cerca una parola a caso del tuo blog e fai la prova). io ho appena aggiunto un nuovo codice togliendo anche il "cerca"...
      lo trovi qui: http://www.ideepercomputeredinternet.com/2012/10/blogger-casella-ricerca-personalizzata.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ideepercomputeredinternet%2FzUQN+%28Idee+per+computer+ed+internet%29

      devi poi togliere dentro il codice la parola "cerca".
      ciao!!! :-)

      Elimina
  8. Cinziaaaaaaaaa grazieeeeeeeee ora è perfetto!!!!!!
    UN bacio forte

    RispondiElimina
  9. grazie mille x il tutorial, dopo un po' di fatica ci sono riuscita!! ora ti seguiroì i tuoi consigli sono stati preziosi!

    RispondiElimina
    Risposte
    1. Bene Federica! l'importante è esserci riuscita... che soddisfazione, vero?!? ;-)

      Elimina
    2. si davvero un sacco di soddisfazione! era mesi che volevo farlo!!!!

      Elimina
  10. Sono arrivata qui tramite google... e in men che non si dica, grazie ai tuoi preziosi consigli, le mie icone, piccole e ordinate, erano già sul mio blog!! Grazie mille!
    Ora vado a curiosare in tutto il blog!
    Se ti va, passa a trovarmi!!
    Caterina

    RispondiElimina
    Risposte
    1. Benvenuta Caterina!!! sono contenta!
      :-)))
      passo a trovarti!! :-)

      Elimina
  11. Grazie mille Cinzia!!!!
    Ci sono riuscita!!
    Ma dì la verità sei una smanettona tu!!Ahahahah!
    Grazie mille ancora...ho creato il blog da pochissimo, neanche un mese...quindi le tue dritte per me sono state oro colato!!
    Grazie ancora!

    RispondiElimina
    Risposte
    1. Ciao Valentina!!
      prego! ;-)

      no, no, ti assicuro, non sono una smanettona, però mi piace giocare con il linguaggio html!

      torna a trovarmi! :-))

      Elimina
  12. Ciao, il tuo post è di qualche mese fa, ma spero tu leggerai lo stesso. Ho eseguito tutto alla lettera ed ho ottenuto il risultato che volevo. La tua spiegazione è chiara come poche, seguendoti si imparano tante cose dell'html in generale. Grazie infinite. Mi unisco al tuo sito con estremo piacere.

    RispondiElimina
    Risposte
    1. Ciao e benvenuta!!! sono contenta d'esserti stata utile! ho dato un'occhio al tuo blog ed devo dire che è davvero interessante!
      a presto! :-)

      Elimina
  13. Ciao io ho seguito tutte le indicazioni ma non ci sono riuscita. Appena incollo il codice e salvo non mi visualizza più il blog, cioè mi da un messaggio di errore e devo cancellare il gadget. Cos'è che sbaglio? Posso mandarti il codice per vedere se c'è qualche errore?

    RispondiElimina
    Risposte
    1. Ciao Alessandra, benvenuta!
      ho visto nel tuo blog i bottoni social, ci sei riuscita alla fine? Ciao!! :-)

      Elimina
  14. Dopo giorni e giorni in cui cercavo invano di decifare codici astrusi questo tuo post mi ha risolto ogni problema!!! grazie mille!!! :D

    RispondiElimina
  15. Grazie mille!! mi stavo scervellando per cercare di inserire i link, e ho scoperto il tuo blog!! una vera e propria manna!in realtà ne dovevo inserire solo uno(avendo aperto il blog da pochissimo, non ne ho così tanti) e per fortuna che ti ho trovato!.
    Ti seguirò con molto piacere

    RispondiElimina
  16. Grazie mille post molto utile e ben scritto!!! :)

    RispondiElimina
  17. Grazie per i tutorial...sto mettendo ordine al blog, mi mancava, quindi l'ho riaperto ;) ora però ci vuole un pò di "rinnovamento"
    ciao Ari

    RispondiElimina
  18. Grazie mille finalmente una spiegazione chiara! il risultato mi piace molto :)
    grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    RispondiElimina
  19. Grazie millissime, è la spiegazione più chiara e semplice che abbia mai visto! E finalmente ci sono riuscita :D

    RispondiElimina
  20. Grazie per il tutorial! Ora ho anche io i bottoni come si deve..prima erano tutti diversi (anche nelle dimensioni) e non mi piacevano affatto! Le tue spiegazioni sono molto chiare, grazie ancora!!

    RispondiElimina
  21. Ho avuto qualche problema con la gestione di picasaweb, ma alla fine sono riuscita ad inserire la barra con i pulsanti! Grazie mille per le tue chiare e utili indicazioni! Cristina

    RispondiElimina
  22. Grazie a voi ragazze d'essere passate per di qua!
    sono contenta d'essere stata utile!

    :-)

    RispondiElimina
  23. Ciao,io ho cercato di fare tutto,ma sul blog non si vedono :( potresti aiutarmi?????

    RispondiElimina
    Risposte
    1. Antonina, mi mandi per e-mail il codice che hai generato osì vedo se riesco a trovare l'inghippo?
      ciao!!! :-)

      Elimina
  24. http://oggiricucinoio.blogspot.it/

    RispondiElimina
  25. Grazie mille guida semplice e perfetta! =) se ti va i passare il mio blog è: http://www.langolodihyna.blogspot.it/ ciaooo

    RispondiElimina
  26. Sei stata la mia salvezza! grazie mille!! Chiara

    RispondiElimina
  27. Grazie, grazie, grazie, grazie!!!!!
    Non sapevo proprio più come fare con questi pulsanti social, sei stata fantastica! <3

    RispondiElimina
  28. Grazie mille per questo utilissimo tutorial.
    Tutto bene? È un po' che non scrivi...

    RispondiElimina
    Risposte
    1. Robin, grazie! é stato un periodo un po' duro ma spero d'averlo lasciato dietro di me! :-)
      sono contenta che il tutorial ti sia stato utile! baci :-*

      Elimina
  29. Grazie mille!! mi sei stata di grande aiuto!!
    Un bacio
    Cristina

    RispondiElimina
  30. Il tuo articolo mi ha salvato la vita xD Grazie <3

    RispondiElimina
  31. ciao, cercavo da tempo una soluzione e mi ha fatto piacere trovare quest'articolo.
    la mia scarsa dimistichezza mi ha messo in crisi da subito.. ho scaricato i bottoni sul desktop, ma quando li ho caricati su picasa sono venuti tutti sgranati.si vedono malissimo.
    dove ho sbagliato?
    ti sarei grata se mi aiutassi,
    grazie mille.

    Dora

    RispondiElimina
    Risposte
    1. Dora, hai provato cmq a fare tutti i passaggi che ho spiegato per vedere che magari alla fine sia solo una sgranatura momentanea? fammi sapere! ciao!

      Elimina
  32. Ciao sono riuscita quasi a mattere i bottoni solo che oltre il bottone mi spuntano delle scritte nel widget e inoltre alcuni funzionano altri mi dicono che la pagina è inesistente:( vorrei anche allinearli tutti ma non riesco,mi potresti aiutare?grazie!:)

    RispondiElimina
    Risposte
    1. Giada, scusami non riesco a capire bene cosa intendi... i bottoni devono avere collegamenti a social network come FB, twitter, instagram ecc e non a widget! consiglio: rifai tutto daccapo, se segui tutto alla lettera vengono allineati! ciao!! :-)

      Elimina
  33. Grazie Sofia! Sto creando il mio blog e devo dire che mi sento veramente soddisfatta di essere riuscita a creare i "bottoni" da sola! Ed è tutto merito tuo e della tua spiegazione chiarissima! Grazie ancora! :)
    Valentina

    RispondiElimina
  34. Ciao, ho seguito il tuo tutorial sul mio blog http://travelandfashiontipsblogspot.it ma mi escono massimo 3 icone. Come devo fare per farne uscire 10?

    RispondiElimina
    Risposte
    1. Anna, usa i miei esempi come canovaccio e ne puoi mettere altri 20 se vuoi! tutto deve essere aggiunto prima di < /div >.
      ciao!!!

      Elimina
  35. Ciao, scusami se riesumo un post così vecchio ma è normale che mi vengano delle icone tutte unite con uno sfondo bianco e non "staccate" come te?

    RispondiElimina
    Risposte
    1. Ciao Simon, ho dato un'occhiata al tuo blog, credo che lo sfondo bianco dipenda proprio dal tuo template! le icone comunque non mi sembra siano tutte unite, forse sei riuscito a sistemare dopo il tuo commento qui? ciao!!! :-)

      Elimina
  36. ciao! Bellissimo e molto utile il tuo blog... ti posso rubare un po' del tuo prezioso tempo? Sono mamma anch'io e so quanto è prezioso anche solo un minuto... Non trovo su Picasa l'impostazione Nascondi il link... Puoi aiutarmi? Vorrei inserire i pulsanti sul mio blog ma sto procedendo a rilento proprio per mancanza di tempo... Grazie mille! Erika

    RispondiElimina
    Risposte
    1. Ciao Erika, ricordo che anche a me a volte non veniva fuori "nascondi link album". rifai daccapo e dovrebbe comparire! Prima premi su "Link a questo album" e poi da li estrai il codice, dopo aver flaggato "nascondi questo album".
      fammi sapere! Ciao!!! :-)

      Elimina
  37. Grazie Sofia, per ora ho solo letto il tuo tutorial ma finalmente ho capito qualcosa di quello che veniva scritto...semplice e efficace...appena ho finito di lavorare lo metto in pratica sicura della riuscita! ...Se combinassi un guaio ti chiederò consiglio...
    Ho iniziato il mo blog da poco e l'ho avviato velocissimamente senza avere una conoscenza del linguaggio html e uscire da questo ginepraio a volte è difficile...quindi grazie...ora vado a curiosare tra i tuoi post, se vorrai venirmi a trovare ne sarò lieta!
    Un saluto e Grazie ,
    francesca

    RispondiElimina
    Risposte
    1. Ciao Francesca e benvenuta!
      se hai bisogno sono qui anche se ho visto che sei già riuscita ad inserire i bottoni! bellissimo blog, complimenti! :-)))

      Elimina
  38. Purtroppo ho parlato troppo presto...ho seguito passo passo il tutorial molto chiaro, e se all'inizio mi ha visualizzato tutto bene, poi mi visualizza i bottoni ma a tutti mette il titolo del primo e il link del primo rimandando tutto a facebook....non capisco perchè ha visualizzato tutto ok per una volta e poi a sballato tutto!!
    Grazie mille per la risposta,
    Francesca
    http://savethedateanddotyouri.blogspot.it/

    RispondiElimina
  39. Buongiorno Sofia, ho parlato prima de previsto...e forse ti sto anche scrivendo il commento due volte ma mi si è disconnesso il pc....i bottoni li ho inseriti e se all'inizio con la prima visualizzazione del blog mi ha dato tutto corretto, poi la seconda volta ha iniziato a darmi lo stesso titollo e lo stesso link per tutti prendendo sempre quello di facebook!
    Ho provato a cancellare il gadget html e rifarlo ma non cambia il problema, non saprei come mai...eppure il codice mi sembra corretto!! Sapresto aiutarmi,
    grazie mille e scusa in anticipo se ti arriverà un doppio commento!

    RispondiElimina
    Risposte
    1. Francesca,
      non so cosa sia successo, ma piuttosto d'avere i link sbagliati ti conviene togliere tutto per il momento.
      rifai daccapo con i link dei social media giusti e tutto il resto. sono sicura che con un po' di pazienza ci riuscirai! :-)

      Elimina
  40. Ciao Cara,
    io ci sto provando ma sto impazzendo.
    arrivo ad un certo punto e non riesco più ad andare avanti. arrivo fino a caricare i bottoni su picasaweb e mi fermo. la finestra grigia che tu hai incollato come immagine io non ce l'ho e non la trovo....
    Riesci ad aiutarmi per favore?? sto impazzendo!

    RispondiElimina
    Risposte
    1. ciao la finestra grigia la trovi a destra dello schermo quando apri Picasaweb.
      accertati d'aver reso pubblica l'immagine sul web! quando carichi l'immagine in quel punto viene fuori un lucchetto … clicca su "modifica" e da lì seleziona Rendi visibile al web. dopodiché non dovresti aver problemi.
      altrimenti prova con photobucket!
      :-)

      Elimina
    2. Sei stata gentilissima e stra veloce! Ma picasaweb ha modificato il layout e non compare proprio così... comunque, nonostante tutto, ce la sto facendo! Grazie mille! Sei un mito! Era dagli anni novamta che non dicevo sei un mito. considerato onorata! ;)

      Elimina
  41. grazie mille, anch'io grazie a te sono riuscita nel mio intento...grazie mile e buona giornata
    cristina

    RispondiElimina
  42. ciao, sembra facilissimo, ci ho provato, lo ho creato e poi incollato nell'HTML ma mi dice che c'è un errore nella prima linea che io però non ho modificato. HELP...

    RispondiElimina
    Risposte
    1. Ciao Elena,
      il codice deve essere esatto esatto, cioè se c'è una virgola in più o uno spazio in più non funziona. controlla tutto altrimenti scrivimi in privato! ciao! :-)

      Elimina
  43. ciao...riscontro dei problemi alla fine, quando creo tutto il codice e poi vado ad aggiungerlo dentro al gadget , vado a vedere e rimane un piccolo punto interrogativo al posto dell'immagine , ci clicco sopra e mi manda al blog non a Facebook. =(

    RispondiElimina
    Risposte
    1. Annamaria, se ti rimanda al blog e non a FB vuole dire che il codice è sbagliato! prova a rifare tutto e metti il link di rif. a FB. per quanto riguarda il punto al posto della foto prova a caricare l'immagine attraverso picasaweb e non google+. fammi sapere! ciao!

      Elimina
  44. Ciao,vorrei chiederti, come possocreare la barra con tutti indirizzi proprio come quella che hai te con home, about, ricette ecc?... E poi aggiungerci direttamente i collegamenti così che appena si clicca li si va in quella pagina indirizzati? Grazie mille in anticipo..

    RispondiElimina
    Risposte
    1. Ciao Rebecca, porti pazienza che ci faccio un post? :-)

      Elimina
  45. Grazie grazie grazie! :)
    Finalmente una descrizione chiara su come inserire questi "bottoni". Complimenti!
    Ho appena realizzato un blog quindi per me è tutto nuovo...
    Michela
    http://lamikella-homemade.blogspot.it/

    RispondiElimina
    Risposte
    1. Ciao Michela! bene, sono contenta! in bocca al lupo per il tuo blog! ciao!!! :-)

      Elimina
  46. Wow, super utile e chiaro! Appena trovo il tempo mi ci metto perche' i bottoni mi mancano! Grazie mille!

    RispondiElimina
  47. ciao grazie mille per il tuo post , utilissimo!
    ho iniziato a seguire il tuo blog, se ti va di seguirmi ti lascio il mio:
    rajaninahandmade.blogspot.com

    ciao ! ;)

    RispondiElimina
  48. post molto interessante e utile..però non so perché la mia iconica di Facebook non si vede e compare il punto di domanda..ho provato più vole a inserire l'url ma niente..te ne sai qualcosa?
    Noemi
    Passate a trovarmi sul mio blog creativo...nuovi post e nuove ispirazioni..mi farebbe piacere sentire il vostro parere!
    http://noxcreare.blogspot.it

    RispondiElimina
    Risposte
    1. Ciao Noemi!
      complimenti, il tuo blog è bellissimo!
      per quanto riguarda l'icona FB: vedo che il collegamento funziona quindi non è un problema di url. piuttosto controllerei la grandezza del bottone FB e come l'hai salvato … prova a vedere se hai fatto i passaggi uguali alle altre icone!
      ciao!!! :-)

      Elimina
  49. fatto anch'io...ma prima dell'icona mi compare una piccola casellina :/ come eliminarla?

    RispondiElimina
    Risposte
    1. Nadia, ciao!
      ho visto! prova a controllare come hai fatto i copia e incolla degli url. controlla punti, virgole, spazi, tutto deve essere come ho scritto nel codice: il linguaggio html è preciso e non ammette pressapochismi! fammi sapere! ciao!! Cinzia

      Elimina
  50. Articolo molto utile ed interessante.
    Complimenti
    -----------------------------------------------------------------------------
    CORIGLIANO Informa

    RispondiElimina

Il tuo commento è prezioso per me, grazie per aver trovato il tempo per fermarti e condividere il tuo pensiero!

*** Ai post un po' datati ho applicato la moderazione altrimenti, con la testa che mi ritrovo, i commenti rimarrebbero nel limbo!***




LinkWithin

Related Posts with Thumbnails