immagin top

3.7.14

Social Icons personalizzate #2

3.7.14

free social icons personalizzate - Simona S.


Ricordate questo mio post?

Parlavo di immagini di social icons semplicissimi, bianchi, quasi insignificanti presi da soli, ma dando loro un background (alias sfondo), facendo in modo che questo cambiasse colore al passaggio del mouse (:hover), acquistavano di certo più carattere.

Oggi vi mostro come trasformarli da quadratini, come mostrato nell'altro tutorial, a cerchietti, e vi accorgerete come alcuni codici visti in passato possono utilizzati per giocare con i vari elementi del blog.
(copia e incolla i codici direttamente nel gadget HTML/Javascript e ricorda di modificare il link)




Clicca per copiare il codice Chiudi X

Le mie icone, in alto a destra, sono fatte allo stesso modo, ma le ho rimpicciolite senza usare un programma di grafica. Come? Con i codici! :D

Nel tag img ho inserito i parametri della larghezza (width) e dell'altezza (height), così:

<img src="http://3.bp.blogspot.com/-9RMPMQmbYa8/UwuQk-c3UCI/AAAAAAAALak/uy2w1vJsTDs/s1600/b-lovin.png " width='20px' height='auto'/>



Clicca per copiare il codice Chiudi X

Utilizzando le varie possibilità che ci sono con lo stile border-radius, possiamo creare vari effetti come questi:



Clicca per copiare il codice Chiudi X



Clicca per copiare il codice Chiudi X



Clicca per copiare il codice Chiudi X



Clicca per copiare il codice Chiudi X

Queste ultime possono essere inserite di fianco a un div, come se fossero delle linguette...

Ma questo è un po' più complesso da spiegare lasciando solo un codice, esige un tutorial tutto per se ;)

Se avete bisogno di delucidazioni lasciate pure un commento.

 Piccola nota! 
Ho notato che in tante usufruiscono dei miei tutorial, e mi fa molto piacere, tanto da farne un vanto in questo post. Sta di fatto che, anche se io non posso reclamare l'appartenenza di tali codici, in quanto non li ho inventati io, almeno chi li usa evitasse di scrivere '...appartengono a... vietato copiarne i codici..'

Non lo trovo molto giusto: quando si ha la possibilità di condividere la nostra 'conoscenza' aiutando chi ci chiede aiuto, perchè ha tanta voglia d'imparare, così quanto ne abbiamo noi (ed io sto ancora studiando), è nostro dovere aiutare...
So che sembrerà assurdo questo mio discorso, ma... chi ha orecchie per intendere, intenda.

Io NON pretendo essere nominata, citata, ringraziata, ecc...
Almeno lasciare un commento nel post dove si è appreso tale codice....

57 commenti:

  1. Che belle queste social icons! Per chi va pazzo per lo stile flat come me il tuo post è di grandissima ispirazione. La forma che hai dato alle iconcine verdi è originalissima :)
    Per quanto riguarda la seconda parte del tuo post... Non so cosa dire... C'è chi cerca di appropriarsi di qualsiasi cosa frutto della fatica altrui -.-

    RispondiElimina
    Risposte
    1. Io sono alla continua ricerca, e studio, di diverse soluzioni di codici per rendere gli elementi più carini, certo è che se bisogna 'calibrarli'... c'è stata una fase (all'inizio) in cui avevo fatto una overdose di codici che se ci penso ora mi vergogno :D

      Elimina
  2. Cara Simona ogni post è una fonte di studio per me!!!!Cercherò di mettere in pratica le istruzioni sperando di non creare casini!!!!!Ti aggiornerò!!!!Grazie mille

    RispondiElimina
    Risposte
    1. Grazie!!! Un piccolo consiglio, anche se in questo caso riguarda un semplice gadget, ma per non correre rischi quando modifichi il tuo blog, a livello di grafica o codici, fai sempre un backup prima, così ti basterà reinstallare il tuo template per ritrovare tutto come prima. Ecco come!

      Elimina
  3. Ciao Simona :) sono una nuova follower (anche se ti seguivo da un po', ma la prima volta che sono passata blogger faceva i capricci e non ricordavo di non essermi unita ai follower.) ..ad ogni modo, fantastico questo tutorial ** non pensavo che fossero necessari dei codici per dare varie forme alle social icons..pensavo fossero già così!! Comunque grazie per aver condiviso il tutorial, mi servivano proprio **

    RispondiElimina
    Risposte
    1. Ciao Giusy! La maggior parte delle icone sono create con programmi di grafica, quindi sono immagini vere e proprie... In questo caso ho voluto condividere il modo in cui possiamo modificare, non solo il colore dello sfondo, ma anche le forme attaverso i codici :)

      Elimina
  4. Simona sono davvero carinissimi! sono davvero indecisa su quale usare ecco.. mi hai messa in crisi! Fai delle cose davvero molto belle e utili e non smetterò mai di dirtelo e ringraziarti!
    baci!! :*

    RispondiElimina
    Risposte
    1. Beh devo dire che quelle che hai scelto stanno benissimo :D

      Elimina
    2. ohh bene! *_* Grazie ancora!

      Elimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  6. Risposte
    1. Oddio troppo buona, ho solo messo in pratica ciò che ho imparato :P

      Elimina
  7. Molto belli! Nel mio template questo effetto lo fanno già in automatico, per mia fortuna (visto che sono una vera imbranata in materia)

    RispondiElimina
    Risposte
    1. Beh chi l'ha creato è stato fantastico perchè ha inserito il font che richiama le icone dei social network: mi piace un sacco!!!!
      Io ho questo font, ma non avevo pensato a questa possibilità... vedi quante cose s'imparano? ^_^

      Elimina
  8. Sono proprio adorabili in tutte le varianti :D

    RispondiElimina
  9. Ciao cara, grazie a questi tuoi favolosi suggerimenti sto finalmente creando il blog come desideravo io.. volevo chiederti se è possibile avere anche l'icona per la mail come queste su, sarebbe meraviglioso!! Appena termino il tutto ti invio il mio link e anche il banner per lo scambio di pubblicità.. grazie ancora!

    RispondiElimina
    Risposte
    1. Grazie ^_^
      Non vedo l'ora di vedere il tuo blog :D

      Elimina
  10. Bellissime le icone che cambiano colore al passaggio del mouse!
    E anche le forme, sono uno spettacolo!
    E' quasi una magia quello che possono creare poche righe di codice, grazie per la condivisione, oggi ho imparato una cosa in più!
    A presto!
    Daniela - Mani di Dani

    RispondiElimina
    Risposte
    1. E' vero che è come una magia... io noncredevo all'inizio che dei codici incomprensibili sarebbero diventati la mia passione :D

      Elimina
  11. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  12. Ciao Simona ^^ Le icone sono carinissime! Mi hai davvero aiutato visto che non sono molto pratica di queste cose! ^^

    RispondiElimina
  13. Ciao Simo, ma sai che questo post e' davvero una figata?? Grazie grazie, io disegno sempre le icone due volte per creare l'effetto hover come ce l'ho su c'e' crisi ma in effetti avrei potuto usare un codice come il tuo con la personalizzazione del colore del background.

    Mi piace sto coso che hai creato per i codici, la finestrella che si apre e si chiude, sei una donna piena di risorse, brava Simo!

    p.s. non ho capito la nota, c'e' chi usa i tuoi codici e dice sul suo blog che sono i suoi e di non usarli? E perche' non rimanda i suoi lettori direttamente al tuo blog? Mah...

    Ti auguro un buon inizio settimana, alex

    RispondiElimina
    Risposte
    1. Grazie Alex, sei troppo gentile!!! ^_^
      In effetti con un paio di stili si possono creare effetti incredibili!
      La nota alla fine... beh io non pretendo chemi si faccia riferimento, perchè come dicevo non è che le ho inventate io certe cose, quindi lungi da me nel prendermi i meriti.

      Per quel codice ti manderò una mail ;)
      Ecco vedi, io sono fatta così: se so che a te serve una cosa, che sia un codice o persino una brushe, io te la invio molto volentieri, perchè non deve esistere competizione in certe cose, anzi sono occasioni di crescita ;)

      Elimina
    2. Hai ragione Simona, nemmeno io mi sento in competizione con te, non solo perche' in confronto alla tua esperienza con i codici e con WP io sono ancora una novellina, ma anche perche' abbiamo stili diversi che ci permettono di lavorare con clienti dalle esigenze diverse.... non so come dirlo. Comunque io guardo sempre al tuo blog come ad un modo per migliorarmi e per imparare da te, e non certo come "vediamo cosa fa lei cosi la copio", sarebbe proprio triste, non trovi? E mi dispiace che tu debba mettere delle 'note' del genere nei post...

      C'e' spazio per tutti in questo mondo e dobbiamo darci man forte tra di noi, visto che affrontiamo le stesse problematiche e sfide ogni giorno.Ti voglio bene e grazie per la tua email! Alex

      Elimina
    3. Oddio, mi hai commossa! Pensa che per me vale lo stesso...coma la mettiamo? :D
      E' sempre questo che ho sperato aprendo un blog, di trovare un gruppo di blogger che la pensasse come in fatto di amicizia e rispetto reciproco, e devo che ho trovato delle amiche come te e Silvia (Tine), e anche Mary... vi voglio davvero bene e soprattutto provo rispetto, che per me è il sentimento più pulito che ci possa essere!!!

      Elimina
    4. Amoruccia, ma che fine hai fatto? Vanno meglio le cose? E tu sei ancora influenzata? Io e' da una settimana e mezza che sto male e ancora non sono guarita, due palle! Aspetto tue notizie, sperando vada tutto bene. TVB, alex

      Elimina
  14. Che carinee *___* Cercavo qualcosa di così semplice ma d'effetto, probabilmente metterò alcune di queste nel mio blog appena riuscirò ad aggiornare la grafica :3

    RispondiElimina
  15. Ciao Simo, sto aggiornando il blog con le nuove modifiche, se ti va puoi passare per qualche consiglio, mi dici che te ne pare... ovviamente ho ancora tante piccole cose da aggiungere... spero per giovedi/venerdi pubblicare l'ultima ricetta prima delle vacanze con la grafica completamente aggiornata... ovviamente in quel post ti citerò e ringrazierò per i tuoi utilissimi tutorial! ;) a presto

    RispondiElimina
    Risposte
    1. wow Simo che bel cambiamento!!!! Mi fa tanto piacere come riusciate a personalizzare il blog anche grazie ai miei tutorial, ma il merito è anche vostro, con la vostra fantasia :D
      Devo dire che le allieve stanno superando la 'maestra' ^_^

      Elimina
    2. Come promesso ti ho ringraziata nel mio ultimo post e ti ho consigliata a tutte le amiche blogger... una buona vacanza, un bacio ;)

      Elimina
    3. Grazie mille Simona!!!! Sei stata gentilissima ♥

      Elimina
  16. ciao simona
    i tuoi post mi stanno spingendo ad abbandonare wordpress per trasferire il mio sito su blogspot
    ti volevo domandare come posso cambiare il colore di qst icone pucciose create da te.ehehhe

    RispondiElimina
    Risposte
    1. Beh, Federica,iohotrovato una gran bella famiglia qui su Blogger, c'è spirito collaborativo, e soprattutto la gentilezza nel diventare follower viene ricambiata ;)
      E' un bel circuito ^_^
      Per cambiare il colore di sfondo ti basta cambiare il codice stesso delcolore denominato background!

      Elimina
  17. Ho appena scoperto il tuo blog e sono estasiata ^_^
    Al momento sto passando da altervista a blogger e mi mancano ancora alcune cosucce per essere soddisfatta, tra cui le icone per i link social... adoro quelle rosa che hai creato e mi piacerebbe molto inserirle. Purtroppo, sono un'impedita totale, e mi vergogno quasi a chiedertelo, quindi mi scuso in partenza ^^' Esattamente, come faccio a cambiare i vari link? Non capisco dove devo inserirli... grazie in anticipo e di nuovo... wow! Blog splendido e utilissimo!

    RispondiElimina
    Risposte
    1. Benvenuta allora sulla piattaforma Blogger :D
      Non preoccuparti se non vuoi riesci a fare una cosa...al'iinizio siamo tutte 'impedite' ;)
      I links sono specificati dal tag 'a' , le virgolette che seguono 'href' contengono l'URL del sito che si vuole raggiungere cliccandoci su.
      Quindi al posto di http: che trovi all'interno di queste virgolette, inserisci il link (l'URL) che vuoi tu...spero di essere stata chiara :D

      Elimina
    2. Chiarissima e super gentile... ce l'ho fatta, grazie mille davvero!

      Elimina
  18. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  19. Ho scoperto da pochi giorni il tuo blog ed fantastico: ricco di idee e abbastanza facili da eseguire anche per un imbranata come me !! Ora mi metto subito all'opera per migliorare la grafica del mio blog :)! Grazie ^_^

    RispondiElimina
    Risposte
    1. Grazie a te che hai scelto di seguirmi ♥ *_*

      Elimina
  20. Ciao Simona, ti devo davvero ringraziare! Il post è chiarissimo, e le icone sono davvero belle. Cercavo da un po' un tutorial completo che mi aiutasse e finalmente ho trovato te!... comunque ho scelto il set rosa cambiando poi il colore, sempre seguendo i tuoi consigli! Grazie Fulvia

    RispondiElimina
  21. Ciao Simona!
    Non è molto che ti ho scoperta, ma già mi hai "salvato la vita" in parecchie occasioni!!!
    Grazie per i tuoi post e soprattutto per questo sui tastini social, era non so quanto tempo che li cercavo e ora sono proprio come li volevo *.* grazie ancora e continua a fare ciò che fai!!
    Un bacione

    RispondiElimina
  22. Grazie a voi che mi sostenete sempre ♥ ^_^

    RispondiElimina
  23. Simo, questa sera proprio non voglio andare a letto, il tuo blog è troppo ricco di post interessanti! Sto inserendo queste icone, grazie ancora per queste informazioni!

    RispondiElimina
  24. Grazie per i tutorial, sono fantastici e chiarissimi!

    RispondiElimina
  25. Grazie mille, sei stata utilissima! Non posso più fare a meno del tuo blog ;)

    RispondiElimina
  26. grazie, userò le tue icon nel mio blog ^^

    RispondiElimina
  27. Fantastico, e pensare ci voleva tanto poco per rendere quelle icone più carine.. grazie, userò sicuramente i tuoi consigli :)

    RispondiElimina
  28. Le sto cercando da mesi!!!! Grazieeeeee *-*

    RispondiElimina
  29. Scusa se rompo ancora le scatole.. :P
    Come faccio a crearne una con il disegno della busta delle lettere?

    RispondiElimina
    Risposte
    1. ne ho create altre di icone: letterina e youtube ;)

      Elimina
  30. Ciao Simona, ti ricordi che avevo un problema per inserire l'icona di Pinterest? Alla fine dopo tanto studiare ...ho seguito i tuoi tutorial, ho cancellato le icone in alto e optato per il gadget HTMLIavaScript.
    Le icone si vedono solo nei post, ma per ora va bene così, sono contentissima! Grazie tante!
    Per metterle in alto è molto complicato, vero?

    RispondiElimina
    Risposte
    1. Fatto ... ora è tutto a posto !!
      Grazie di nuovo, complimenti le tue icone sono molto belle!

      Elimina
  31. Ciao, sono arrivata da te, perchè cercavo delle informazioni su come inserire le icone social. Finalmente sono riuscita a inserirle. Grazie mille per la guida. Leggo con piacere i tuoi consigli... è sempre bello imparare cose nuove grazie di tutto se ti va questo è il mio blog. "http://biofitoalchimia.blogspot.it " se mi lasci il tuo banner ti inserisco con piacere tra i mie amici.

    RispondiElimina
    Risposte
    1. Ciao Denise!
      Sono passata dal tuo blog per un saluto ^_^
      Non ho un banner al momento, ci lavorerò però ;)

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*