Scrivo questo post per rispondere ad una mail inviatami da Niere in cui mi scriveva:
Vorrei aggiungere nel mio blog delle icone sensibili al passaggio del mouse, tipo quelle presenti nel tuo menu e quelle dei social network presenti nella sidebar.Potresti spiegarmi come realizzare questo effetto in html?
Ed ecco per te, Niere, e per tutti voi le semplici istruzioni per inserire nei vostri blog delle icone che cambiano aspetto al passaggio del mouse. Di seguito vi riporto come esempio le icone dei due più famosi social network: Facebook e Twitter.
(Per provare l'effetto passare
il mouse sopra le due icone)
il mouse sopra le due icone)
Passo 1: creare le immagini
Per inserire nel vostro blog delle icone sensibili al passaggio del mouse dovrete per prima cosa creare le immagini.
Per ogni icona occorrono due immagini: quella visibile nella pagina e quella visibile al passaggio del mouse.
Quindi per realizzare le due icone mostrate nell'esempio dovrete realizzare quattro immagini:
A questo punto caricatele online su un servizio di hosting; vi servirà poi l'indirizzo di ciascuna immagine per scrivere il codice css.
Codice css
Supponendo che alle immagini avete dato questi nomi:
- facebook_01.jpg e facebook_02.jpg: per l'icona di Facebook
- twitter_01.jpg e twitter_02.jpg: per l'icona di Twitter
il codice css da inserire nel template del vostro blog prima della riga di codice ]]></b:skin> o nel file style.css per Niere è il seguente:
a.facebook { float: left; display: block; width: 50px; height: 50px; background-image: url(URL img facebook_01.jpg); text-indent: -9999px; }
a.facebook:hover { background-image: url(URL img facebook_02.jpg); }
a.twitter { float: left; display: block; width: 50px; height: 50px; background-image: url(URL img twitter_01.jpg); text-indent: -9999px; }
a.twitter:hover { background-image: url(URL img twitter_02.jpg); }
a.facebook:hover { background-image: url(URL img facebook_02.jpg); }
a.twitter { float: left; display: block; width: 50px; height: 50px; background-image: url(URL img twitter_01.jpg); text-indent: -9999px; }
a.twitter:hover { background-image: url(URL img twitter_02.jpg); }
ovviamente sostituendo le stringhe in blu e in azzurro con gli indirizzi delle quattro immagini e inserendo le dimensioni delle vostre immagini (al posto di width: 50px; height: 50px;).
Codice html
Prima di scrivere il codice html dovrete salvare le modifiche apportate al template del vostro blog mentre Niere dovrà salvare il file style.css.
Il codice html, da inserire in un gadget di tipo html/javascript della sidebar o in un post o in qualsiasi parte del template, è il seguente:
<a class="facebook" href="pagina Facebook">Facebook</a>
<a class="twitter" href="pagina Twitter">Twitter</a>
<a class="twitter" href="pagina Twitter">Twitter</a>
Conclusioni
Per inserire nel vostro blog delle icone sensibili al passaggio del mouse occorre avere almeno delle nozioni base di html e css nonché di grafica.
Do quindi per scontato che sappiate creare un'immagine, caricarla online e prendere l'indirizzo.
Per quanto riguarda il codice css e html ho evidenziato con colori diversi le due classi per le icone. Do per scontato che sappiate anche cos'è una classe.
Per dubbi o chiarimenti riguardanti questo post lasciate un commento, non contattatemi via email.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.
Copyright 2008- 
Design by 
Grazie mille Iole!! Sembra anche facile da fare, pensavo chissà cosa. Appena riesco farò delle prove :)
RispondiEliminaGrazie ancora
@Niere: per qualsiasi dubbio o chiarimento sono qui a disposizione.
RispondiEliminaGrazie Iole! sempre utili i tuoi consigli e tutorial...
RispondiEliminaBuona giornata...anche tu hai il fastidiosissimo codice captcha difficile da decifrare????
@tilli: ho notato che da alcuni giorni i captcha sono diventati davvero impossibili da leggere.
RispondiEliminaAvevo deciso di toglierli ma dopo solo mezza giornata li ho rimessi a causa di numerosi messaggi di spam che ho ricevuto.
Ne ho parlato proprio qualche giorno fa in un commento.
Ho fatto un'icona di prova, cambiando solo colore e l'ho messa in un post di prova, funziona :)
RispondiEliminaSolo che per metterla al posto del submit di ricerca mi sa è un casino, per es. in style.css non c'è quasi niente, ho solo: .aligncenter {} .alignleft {} .alignright {} .wp-caption {} .wp-caption-text {} .gallery-caption {} .bypostauthor {} .sticky {}
Mi sa devo proprio trovare un tema più semplice..
@Niere: per il submit del form di ricerca vale tutto un altro discorso. Dovrei scrivere un post a parte!
RispondiEliminaTutte le cose più contorte le chiedo io :S
RispondiEliminaComunque ho provato con Firebug, ho modificato l'icona collegata a submit e l'ha sostituita con l'icona che ho fatto io ora, anche se l'effetto dell'icona che cambia non c'è
@Niere: controllando i vari css del tuo blog, per cambiare lo sfondo del pulsante submit prova a modificare il codice nel file style.php alla riga che inizia con input[type="submit"].
RispondiEliminaChe belli! Complimenti Iole!! Peccato che io non abbia FB...e quindi non ho neanche la pagina del mio blog su FB... ma quando la avrò utilizzerò questo post d'aiuto per il mio blog!!
RispondiElimina@SHILL: puoi utilizzare questo tutorial per creare qualsiasi icona, ad esempio per la home del blog.
RispondiEliminaDavvero una miniera questo tuo blog!
RispondiElimina@Iole: Grazie ;D
RispondiEliminaPS: sono Shill live nintendo 3DS :D e visto che posso aprire una sola pagina, non posso fare login contemporaneamente xD e devo mettere per forza anonimo :(
@Sandra M.: grazie!
RispondiEliminaHai visto? Ho tolto anch'io le captcha e ti ho nominata nel post che ho appena pubblicato.
Comunque ieri ti avevo segnalato il concorso dedicato a tutte le donne!
@SHILL: oltre ad anonimo puoi scegliere l'opzione Nome/URL, inserendo il tuo nickname e l'indirizzo del tuo blog.
Fortissimo....ma fuori dalla mie corde e mi va più che bene quello che hai già fatto per me.
RispondiEliminaAnche se non è perfettamente attinente, volevo chiederti come si fa il collegamento ad esempio se io clicco sulla tua icona "twitter" vado direttamente e ti seguo perchè ci sono anch'io. Ho visto però che tutti i post sono già presenti. Questi vanno direttamente come scrivi il post oppure devi farlo andare con il sistema "tweet"?? Io di solito clicco sul mio post su twitter, mi viene chiesto di confermare "tweet" e quindi il post si evidenzia su twitter.
Grazie.
PS
Credo che non sia un argomento di commento e quindi se hai tempo rispondimi in privato ed elimina il commento
@edvige: anche se quello che mi chiedi non è attinente al post, ti rispondo ugualmente qui sul blog.
RispondiEliminaSul mio profilo twitter condivido i link dei miei post cliccando sul pulsante di condivisione ogni qual volta pubblico un nuovo post.
P.S. Come dico sempre a tutti coloro che mi contattano via email, e non tramite commento, per chiedere informazioni (riguardanti o non riguardanti un post) è importante lasciare un commento perché ogni vostra domanda e ogni mia risposta possono essere d'aiuto in futuro a chi ha i vostri stessi dubbi o ha le stesse vostre difficoltà. Via email invece mi trovo a dover rispondere più volte sempre alle stesse domande.
Iole ce l'ho fatta finalmente, grazie mille!! :D
RispondiEliminaHo modificato le icone dei commenti, ora andando sopra alla nuvoletta dei commenti viene fuori un + .
Solo che ho un problema (come sempre..): se passo sopra al mouse oltre che ad aggiungere il + si colora anche di rosso :(( non trovo il codice relativo per metterlo trasparente..uff..il codice del colore rosso deve essere #C21313 ma nel style.css con questo colore esadecimale ho solo:
/* Links */ (tutti i link attivi)
a { color: #C21313;
e
.entry-title {
color: #C21313; (il titolo dei post)
Sai mica come posso risolvere?
p.s. ho fatto anche una header più decente, forse, non so..inizio a non invidiare i grafici e webmaster, c'è da picchiarsi con codici e programmi di grafica :D
@Niere: veramente bella la nuova header. Complimenti!
RispondiEliminaRiguardo allo sfondo dei commenti, la parte di codice da modificare è la seguente:
.entry-header .comments-link a:hover,
.entry-header .comments-link a:focus,
.entry-header .comments-link a:active,
.feature-slider a.active {
background-color: #c21313;
}
sostituendo il colore di sfondo #c21313 con transparent.
Niente, non va, rimane sempre il colore rosso :( ho provato a cambiare i vari colori e non si leva proprio..
RispondiEliminaQuel .feature slider a.active ce l'ho e ho messo background-color: transparent (non c'era il #C21313) e resta sempre il colore rosso.. :( boh..primia ho anche provato a cambiare i vari colori dei link principali e niente, eppure l'immagine con il + non ha lo sfondo rosso, forse è rimasto bloccato qualcosa quando ho modificato il tema di default theme eleven
@Niere: prova ad aggiungere prima di </head> questo codice:
RispondiElimina<style>
.comments-link a:hover {
background-color: transparent;
}
</style>
e fammi sapere.
Ciao, grazie mille, risolto finalmente.
RispondiEliminaHo provato vari modi e poi ho messo: "background-color: transparent !important;" e ora sembra funzionare, boh.
Grazie mille dell'aiuto e della pazienza :D
Ciao Iole il tuo blog è bellissimo mi potresti fare un gadget personalizzato? Se potresti un cursore mouse con un vestitino e vestitini che cadono dal blog!! Grazie
RispondiElimina@Sissy: al momento ho tantissime richieste in sospeso, alcune anche da parte di lettori che sono stati generosi con me con donazioni e regali.
RispondiEliminaMi dispiace ma non posso proprio aiutarti. Riprova a contattarmi tra qualche mese.
piomeno ad aprile?
RispondiElimina@Sissy: ricontattami verso fine aprile!
RispondiElimina@Iole:va bene
RispondiEliminaCiao @Iole, vorrei sapere come faccio per inserire il tasto YouTube nelle tendine del mio blog!? Spero tu abbia capito, un abbraccio cara, grazie di già. A presto, Raquel
RispondiElimina@Raquel Bezerra: per inserire la voce YouTube nel menu del tuo blog devi andare in Blogger, cliccare su Pagine, poi sul pulsante Nuova pagina e selezionare la voce Indirizzo web inserendo poi l'indirizzo della tua pagina YouTube.
RispondiEliminaciao yole, auguri di buon anno, volevo sapere se possibile come faccio ad inserire i bottoni sociali in alto a destra della sidebar di blogger, grazie infinite ^_^
RispondiEliminascusa mi correggo, sotto la navbar ;)
RispondiElimina@Roxy N.: ti consiglio di dare un'occhiata ai bottoni sociali offerti da AddThis.
RispondiEliminaTutorial utilissimo :D
RispondiEliminaCiao Iole. Post utilissimo. Sono riuscita ad inserire queste icone nel mio blog. Funzionano! L' unica cosa è che quando ricarico la pagina, e ci passo sopra con il mouse, prima di cambiare da nere a grigie (le due immagini di differenti colori che ho utilizzato)per un attimo diventano bianche (solo quando ricarico la pagina poi prendono a funzionare normalmente). Ha qualche consiglio per evitare questo "saltello bianco"??? Grazie mille!
RispondiElimina@LeChat Noir: sono stata nel tuo blog e ho visto l'effetto "saltello bianco" di cui mi parlavi. Questo problema si verifica perché al passaggio del mouse l'immagine nera che deve comparire al posto di quella grigia deve essere caricata, quindi impiega qualche frazione di secondo per essere visibile. Finché non è visibile non vedi nulla, o meglio vedi il colore bianco dello sfondo.
RispondiEliminaUna soluzione a questo problema è realizzare per ciascun pulsante un'immagine che contiene entrambe le icone e gestire gli eventi del mouse impostando nel css quale porzione dell'immagine visualizzare tramite delle coordinate. Detto così può sembrare una cosa complicata ma non lo è. Magari ti invio una mail con ulteriori dettagli.
Ne approfitto anche per segnalarti un altro problema: utilizzando Chrome sia le icone dei social network e sia altre immagini presenti nel tuo blog non vengono visualizzate. Non so se dipende dal mio pc ma anche su altri blog che caricano le immagini su Dropbox mi capita di vedere il blog senza immagini mentre su Firefox non ci sono problemi di visualizzazione.
ciao Iole
RispondiEliminann uscirei mai dal tuo blog...tutto interessante...bello
smack
@maria antonietta Sechi: grazie per i complimenti ^_^
RispondiEliminaCiao Iole, complimenti per il blog!
RispondiEliminaHo un problema con le icone sensibili: funziona tutto perfettamente finchè gira in localhost, ma testando il blog in una LAN (con ip statico del mio PC) le icone spariscono. Tutte le altre immagini del blog si vedono, quelle dell'icona sensibile no, il pulsante però funziona, nel senso che si attiva il link e cliccandoci rimanda alla pagina collegata. Sembra non dipendere dal tipo di browser e nemmeno dal fatto che inserisca il codice in un widget piuttosto che in una pagina. Avresti qualche consiglio per capire cosa non va?
Grazie comunque. Buona giornata
Roberto
@roberto: se non vedi le icone al passaggio del mouse è perché devono essere ancora caricate. Se le icone sono "piccole" allora il tempo di caricamento è breve e al passaggio del mouse vengono subito caricate e quindi sono subito visibili, se invece le icone sono "grandi" allora occorre attendere un po' di più.
RispondiEliminaSpero di esserti stata d'aiuto. Per altri dubbi o chiarimenti sono qui a disposizione.
ciao iole! sono nuova nel mondo dei blog. Ho scaricato delle icone e ho seguito il procedimento. il punto è che solo una delle icone inserite è visibile. al bosso delle altre icone si vede un il link scritto normalmente. come posso risolvere? grazie mille
RispondiElimina@IRose92I: sono stata nel tuo blog e ho visto le icone ma non i link di cui mi parli.
RispondiEliminaSe desideri delle icone sociali personalizzate con effetti al passaggio del mouse lasciami un commento nell'apposito post e le realizzerò con piacere per te.
Ciao! io ho un problema ho usato il tuo metodo tramite css e funzione, solo che l'img di facebook ora me la taglia e me la raddoppia, come mai?
RispondiElimina@Anonimo: se mi lasci l'indirizzo del tuo blog passo a controllare se c'è qualcosa che non va nel codice.
RispondiEliminaCiao Iolecal io nel mio blog icone di wattpad https://www.wattpad.com/user/MaryIppolito83 come posso fare?
RispondiElimina@Mary Ippolito: se desideri delle icone personalizzate, lascia un commento nell'apposito post.
Elimina