Pubblicato il 29/10/09 - aggiornato il  | 11 commenti :

Come eliminare il bordo dalle immagini se si utilizza l'editor avanzato di Blogger.

Questo articolo l'ho scritto con l'editor di Blogger invece che con Windows Live Writer in quanto è solo con la prima opzione che si presenta questa situazione che a qualcuno magari non piace. Se inserite un immagine ed il vostro blog ha come stile di default quello di inserimento dei bordi nelle immagini, tutte le vostre foto del blog le avranno.

Nel momento in cui passaste alla modalità HTML vi trovereste, per la foto inserita, di fronte ad un codice simile a questo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>

 dove è presente l'attributo border="0" che però non significa affatto che il bordo non ci sia. Se lo vogliamo togliere dobbiamo effettuare una piccola modifica al codice dell'immagine andando in modalità HTML ed modificando il codice in questo modo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>

E' stata inserita la parte colorata in rosso style="border:none;".
Ripeto che questa personalizzazione vale solo se si usa la versione aggiornata dell'editor di Blogger e non un editor offline come WLW.

Le differenze tra le immagini non sarebbero visibili in questo post in quanto lo stile del blog presuppone immagini senza bordo



11 commenti :

  1. Idem, esattamente ciò che cercavo, agire singolarmente sulle immagini! Grazie!

    RispondiElimina
  2. Ciao Ernesto. Scusa, ma io sono in confusione totale...
    Ho letto attentamente e cercato nel mio modello HTLM, ma non ho capito come devo fare.
    Io vorrei togliere i bordi delle immagini(residuali di varie modifiche e passaggi..), però solo di quelle che sono all'interno di tutti i post, quelle al di fuori di tale "zona" le lascerei. Sempre che sia possibile fare tale cosa.
    In ogni modo, volevo chiederti dove e cosa devo fare nel modello HTML.
    Aggiungo che attualmente i bordi (cornici)sono bianchi, ma sfumati di grigio nella riga esterna.

    E' questo qui il punto?
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 5px;

    background: #fff;

    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }

    .post-body img, .post-body .tr-caption-container {
    padding: 8px;
    }

    .post-body .tr-caption-container {
    color: #333333;
    }

    .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);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }

    Grazie da ora per la disponibilità. Ciao, francesca

    RispondiElimina
    Risposte
    1. @FrancescaCroci
      Il codice che hai postato si riferisce solo alle immagini dei post. Vengono inseriti dei bordi arrotondati di colore #33333. Puoi agire in due modi. Al posto di #333333 metti #FFFFFF e allora i bordi diventeranno trasparenti. Al limite, dopo aver salvato il modello , puoi provare a eliminare tutto questo codice per vedere quello che succede. Ci sono molte possibilità che tu possa risolvere.

      Elimina
    2. Grazie infinite Ernesto!!!
      Sei veramente gentile... una mosca rara ormai.. :)
      Ora ci provo.
      Grazie grazie,
      bacione,
      Francesca

      Elimina
    3. Ciao Ernesto.
      Allora ho fatto dei tentativi..
      Alla fine ho tolto l'intero codice sopra, come avevi detto tu. Provando a mettere #ffffff non mi era cambiato nulla. Ho pensato che il bordo immagini che volevo togliere fosse quello da 8px, e ho provato a modificare quello, poi ho tentato eliminandolo, ma nulla....rimaneva tutto come prima, cioè: o tutti i bordi delle foto della pagina con effetto ombra, o nessuno. Tieni conto che avevo ben tre tipi differenti di cornici: una da 5px con bordo sfumato ( tipo effetto ombreggiatura), una da 0px con stesso effetto, e uno da 8px (quello che ho supposto fosse delle foto dei post e che era l'unico che volevo eliminare) con lo stesso effetto.
      Devo dire che in ogni caso mi piace più così, è più sobrio :) ... quindi hugs e alla prossima... ;), f

      Elimina
    4. se invece di questo
      .post-body img, .post-body .tr-caption-container {
      padding: 8px;
      }
      scrivi questo
      .post-body img, .post-body .tr-caption-container {
      padding: 0px;
      }
      i bordi si tolgono, altri metodi non hanno funzionato.

      Elimina
  3. Ciao Ernesto, ho un blog con blogger modello simple, ho provato in tutti i modi per eliminare il bordo immagine sia nei post sia nelle immagini caricate nel layout, ho provato ad inserire "border 0" e niente, da designer modelli ho cambiato il bordo e lo sfondo immagine da bianco a trasp e niente, ho agito direttamente sull'html dell'immagine nei post e niente, infine ho agito anche sull'html del blog inserendo img {
    border: none !important;
    }
    sopra la riga ]]>

    e niente..... questi dannati bordi rimangono dove sono, come è possibile?
    possibile che non ci sia soluzione??

    RispondiElimina
  4. @stefanovinci
    Leggi il commento 4 con le risposte 4a 4b e 4c

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy