immagin top

27.6.14

Blog design: immagini dei post popolari circolari

27.6.14

Ovvero come arrotondare le miniature del gadget 'Popular Post'.

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

tutorial popular post blogger - Simona S.

Il procedimento è davvero semplicissimo e vi basterà semplicemente copiare e incollare il codice CSS!

/***********************************************
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
.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;
}

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

HAI BISOGNO DI UN AIUTINO?


53 commenti:

  1. Incredibile, 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
    Adesso, 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 ♥

    RispondiElimina
    Risposte
    1. Sono felice che ti sia utile ^_^
      Per Linkwithin sto preparando il tutorial (che era già in lista d'attesa) per personalizzarlo e renderlo più gradevole :)

      Elimina
    2. Ecco, ci ho appena lavorato un pochino :D
      Ho 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!!!

      Elimina
  2. Grazie!! :D
    Ho messo subito in pratica il tuo aiuto! Adesso il gadget mi piace molto di più. :D

    RispondiElimina
  3. Grazie infinite Simona!!! ^_^ ci provo subito!

    RispondiElimina
    Risposte
    1. Prego cara, molto bello il risultato ^_^

      Elimina
    2. Grazie!! Senza il tuo aiuto non so cosa avrei fatto!! ihihi ;)

      Elimina
  4. Oh bello questo grazie delle istruzioni!!!

    RispondiElimina
  5. Fantastico! 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!
    Sara.

    RispondiElimina
  6. Ciao Simona,
    ho 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

    RispondiElimina
    Risposte
    1. Ciao Rosa, benvenuta allora :D Si comincia sempre a piccoli passi e poi ci si appassiona ^_^

      Elimina
  7. Grazie mille per le spiegazioni, le ho applicate al mio nuovo meraviglioso template (ma quanto mi piace???
    ^_^) e ora anche questo widget si armonizza meglio con tutto il resto.
    Grazie ancora, a presto!
    Daniela - Mani di Dani

    RispondiElimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  9. E' bellissimo ed infatti l'ho adottato anche io per il mio blog. Grazie, è davvero strepitoso!!!!! <3 <3 <3

    RispondiElimina
    Risposte
    1. Grazie :D Una volta che si imparano alcune basi a livello di codici puoi applicarli quasi dove vuoi :D

      Elimina
  10. Adoro il tuo blog, è una fonte inesauribile in info e belle cose!
    Nuova followers e grazie per le info.. utilissime!
    Bianca

    RispondiElimina
    Risposte
    1. Grazie Bianca! Ricambio volentieri la tua gentilezza :)
      Quando riprenderò con i tutorial vi mostrerò anche come modificare ulteriormente i post popolari rendendoli ancora più carini ;)

      Elimina
  11. Buuuu a me non funziona T.T
    PS. AMO IL TUO BLOG. Punto. E grazie per tutto quello che fai per noi principianti!

    RispondiElimina
    Risposte
    1. Ciao Roberta! Non demordere, perchè ho provato sul tuo blog e funziona :D
      Hai inserito i codici nel posto giusto?

      Elimina
    2. 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
      {
      display: none;
      }
      .sidebar .widget {
      margin-top: -40px;"
      Grazie per l'aiuto, davvero <3

      Elimina
    3. No è corretto, è lì che devi inserirlo!
      Il 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.

      Elimina
    4. Ok il problema era la graffa mancante! Mannaggia a lei. Grazie mille ancora :)

      Elimina
  12. Come posso descrivere quanto ti sono grata? ti farei un monumento. ♥
    Davvero, grazie Simona!

    RispondiElimina
    Risposte
    1. Wow, sei stragentilissima!!!! Ti ringrazio ^__^

      Elimina
  13. Ciao 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 :(
    Ieri 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.

    RispondiElimina
    Risposte
    1. Sono riuscita a risolvere da sola! :D

      Elimina
    2. Ciao Chiara, mi fa molto piacere che tu ci sia riuscita, perdonami se non ti ho potuto rispondere prima :)

      Elimina
  14. Ciao 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

    RispondiElimina
  15. L'ho provato sul mio blog, funziona!! Bellissimo ♥
    Grazie della spiegazione :)

    RispondiElimina
    Risposte
    1. Prego Sylvia!!! Molto bella la grafica del tuo blog ^_^

      Elimina
  16. Grazie, ho riprovato più volte alla fine ci sono riuscita,bellissimo grazie mille per la spiegazione. :)
    Ciao Simona, un caro saluto!

    RispondiElimina
  17. Ciao simona, ho provato nel mio blog, però il bordo resta liscio perchè? dove sbaglio?

    RispondiElimina
    Risposte
    1. Ciao Jeje, ho visto che hai risolto, sono molto felice :)

      Elimina
  18. Ciao 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 :)

    RispondiElimina
    Risposte
    1. Il 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!

      Elimina
    2. Ciao 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 ;)

      Elimina
  19. Fatto!!! Simona ti ho scoperto e ora non ti mollo più!!! Quante cose interessanti scrivi!!!!!!! Grazie, Silvia

    RispondiElimina
  20. Un'idea carinissima, grazie ^_^

    RispondiElimina
  21. Da quando l'ho scoperto il tuo blog, cara Simona, è fonte d'ispirazione.
    C'è 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?

    RispondiElimina
    Risposte
    1. 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 :)

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

      Elimina
    2. Simona io ti adoro! Funziona! <3 Grazie.
      Ho 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!

      Elimina
    3. Grazie!!!! Le tue parole mi fanno davvero felicissima *___* ♥♥♥

      Elimina
  22. Ciao 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.
    http://whenwetalkaboutbooks.blogspot.it

    RispondiElimina
    Risposte
    1. Ciao Penny!Ho controllato con tre browser diversi e non ho riscontrato questo problema...
      Quando 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 ;)

      Elimina