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)
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZUgUWou69DZibn_hwzC-62ruEOjuAci0dU2PbVRfrGTD2eVEuX96Fzt72EzLDj8CG1hr94Oi6dFPRyb_YhmA6WFx0RyBLntNcPdMmKlgLfNIQhy_W33CFcHDpocLH2bR-CRHNEHW8TK-/s1600/b-lovin.png " width='20px' height='auto'/>
Utilizzando le varie possibilità che ci sono con lo stile border-radius, possiamo creare vari effetti come questi:
Queste ultime possono essere inserite di fianco a un div, come se fossero delle linguette...
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....
.jpg)
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 :)
RispondiEliminaPer quanto riguarda la seconda parte del tuo post... Non so cosa dire... C'è chi cerca di appropriarsi di qualsiasi cosa frutto della fatica altrui -.-
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
EliminaCara 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
RispondiEliminaGrazie!!! 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!
EliminaCiao 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 **
RispondiEliminaCiao 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 :)
EliminaSimona 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!
RispondiEliminabaci!! :*
Beh devo dire che quelle che hai scelto stanno benissimo :D
Eliminaohh bene! *_* Grazie ancora!
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminasei un genio T.T
RispondiEliminaOddio troppo buona, ho solo messo in pratica ciò che ho imparato :P
EliminaMolto belli! Nel mio template questo effetto lo fanno già in automatico, per mia fortuna (visto che sono una vera imbranata in materia)
RispondiEliminaBeh chi l'ha creato è stato fantastico perchè ha inserito il font che richiama le icone dei social network: mi piace un sacco!!!!
EliminaIo ho questo font, ma non avevo pensato a questa possibilità... vedi quante cose s'imparano? ^_^
Sono proprio adorabili in tutte le varianti :D
RispondiEliminaCiao 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!
RispondiEliminaGrazie ^_^
EliminaNon vedo l'ora di vedere il tuo blog :D
Bellissime le icone che cambiano colore al passaggio del mouse!
RispondiEliminaE 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
E' vero che è come una magia... io noncredevo all'inizio che dei codici incomprensibili sarebbero diventati la mia passione :D
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaCiao Simona ^^ Le icone sono carinissime! Mi hai davvero aiutato visto che non sono molto pratica di queste cose! ^^
RispondiEliminaMi fa molto piacere cara ^_^
EliminaCiao 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.
RispondiEliminaMi 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
Grazie Alex, sei troppo gentile!!! ^_^
EliminaIn 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 ;)
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...
EliminaC'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
Oddio, mi hai commossa! Pensa che per me vale lo stesso...coma la mettiamo? :D
EliminaE' 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!!!
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
EliminaChe carinee *___* Cercavo qualcosa di così semplice ma d'effetto, probabilmente metterò alcune di queste nel mio blog appena riuscirò ad aggiornare la grafica :3
RispondiEliminaCiao 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
RispondiEliminawow 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
EliminaDevo dire che le allieve stanno superando la 'maestra' ^_^
Come promesso ti ho ringraziata nel mio ultimo post e ti ho consigliata a tutte le amiche blogger... una buona vacanza, un bacio ;)
EliminaGrazie mille Simona!!!! Sei stata gentilissima ♥
Eliminaciao simona
RispondiEliminai 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
Beh, Federica,iohotrovato una gran bella famiglia qui su Blogger, c'è spirito collaborativo, e soprattutto la gentilezza nel diventare follower viene ricambiata ;)
EliminaE' un bel circuito ^_^
Per cambiare il colore di sfondo ti basta cambiare il codice stesso delcolore denominato background!
Ho appena scoperto il tuo blog e sono estasiata ^_^
RispondiEliminaAl 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!
Benvenuta allora sulla piattaforma Blogger :D
EliminaNon 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
Chiarissima e super gentile... ce l'ho fatta, grazie mille davvero!
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaHo 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 ^_^
RispondiEliminaGrazie a te che hai scelto di seguirmi ♥ *_*
EliminaCiao 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
RispondiEliminaCiao Simona!
RispondiEliminaNon è 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
Grazie a voi che mi sostenete sempre ♥ ^_^
RispondiEliminaSimo, 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!
RispondiEliminaGrazie a te cara *_*
EliminaGrazie per i tutorial, sono fantastici e chiarissimi!
RispondiEliminaGrazie mille, sei stata utilissima! Non posso più fare a meno del tuo blog ;)
RispondiEliminagrazie, userò le tue icon nel mio blog ^^
RispondiEliminaFantastico, e pensare ci voleva tanto poco per rendere quelle icone più carine.. grazie, userò sicuramente i tuoi consigli :)
RispondiEliminaLe sto cercando da mesi!!!! Grazieeeeee *-*
RispondiEliminaScusa se rompo ancora le scatole.. :P
RispondiEliminaCome faccio a crearne una con il disegno della busta delle lettere?
ne ho create altre di icone: letterina e youtube ;)
EliminaCiao 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.
RispondiEliminaLe icone si vedono solo nei post, ma per ora va bene così, sono contentissima! Grazie tante!
Per metterle in alto è molto complicato, vero?
Fatto ... ora è tutto a posto !!
EliminaGrazie di nuovo, complimenti le tue icone sono molto belle!
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.
RispondiEliminaCiao Denise!
EliminaSono passata dal tuo blog per un saluto ^_^
Non ho un banner al momento, ci lavorerò però ;)
Grazie per il passaggio...a presto:-)
EliminaGrazie mille, inserite pure io!
RispondiElimina