21 febbraio 2012

41 commenti Condividi il post Facebook Twitter Google+

Come inserire nel blog delle icone sensibili al passaggio del mouse

Tutorial: IconeScrivo 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)

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); }

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>


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.

41 commenti

  1. Grazie mille Iole!! Sembra anche facile da fare, pensavo chissà cosa. Appena riesco farò delle prove :)
    Grazie ancora

    RispondiElimina
  2. @Niere: per qualsiasi dubbio o chiarimento sono qui a disposizione.

    RispondiElimina
  3. Grazie Iole! sempre utili i tuoi consigli e tutorial...
    Buona giornata...anche tu hai il fastidiosissimo codice captcha difficile da decifrare????

    RispondiElimina
  4. @tilli: ho notato che da alcuni giorni i captcha sono diventati davvero impossibili da leggere.
    Avevo 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.

    RispondiElimina
  5. Ho fatto un'icona di prova, cambiando solo colore e l'ho messa in un post di prova, funziona :)

    Solo 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..

    RispondiElimina
  6. @Niere: per il submit del form di ricerca vale tutto un altro discorso. Dovrei scrivere un post a parte!

    RispondiElimina
  7. Tutte le cose più contorte le chiedo io :S
    Comunque 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'è

    RispondiElimina
  8. @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"].

    RispondiElimina
  9. Che 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
  10. @SHILL: puoi utilizzare questo tutorial per creare qualsiasi icona, ad esempio per la home del blog.

    RispondiElimina
  11. Davvero una miniera questo tuo blog!

    RispondiElimina
  12. @Iole: Grazie ;D
    PS: 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 :(

    RispondiElimina
  13. @Sandra M.: grazie!
    Hai 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.

    RispondiElimina
  14. Fortissimo....ma fuori dalla mie corde e mi va più che bene quello che hai già fatto per me.
    Anche 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

    RispondiElimina
  15. @edvige: anche se quello che mi chiedi non è attinente al post, ti rispondo ugualmente qui sul blog.
    Sul 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.

    RispondiElimina
  16. Iole ce l'ho fatta finalmente, grazie mille!! :D
    Ho 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

    RispondiElimina
  17. @Niere: veramente bella la nuova header. Complimenti!
    Riguardo 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.

    RispondiElimina
  18. Niente, non va, rimane sempre il colore rosso :( ho provato a cambiare i vari colori e non si leva proprio..

    Quel .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

    RispondiElimina
  19. @Niere: prova ad aggiungere prima di </head> questo codice:

    <style>
    .comments-link a:hover {
    background-color: transparent;
    }
    </style>

    e fammi sapere.

    RispondiElimina
  20. Ciao, grazie mille, risolto finalmente.
    Ho provato vari modi e poi ho messo: "background-color: transparent !important;" e ora sembra funzionare, boh.
    Grazie mille dell'aiuto e della pazienza :D

    RispondiElimina
  21. 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
  22. @Sissy: al momento ho tantissime richieste in sospeso, alcune anche da parte di lettori che sono stati generosi con me con donazioni e regali.
    Mi dispiace ma non posso proprio aiutarti. Riprova a contattarmi tra qualche mese.

    RispondiElimina
  23. @Sissy: ricontattami verso fine aprile!

    RispondiElimina
  24. Ciao @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
  25. @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.

    RispondiElimina
  26. ciao 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 ^_^

    RispondiElimina
  27. scusa mi correggo, sotto la navbar ;)

    RispondiElimina
  28. @Roxy N.: ti consiglio di dare un'occhiata ai bottoni sociali offerti da AddThis.

    RispondiElimina
  29. Ciao 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
  30. @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.
    Una 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.

    RispondiElimina
  31. ciao Iole
    nn uscirei mai dal tuo blog...tutto interessante...bello
    smack

    RispondiElimina
  32. @maria antonietta Sechi: grazie per i complimenti ^_^

    RispondiElimina
  33. Ciao Iole, complimenti per il blog!
    Ho 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

    RispondiElimina
  34. @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ù.
    Spero di esserti stata d'aiuto. Per altri dubbi o chiarimenti sono qui a disposizione.

    RispondiElimina
  35. 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
  36. @IRose92I: sono stata nel tuo blog e ho visto le icone ma non i link di cui mi parli.
    Se desideri delle icone sociali personalizzate con effetti al passaggio del mouse lasciami un commento nell'apposito post e le realizzerò con piacere per te.

    RispondiElimina
  37. 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
  38. @Anonimo: se mi lasci l'indirizzo del tuo blog passo a controllare se c'è qualcosa che non va nel codice.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy