Con delle semplici modifiche riusciremo a creare degli effetti molto carini che verranno applicati su tutte le immagini o su immagini che si trovano in determinate posizioni (Posizione qualsiasi del blog, all'interno degli articoli o all'interno della colonna).
Cominciamo col dire che prima di effettuare qualsiasi modifica alla struttura è meglio effettuare un backup del proprio modello attuale cliccando su "Scarica modello completo" da Layout/Modifica Html.
Ecco i codici css che useremo per creare un effetto sulle immagini.
Per un effetto su tutte le immagini del blog (Articoli, sidebar, header, footer ecc...):
img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
img:hover { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
a img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
a img:hover { padding:4px; border:1px solid #333333; background:#84d0f0; }Per un effetto sulle immagini degli articoli:
.post-body img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.post-body img:hover { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.post-body a img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.post-body a img:hover { padding:4px; border:1px solid #333333; background:#84d0f0; }Per un effetto sulle immagini della sidebar (Colonna destra o sinistra):
.widget-content img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.widget-content img:hover { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.widget-content a img { padding:4px; border:1px solid #cccccc; background:#f0f6fb; }
.widget-content a img:hover { padding:4px; border:1px solid #333333; background:#84d0f0; }Tali codici vanno inseriti all'interno della struttura, più precisamente nella parte che definisce il foglio di stile. "<b:skin><![CDATA[" (apertura) e "]]></b:skin>" (chiusura).
Ovviamente va usato solo uno dei tre codici in base alla posizione dove vorremo che sia visualizzato l'effetto.
La caratteristica dell'effetto prende spunto da una solita struttura di wordpress. Ogni immagine sarà contornata da un bordo molto sottile che al passaggio del mouse si illuminerà. Provare per credere!
I colori del bordo e dell'illuminazione possono essere facilmente modificati editando le proprietà "solid #cccccc;" e "background:#f0f6fb;" a nostro piacimento.
Non esitate a lasciare dei commenti qualora abbiate bisogno di ulteriori delucidazioni.
Spero di farvi molto contenti, è la prima volta che viene spiegato come integrare tale effetto all'interno degli articoli di blogger. :)
22 commenti:
perfetto! molto carino l'effetto,grazie Kamy :)
@ elisabetta: Mi fa molto piacere!
brv nn ti smentisci mai sempre cose semplici brv!
KAMY SEI UN GRANDE!
@ vicio: eh... ormai è mia consuetudine semplificare al massimo il tutto soprattutto per il fatto che mi date sempre molte soddisfazioni!!
Grz!
@ PsYcO KiLLeR: Vedo che il mio intento è perfettamente riuscito!
Grande Kamy! ti seguo da poco tempo e grazie a te la veste grafica e funzionale del mio blog è notevolmente migliorata. Grazieeee ;-)
@ Francesco Marsella: Ne sono davvero felice! E' sempre un grande piacere riuscire a farvi utilizzare determinate tecniche e servizi.
Grazie Kamy. per caso sai dove posso trovare un convrtitore di valuta per blog? Grazie
Rudin
buongiorno kamy sai se funziona anke sul mio minima? perke' il bordo c'e' ma nn si illumina!
Super! Testato e fuzionante. Grazie, sei un professionista.
Simpatico come effetto...
come al solito complimenti....
@ Vacanze in Albania: Prova tra i gadget offerti da blogger... magari trovi qualkosa!
@vicio: Si funziona anche sul tuo. :)
@ Massimiliano La Rosa: Troppo buono definirmi professionista... grz!
@ AD. GIANLUCA TOZZI: Grz di cuore!
kamy ma perke' dicono tutti che wordpress e' meglio di blogger io li ho provati tutti e 2 e blogger mi sembra il piu' facile da usare e tutto sommato anche piu' facile da personalizzare e poi alla fine le cose che blogger non ti da di suo noi ce le procuriamo!
@ vicio: Di sicuro wordpress offre maggiori possibilità di personalizzazione siccome è una piattaforma scaricabile gratuitamente ed installabile su un proprio server. Inoltre la community di wordpress è molto più grande rispetto a blogger e per questo vi sono a disposizione plugin di vario genere.
Blogger invece è una piattaforma aperta solo a tutti coloro che decidono di iscriversi a blogger e non è possibile installarla su un server proprio.
Tuttavia non oserei affermare che wordpress è molto meglio. E' solo che blogger vanta un numero minore di utenti.
Credo con il il tempo la situazione cambierà e finalmente la piattaforma Blogger verrà valorizzata da tutti,
ah ma io uso un dominio .com ma il server nn e' cmq mio vero kamy perke' vedo che tu ci buti javascript immaggini etc. nel sitoblu io invece sono costretto a usare altervista
Ciao Kamy, ci puoi spiegare come inserire l'effetto Lytebox su blog? Grazie e complimenti.
fatto, grazie mille! adoro apportare le modifiche che più mi aggradano e creare il mio blog a mia misura! la spiegazione eccellente, ottimo lavoro, grazie!
cercavo qualcosa effetto --titolo a scorrimento--
Posta un commento