martedì 17 febbraio 2015

Come arrotondare le immagini delle anteprime dei post popolari

Ecco il tutorial su come rendere circolari le immagini di anteprima dei post popolari. 

Come sempre prima di fare qualsiasi modifica al blog vi invito a fare il back up del vostro blog.














Il codice CSS per arrotondare le immagini delle miniature dei post popolari da inserire è:

.PopularPosts img 

{ border-bottom-left-radius: 300px !important; 
 border-bottom-right-radius: 300px !important; 
 border-top-left-radius: 300px !important; 
 border-top-right-radius: 300px !important; 
}

Dal menù a tendina dove trovate anche i post, i commenti ecc cliccate su Modello > Personalizza > Avanzato > Aggiungi CSS. 
















Se volete anche aggiungere dei trattini, puntini o linea usate questo codice: 

.PopularPosts img {
    border-bottom-left-radius: 300px !important;
    border-bottom-right-radius: 300px !important;
    border-top-left-radius: 300px !important;
    border-top-right-radius: 300px !important;
border:1px DASHED #999
padding:3px
}

Questo è un codice composto da elementi che potete modificare a seconda delle vostre esigenze e preferenze. 

Potete cambiare lo spessore dei trattini (o della linea o dei punti) modificando il valore 1px

Potete anche cambiare la linea da trattini (dashed) in puntini (dotted) oppure in riga (solid) ecc. inserendo solid | dashed | dotted. Fate delle prove e vedete quale vi piace di più!  

Alla fine potete cambiare il colore dei trattini usando i codici che trovate in questa tabella di colori di riferimento.






Nell'Anteprima che si trova nella stessa pagina in basso potete subito visualizzare la presenza o meno delle miniature circolari e dei trattini o linea. 











L'ultimo passo è cliccare su “Applica al blog” (in alto a destra) per confermare la modifica.


Fatto? Bene, siete riusciti ad arrotondare le immagini delle miniature dei post popolari in un blog di Blogger

A presto! :-) 


9 commenti:

  1. IO TI ADORO!!!
    Grazie mille, semplice ed efficace come tutti i tuoi tutorial :)
    era una vita che ci provavo :)

    RispondiElimina
  2. Ciao!!! Bellissimi i post popolari tondi!!! E' stato più facile di quanto pensassi! Grazie per il tutorial! Se tutto va bene andrò online con un nuovo template molto presto! Un abbraccio.. Lisa ..

    RispondiElimina
    Risposte
    1. Ciao Lisa!
      ottimo! sono contenta! bellissimo il tuo blog! complimenti! non vedo l'ora di vedere il nuovo template!!! a presto!
      :-)

      Elimina
    2. Ciao! :) Ho caricato il template con le immagine dei post più popolari arrotondate! Grazie ancora per il tutorial, mi piacciono tantissimo! Se ti va passa a trovarmi! Un abbraccio e buon fine settimana! .. Nuova follower :)

      Elimina
  3. Ill mio template deve aver qualcosa perchè non prende alcuna modifica del nuovo css :(

    RispondiElimina
  4. Ciao :)
    Una domanda, come sei riuscita ad arrotondare le immagini di LINKWITHIN?

    RispondiElimina
  5. Ciao =),
    piccola info, come mai le immagini non sono arrotondate, ho seguito tutte i procedimenti ma nulla, premetto che nel blog ho inserito anche altri CSS , grazie mille !

    RispondiElimina
    Risposte
    1. Ciao Ella mi spiace non riesco ad aiutarti. posso solo dirti di riprovare a fare tutto il procedimento, a volte le modifiche non riescono per piccole piccolissime cavolate!

      Ciaooooo
      Cinzia

      Elimina

Il tuo commento è prezioso per me, grazie per aver trovato il tempo per fermarti e condividere il tuo pensiero!

*** Ai post un po' datati ho applicato la moderazione altrimenti, con la testa che mi ritrovo, i commenti rimarrebbero nel limbo!***




LinkWithin

Related Posts with Thumbnails