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.
Questo blog è sostenuto dalle vostre donazioni spontanee e dai click
sugli sponsor. Se sei un frequentatore abituale del mio blog e
ritieni utile il lavoro che svolgo sostienimi come puoi. Grazie!
Iscriviti e gioca!
sugli sponsor. Se sei un frequentatore abituale del mio blog e
ritieni utile il lavoro che svolgo sostienimi come puoi. Grazie!
Iscriviti e gioca!
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.
25 commenti:
Grazie ancora
Buona giornata...anche tu hai il fastidiosissimo codice captcha difficile da decifrare????
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.
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..
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'è
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 :(
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.
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
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.
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
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.
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
<style>
.comments-link a:hover {
background-color: transparent;
}
</style>
e fammi sapere.
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
Mi dispiace ma non posso proprio aiutarti. Riprova a contattarmi tra qualche mese.
Ti è stato utile il post? Allora lasciami un commento!