Pubblicato il 20/07/12e aggiornato il

Come eliminare ombre e bordi dalle immagini di Blogger.

Come togliere ombreggiature e bordi dalle immagini e dalle miniature degli articoli di Blogger.
In taluni modelli di Blogger sono presenti dei CSS che inseriscono automaticamente dei bordi e delle ombreggiature in tutte le immagini che vengono postate. Questo accade per i template scaricati in rete ma anche per quelli ufficiali personalizzati con il Designer Modelli di Blogger.

Anche se si va su Modello > Personalizza > Immagini e si sceglie #FFFFFF per il colore del bordo e dello sfondo si possono ugualmente visualizzare delle cornici intorno a tutte le immagini. Queste cornici vengono inserite anche nella immagine del Profilo, nelle icone dell'Elenco di Blog e in tutte le miniature in generale.

Vogliamo in sostanza eliminare bordi e ombreggiature in questo modo
togliere-ombreggiatura

Per prima cosa occorre vedere nel modello quale sia la classe che determina l'aspetto degli articoli. Negli ultimi modelli è .post-body ma in altri più vecchi può essere .post. Si va su Modello > Modifica HTML e cliccando su F3 si controlla quale dei due tag sia presente.

Nel primo caso si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
}

Nel secondo caso si sostituisce post-body con post. Si salva il modello. I bordi e le ombreggiature spariranno da tutte le immagini di tutti gli articoli che sono stati pubblicati o che lo saranno.
Se si utilizza Windows Live Writer per confezionare il post, si possono selezionare le singole immagini, andare su Strumenti Immagine > Stili immagini e cliccare su Nessuno

strumenti-immagini-windows-live-writer

Le altre opzioni sono Eredita dal blog e Ombreggiatura. Scegliendo Nessuno per lo Stile della immagine, nella maggior parte dei modelli si impedisce l'inserimento di bordi e ombreggiature senza bisogno di modificare il template. L'opzione può anche essere salvata come Impostazione predefinita in modo da non avere più bisogno di configurarla per ogni immagine postata.




57 commenti :

  1. grazie per l'articolo , solo una cosa mi è capitato che con alcune foto messe con Windows Live Writer non va via l'ombreggiatura nonostante abbia scelto opzione nessuno, questo solo con 3 foto , come mai , le altre non ho avuto problemi!

    RispondiElimina
  2. Grazie finalmente se sono andati via sti bordi!! Grazie Ernesto!

    RispondiElimina
  3. Grazie sempre! Quando ho un problema passo sempre da qua sicura di trovare soluzioni^^

    RispondiElimina
    Risposte
    1. Ho rifatto il mio template,ma stavolta ne` il primo caso ne` il secondo vanno bene. Sto impazzendo credo di aver messo qualche codice che fa contrasto per cui le ombre non scompaiono. :=(

      Elimina
    2. Questi codici del tuo modello li hai inseriti tu o c'erano già?

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 0px;
      background: transparent;
      border: 0px solid transparent;
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      }

      .post-body .tr-caption-container img {
      padding: 0;
      background: transparent;
      border: none;
      -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
      -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
      box-shadow: 0 0 0 rgba(0, 0, 0, .1);
      }

      Comunque salva il modello e prova a toglierli per poi aggiungere il codice di questo post
      @#

      Elimina
  4. Ciao, purtroppo pur incollando il codice non va via, sto impazzendo, cercando una soluzione, ma le ombre non vogliono andarsene.. :( questo è il mio blog,
    http://latelierdeitemplates.blogspot.it/
    come potrete ben vedere, togliere le ombre dalla cornice per la grafica del mio blog, è fondamentale.. come posso fare?

    RispondiElimina
    Risposte
    1. @CherylKristine
      Sarà che io non ho un gran senso estetico e per contro una vista non ottimale ma non vedo ombre di nessun tipo.

      Elimina
  5. Questo Blog è una B-I-B-B-I-A!!!!!!!!!!!! grazie mille,le spegazioni molto chiare e al contempo concise permettono anche ad una "trulla" come me di muoversi senza problemi ;).Grazie ancora

    RispondiElimina
    Risposte
    1. @Silvia+-+-+-
      Non essere così severa con te stessa :)

      Elimina
  6. FANTASTICO!!! indicazioni perfette non riesco ancora a crederci di avercela fatta a eliminare quei bordi orribili! :D

    xx
    www.pretpenser.com

    RispondiElimina
  7. Risposte
    1. @ tilli
      Prima salva il modello, poi cerca questo codice
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 2px;
      background: #ffffff;
      border: 1px solid #ead1dc;
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      }
      .post-body img, .post-body .tr-caption-container {
      padding: 5px;
      }
      .post-body .tr-caption-container {
      color: #cccccc;
      }

      e elimina le righe con il bordo e lo sfondo cioè
      background: #ffffff;
      border: 1px solid #ead1dc;
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

      P.S. Il blog preso in esame è ilmondoditilli.blogspot.it

      Elimina
    2. Ciao Ernesto, questo codice poi non ha funzionato sul blog in questione, però ho trovato questo... te lo lascio magari può essere utile per altri. Ciao e grazie.
      Codice CSS:

      img{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      Elimina
  8. Grandissimo, oramai non mi sforzo più a scorrere tra le ricerche google quando esce il tuo blog! Sei il mio guru!

    RispondiElimina
  9. Grazie mille! Abbasso i bordi!Già che ci siamo...grazie per tutti gli altri consigli e aiuti che mi hai dato....

    RispondiElimina
  10. Yeee! Anche io ci sono riuscita, grazie mille :)

    RispondiElimina
  11. grazie Ernesto, prendendo spunto un pò di qua ed un pò di la ho sistemato le immagini delle pagine :)

    RispondiElimina
  12. grazie 1000!!! Sei stato utilissimo!!!
    :-D
    S.

    RispondiElimina
  13. Finalmente mi sono decisa anch'io! Grazie mille :)

    RispondiElimina
  14. Ciao, Grazie per questo tutorial, mi sarebbe molto utile. Ma non so se sto sbagliando qualcosa. Quando cerco .post-body e .post, non li trovo nella HTML! Com'è possibile? Lisa

    RispondiElimina
    Risposte
    1. @# E' possibile perché forse non hai ancora ben compreso il funzionamento del nuovo Editor HTML di Blogger. Leggi e guarda il video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html

      Elimina
    2. Ce l'ho fatta! Avevi ragione, non avevo cliccato nel riquadro del codice html e non sapevo che dovesse uscire la possibilità di cercare solo dentro il riquadro. (Non faccio modifiche da quando hanno cambiato l'editor.) Grazie mille per l'aiuto!! :) Lisa

      Elimina
  15. ci sono riuscita anch'io! :) grazie!

    RispondiElimina
  16. fantastico, ci sono riuscita anch'io grazie mille

    RispondiElimina
  17. POST UTILISSIMO GRAZIEEEE!! unica domanda,, mi sono accorto che nella versione mobile le ombre e i bordi rimangono....

    qualche suggerimento? grazie in anticipo.

    RispondiElimina
    Risposte
    1. La versione mobile ha un template completamente diverso da quella desktop. Prova a cambiare template andando su Bacheca > Modello > Cellulare > Icona ruota dentata e provando un altro modello oppure quello personalizzato @#

      Elimina
    2. Ciao Ernesto sto' provando e riprovando a togliere dalla versione mobile le ombre ed i bordi alle immagini; ho scelto la versione 'predefinito' perché ho escluso le altre proprio in virtù di un aspetto che trovo più gradevole e conforme con il mio blog, non è che per caso hai qualche jolly per risolvere il problema?
      Sto' cercando una soluzione non tanto come finezza estetica ma per integrare i banner auto-promozionali nel layout bianco delle pagine dei post.
      Grazie e buona serata! :) Ciao

      Elimina
    3. Si può intervenire solo nel modello Personalizza
      @#

      Elimina
  18. ciao ernesto,io ho un templare simple come faccio a levare i bordi bianchi?
    non ho le righe
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;

    mi mancano proprio questi codici

    RispondiElimina
    Risposte
    1. Proprio perché non hai questi codici, li devi incollare :)
      Forse hai letto il post distrattamente. Non devi cercare quei codici ma incollarli sopra la riga specificata. Alternativamente prova quest'altro

      img{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      che devi incollare sempre prima di
      ]]></b:skin>
      @#

      Elimina
  19. Ciao Ernesto,ho provato con entrambi i codici ma non succede nulla
    ho provato ad inserirli prima di b skin ma niente...ovviamente non li ho incollati insieme ma una alla volta.

    RispondiElimina
    Risposte
    1. Incollami l'URL del tuo sito e vedo se hai una classe di stile diversa dal solito
      @#

      Elimina
  20. www.arteinmovimentodemaria.com

    ti ringrazio,proprio non riesco a risolvere spero mi darai una mano. Buona giornata

    RispondiElimina
    Risposte
    1. Nella Homepage vedo solo dei widget (2 di snapwidget). Con Chrome non si vede altro. Anche con Firefox è uguale. Non ci sono immagini su cui testare. Se si clicca su una miniatura si apre una pagina di snapwidget.
      Il template ha i codici normali. Se inserisci il codice dell'articolo dovrebbe funzionare ma in Blogger non in snapwidget
      @#

      Elimina
  21. no a me interessa eliminare i bordi bianche a quelle immagini del widget e anche in Codici Prodotti,le immagini hanno il bordo bianco.La home va bene così

    RispondiElimina
  22. i widget sono con html non snapwidget.Quello di snapwidget è solo nella home e sono tutte miniature,sulla colonna a destra le immagini sono caricate tramite host

    RispondiElimina
    Risposte
    1. Si ho visto questa pagina
      http://www.arteinmovimentodemaria.com/p/pastori-in-movimento-10cm_13.html
      Dovevi incollarmi questa. In effetti c'è uno sfondo trasparente. Non capisco perché non funzioni. Prova con questo codice
      .post-body .tr-caption-container img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }
      Da incollare sempre sopra alla stessa riga
      @#

      Elimina
  23. Grande Ernesto! Sono appena diventata tua Follower.
    A presto!

    RispondiElimina
  24. Grazie mille!! Qui trovo sempre la soluzione ideale ai problemi del mio blog...complimenti per il lavoro che fai!

    RispondiElimina
  25. ma perchè io questo codice non lo trovo??????????????????? qui riescono tutti tranne me XD non riesco a trovare nè post body e nè post.... qualcuno mi helpa?

    RispondiElimina
    Risposte
    1. Se hai problemi nel cercare il codice leggi qui
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Se invece il codice lo trovi ma non hai nel tuo template né .post { né .post-body { allora incollami l'URL del tuo blog e vedo quello che posso fare
      @#

      Elimina
  26. Io vorrei inserire la classica cornice alle immagini, ma nel modello che ho scelto per il mio blog non ci sono. C'è un codice?

    RispondiElimina
    Risposte
    1. Vai su Modello > Personalizza > Avanzato > Aggiungi CSS e prova a incollare questo codice
      .post-body img { border: 2px solid #000000;
      background: #f2f2f2;
      padding: 2px;
      }
      Quindi applica al blog. Alternativamente puoi incollare il codice nel modello subito prima di questa riga
      ]]></b:skin>

      Puoi ovviamente modificare i parametri dei colori e dello stile del bordo
      http://www.ideepercomputeredinternet.com/2013/01/codici-colori-trasparenza.html
      http://www.ideepercomputeredinternet.com/2011/01/come-modificare-gli-stili-i-colori-e-le.html
      @#

      Elimina
  27. Infinite grazie! Quelle cornici erano proprio bruttine!

    RispondiElimina
  28. Sono consapevole di riesumare un post vecchiotto, ma tentar non nuoce...

    Ho anch'io il problema dell'ombra perenne in tutte le immagini inserite, ma nel codice HTML del Modello che ho scelto (Semplice) non figura né la classe ".post" né la classe ".post-body".
    Suggerimenti?

    RispondiElimina
    Risposte
    1. Qualche classe ci dovrà pur essere :)
      Ho l'impressione che forse non sai cercare bene il codice
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      Nel tuo modello devi cliccare sulla freccetta posta a sinistra di b:skin intorno alla riga 13-16 per aprire tutto il CSS
      @#
      @#

      Elimina
  29. Tutto risolto. Grazie mille!
    L'errore (da idiota) che facevo era quello di cercare le righe di codice nella pagina anziché nel riquadro del codice HTML.

    Grazie ancora, soprattutto per la tempestività della risposta.
    Ti sei guadagnato un lettore. :D

    RispondiElimina
  30. Grazie!! sono riuscita a levare il fastidioso bordo dalle foto del mio blog, sei un mito!!!

    RispondiElimina
  31. ciao ernesto, purtroppo anche io visualizzo queste maledettissime cornici, ho provato ad inserire entrambi i codici, ma niente visualizzo comunque da cosa può dipendere?

    RispondiElimina
    Risposte
    1. Dipende dal fatto che nel tuo modello ci sono delle classi di stile diverse da quelle considerate in questo post cioè

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img

      Dovresti andare su Modello -> Modifica HTML e verificare che CSS ci siano per le immagini per poi sostituirli o eventualmente aggiungerli al codice separati da virgole. I CSS per le immagini hanno img prima della prima parentesi graffa
      @#

      Elimina
    2. si il mio blog è madeinbottega, ho provato a sostituire il codice che mi hai indicato ma niente da fare, vedo comunque le cornici intorno alle foto :-(

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.