Lo so, è l'ultimo in ordine delle richieste di tutorial, ma è anche quello che risco a fare in poco tempo, e visto che quando i figli sono a casa bisogna in pratica prendere il numero per stare al pc... appunto -.-
Per ottenere questo effetto...
Il procedimento è davvero semplicissimo e vi basterà semplicemente copiare e incollare il codice CSS!
.item-thumbnail a img {
filter:alpha(opacity=100);
-webkit-border-top-right-radius:50;
-webkit-border-top-left-radius:50;
-webkit-border-bottom-right-radius:50;
-webkit-border-bottom-left-radius:50;
border-radius: 50px;
-moz-border-radius: 50px;
border:1px dashed #999;
padding:3px;
}
filter:alpha(opacity=100);
-webkit-border-top-right-radius:50;
-webkit-border-top-left-radius:50;
-webkit-border-bottom-right-radius:50;
-webkit-border-bottom-left-radius:50;
border-radius: 50px;
-moz-border-radius: 50px;
border:1px dashed #999;
padding:3px;
}
Se non volete il bordo tratteggiato, ma liscio, sostituite dashed con solid all'interno di questa riga border:1px dashed #999;.
Se invece non volete proprio il bordo, lì dove trovate 1px cambiate con 0.
Ho notato che in alcuni blog la lista delle immagini dei Post Popolari sono precedute da un puntino (caratteristica delle liste, appunto). Volete eliminarlo? Ecco come fare! Inserite questo codice, anche subito sotto quello precedente (vedi sopra)
.widget .popular-posts ul {
list-style: none;
}
list-style: none;
}
.jpg)
grazie della spiegazione!
RispondiEliminadi niente cara :D
EliminaIncredibile, ma io ti adoro :)) Saranno 3 giorni che ho aggiunto il widget dei post popolari, che di base non mi piace per niente... L'ho modificato leggermente ma continuo a trovarlo triste, e ora questo tuo post... arriva A FAGIUOLO! :D
RispondiEliminaAdesso, ispiratissima da questo tuo tutorial, penso che vorrei mettere un po' di border-radius alle thumbnail e il tratteggio intorno, oltre all'effetto hover, che poi è così che sono già i link dei post nelle mie pagine del menù di navigazione... Vorrei farlo anche per le thumbnail di Linkwithin, appena ho tempo. Oppure sostituire Linkwithin con un altro widget analogo che avevo scovato di recente e che di base mi sembrava più accattivante. Certo, mi ricordassi il nome sarebbe anche meglio -_-
Comunque ancora grazie ♥
Sono felice che ti sia utile ^_^
EliminaPer Linkwithin sto preparando il tutorial (che era già in lista d'attesa) per personalizzarlo e renderlo più gradevole :)
Ecco, ci ho appena lavorato un pochino :D
EliminaHo deciso di nascondere lo snippet con l'inizio del testo del post perché proprio non mi piaceva come sbordava al di sotto della thumbnail... e anche perché non mi sembrava così significativo. Preferirei metterci un button del tipo "leggi" o "vai all'articolo"... mah, magari più avanti, se riesco.
Grazie ancora!!!
Ti ho inviato una email ;)
EliminaGrazie!! :D
RispondiEliminaHo messo subito in pratica il tuo aiuto! Adesso il gadget mi piace molto di più. :D
Mi fa piacere che ti sia servito :D
EliminaGrazie infinite Simona!!! ^_^ ci provo subito!
RispondiEliminaPrego cara, molto bello il risultato ^_^
EliminaGrazie!! Senza il tuo aiuto non so cosa avrei fatto!! ihihi ;)
EliminaOh bello questo grazie delle istruzioni!!!
RispondiEliminaPrego :D
EliminaFantastico! ma quante cosine interessanti nel tuo blog. Ora me le studio! grazie di essere passata da noi, così ti ho potuto conoscere. A prestissimo direi!
RispondiEliminaSara.
Grazie :D
EliminaCiao Simona,
RispondiEliminaho appena scoperto il tuo blog e già lo amo ^-^ Io sono nuova a cose come Html e Css e sto imparando piano piano, e fa sempre piacere scoprire qualcuno che dispensa utili consigli! Ho appena usato questo codice e mi piace tantissimo l'effetto finale! Grazie! :3
Ciao Rosa, benvenuta allora :D Si comincia sempre a piccoli passi e poi ci si appassiona ^_^
EliminaPinnato subito! Grassie!
RispondiEliminaGrazie mille per le spiegazioni, le ho applicate al mio nuovo meraviglioso template (ma quanto mi piace???
RispondiElimina^_^) e ora anche questo widget si armonizza meglio con tutto il resto.
Grazie ancora, a presto!
Daniela - Mani di Dani
Questo commento è stato eliminato dall'autore.
RispondiEliminaE' bellissimo ed infatti l'ho adottato anche io per il mio blog. Grazie, è davvero strepitoso!!!!! <3 <3 <3
RispondiEliminaGrazie :D Una volta che si imparano alcune basi a livello di codici puoi applicarli quasi dove vuoi :D
EliminaAdoro il tuo blog, è una fonte inesauribile in info e belle cose!
RispondiEliminaNuova followers e grazie per le info.. utilissime!
Bianca
Grazie Bianca! Ricambio volentieri la tua gentilezza :)
EliminaQuando riprenderò con i tutorial vi mostrerò anche come modificare ulteriormente i post popolari rendendoli ancora più carini ;)
Buuuu a me non funziona T.T
RispondiEliminaPS. AMO IL TUO BLOG. Punto. E grazie per tutto quello che fai per noi principianti!
Ciao Roberta! Non demordere, perchè ho provato sul tuo blog e funziona :D
EliminaHai inserito i codici nel posto giusto?
Io li ho aggiunti facendo questo percorso: modello -> personalizza -> avanzato -> aggiungi CSS. Sbaglio qualcosa? :) in quella sezione ho già due CSS, te li scrivo nel caso fossero loro il problema ma non credo proprio. ".status-msg-wrap
Elimina{
display: none;
}
.sidebar .widget {
margin-top: -40px;"
Grazie per l'aiuto, davvero <3
No è corretto, è lì che devi inserirlo!
EliminaIl codice che hai messo qui lo hai copiato così come è scritto?
Perchè se è così allora c'è un errrore che non ti fa vedere il cambiamento, perchè non lo legge proprio!
tu hai scritto:
.sidebar .widget {
margin-top: -40px;
invece deve terminare con la chiusura della parentesi graffa...
se invece c'è, prova ad inserire nuovamente il codice e ad aggiornare almeno un paio di volte la pagina del blog.
Ok il problema era la graffa mancante! Mannaggia a lei. Grazie mille ancora :)
EliminaCome posso descrivere quanto ti sono grata? ti farei un monumento. ♥
RispondiEliminaDavvero, grazie Simona!
Wow, sei stragentilissima!!!! Ti ringrazio ^__^
EliminaCiao Simona :) Era da tantissimo che cercavo questo codice, ma non online non lo trovavo mai! Adesso che l'ho trovato sono super contenta, solo che però ho un problema :(
RispondiEliminaIeri ho modificato la grafica del mio blog (clicca qui per vederlo) e probabilmente il template che ho inserito è "chiuso" ossia che posso modificare i codici solo dall'HTML e non dal CSS perchè quando vado ad inserire questo codice nella zona CSS di "personalizza" non mi fa salvare il modello.. Protesti dirmi gentilmente dove inserire questo codice nell'HTML? Mi saresti davvero d'aiuto!
Grazie mille ♥
Chiara.
Sono riuscita a risolvere da sola! :D
EliminaCiao Chiara, mi fa molto piacere che tu ci sia riuscita, perdonami se non ti ho potuto rispondere prima :)
EliminaCiao e grazie mille per questa risorsa :) A me inizialmente non funzionava allora ho provato a inserire il codice direttamente da "modifica html" ed è andato bene :) grazie ancora
RispondiEliminaGrazie a te ^_^
EliminaL'ho provato sul mio blog, funziona!! Bellissimo ♥
RispondiEliminaGrazie della spiegazione :)
Prego Sylvia!!! Molto bella la grafica del tuo blog ^_^
EliminaGrazie, ho riprovato più volte alla fine ci sono riuscita,bellissimo grazie mille per la spiegazione. :)
RispondiEliminaCiao Simona, un caro saluto!
Mi fa molto piacere :D
EliminaCiao simona, ho provato nel mio blog, però il bordo resta liscio perchè? dove sbaglio?
RispondiEliminaCiao Jeje, ho visto che hai risolto, sono molto felice :)
EliminaCiao Simona, sai che non ho risolto? io continuo a vedere i bottoncini lisci e non tratteggiati, sarà un mio problema... tu le vedi tratteggiate? ti ringrazio tanto per i tuoi consigli e ti faccio i complimenti per il tuo blog, è bellissimo. Seguo il blog molto volentieri :)
RispondiEliminaIl tuo commento mi ha fatto venire dei dubbi, ho provato ad usare internet explorer ed effettivamente visualizzando il blog da li riesco a vederle tratteggiate e invece con firefox sono lisce!
EliminaCiao Jessica, effettivamente i browser leggono in maniera diversa l'HTML e il CSS, e non capisco perchè non si uniformino... io utilizzo solo Chrome, perchè è più veloce e non mi dà molti problemi di 'lettura'...e in effetti con Chrome vedo le immagini perfette ;)
EliminaFatto!!! Simona ti ho scoperto e ora non ti mollo più!!! Quante cose interessanti scrivi!!!!!!! Grazie, Silvia
RispondiEliminaUn'idea carinissima, grazie ^_^
RispondiEliminaDa quando l'ho scoperto il tuo blog, cara Simona, è fonte d'ispirazione.
RispondiEliminaC'è solo un problema, ho applicato il codice sia da css, che manualmente modificando l'html e copiandolo pari passo, ma niente, le immagini rimangono esattamente le stesse. Sapresti aiutarmi?
Ciao! Il problema sta nel template che non è quello di base di Blogger, quindi i nomi dei codici sono diversi, ecco perchè non accade nulla :)
EliminaHo guardato il tuo codice e fatto una prova che sembra funzionare... Prova ad aggiungere questo codice nel CSS:
.side-image a img {
filter: alpha(opacity=100);
-webkit-border-top-right-radius: 50;
-webkit-border-top-left-radius: 50;
-webkit-border-bottom-right-radius: 50;
-webkit-border-bottom-left-radius: 50;
border-radius: 50px;
-moz-border-radius: 50px;
border: 1px dashed #999;
padding: 3px;
width: 86px !important;
height: 86px !important;
}
Poi dimmi se funziona ;)
Simona io ti adoro! Funziona! <3 Grazie.
EliminaHo appena letto il tuo annuncio e visto il video, m'è preso un coccolone...non mollare, ti ho conosciuta da poco ma sei già stata utilissima e soprattutto gentilissima con me!
Spero che il tuo nuovo percorso ti dia soddisfazioni, le meriti, come bravura e come persona!
Grazie!!!! Le tue parole mi fanno davvero felicissima *___* ♥♥♥
EliminaCiao Simona! Da tempo uso questo tuo gadget bellissimo! Da qualche tempo però, per qualche motivo che non riesco a comprendere, alcune immagini di anteprima dei post non si "adattano" al cerchio, ma strabordano anche oltre il gadget stesso. Cosa posso fare? Capita alternativamente su diverse anteprime.
RispondiEliminahttp://whenwetalkaboutbooks.blogspot.it
Ciao Penny!Ho controllato con tre browser diversi e non ho riscontrato questo problema...
EliminaQuando ti ricapiterà fai uno screenshot, così che possa vedere con quali immagini lo fa, magari è un problema di inserzioni d'immagini, nel senso che non le carichi direttamente sul blog ma le inserisci incollando l'URL dell'immagine da un altro sito ;)