Pubblicato il 25/05/12e aggiornato il

Come togliere il bordo alle immagini del blog.

Come eliminare il bordo dalle immagini o foto pubblicate nei post di un blog su Blogger.
In alcuni blog le immagini vengono postate automaticamente insieme a un bordo di dimensioni e colore spesso personalizzabili. Si può infatti andare su Modello > Personalizza > Avanzato > Immagini dove si può settare il colore dello sfondo delle immagini, il colore del bordo e quello della didascalia.

Bisogna ricordarsi di andare su Applica al blog in alto a destra per rendere effettive le modifiche. Questo vale per i modelli ufficiali di Blogger mentre per quelli scaricati da internet le cose sono più complicate. Per verificare lo stile con cui vengono pubblicate le immagini andate su Modello > Modifica HTML > Procedi e cercate con F3 .post-body img oppure .post img per i template più vecchi.

Il blocco di codice relativo sarà quello che determinerà l'aspetto delle immagini pubblicate. Ecco uno screenshot dei CSS presenti in un mio blog

css-immagini-bordo

In questo caso le immagini pubblicate avranno un bordo arrotondato. Si potrebbe modificare il codice precedente o al limite eliminarlo completamente per fare in modo di avere le immagini senza nessun bordo. Nel caso scegliate queste opzioni è sempre opportuno andare su Modello > Backup/Ripristino per salvare una copia di sicurezza del template.

In un commento mi è stato chiesto come si potrebbe fare per lasciare la gran parte delle immagini con il bordo ma avere anche la possibilità di pubblicarle senza bordo quando il caso lo richiedesse. Parlo di immagini animate o di foto che si preferisce visualizzare senza cornici aggiuntive. In genere nei modelli ufficiali di Blogger le immagini inserite in dei widget vengono visualizzate di default senza bordo ma ci potrebbero essere dei template in cui questo non accade. 

Per togliere il bordo a determinate immagini bisogna per prima cosa creare una classe di stile apposita che potrebbe essere chiamata "nobordo" 

.post-body img.nobordo {
border:none !important;
padding:0 !important;
}

Andate su Modello > Modifica HTML > Procedi, cercate la riga ]]></b:skin> e incollatelo subito sopra. Se nel vostro template avete il blocco di codice .post img allora sostituite nel codice precedente .post-body con .post. Salvate il modello.

immagine-con-e-senza-bordo

Quando volete pubblicare in un articolo una immagine senza bordo, basterà che andiate in modalità HTML, in Origine se usate Windows Live Writer, e inseriate la foto con questa sintassi

<img class="nobordo" src="INDIRIZZO_IMMAGINE" alt="nome-immagine" title="titolo-immagine" width="300" />

dove si applica la classe "nobordo" alla immagine postata. I tag Title e Alt possono essere scelti a piacere così come anche la dimensione della immagine.




6 commenti :

  1. Ciao non so se sto scrivendo nel posto giusto, io da stamattina ho un problema con la piattaforma di blogger.

    In pratica non riesco più ad inserire immagini nei post, praticamente quando vado su inserisci immagine non si vede più la casella di ricerca del file sul mio pc.

    Da picasa o altro si ma nel modo descrito sopra no, potresti darmi un aiuto a risolvere?...
    Grazie

    RispondiElimina
    Risposte
    1. @ Admin
      Questo mi pare un disservizio di Blogger quindi prova a rivolgerti al Forum per sapere se altri abbiano il tuo stesso problema

      Elimina
    2. Grazie Ernesto, hai l'indirizzo del forum di blogger?

      Elimina
    3. @ Admin
      Caspita mi chiedi anche una cosa che si può trovare in un decimo di secondo su Google? Comunque è qui
      http://productforums.google.com/forum/#!forum/blogger-it

      Elimina
    4. Si hai ragione mi sono espresso male volevo dire se conoscevi il link ad una discussione in merito, comunque hai già fatto tanto ti ringrazio faccio una ricerca io e ti faccio sapere.

      Elimina
    5. Ho risloto grazie l'aiuto del forum, per chi avesse lo stesso problema può caricare le immagini dalla scheda HTML fino a quando il problema non sarà risolto dai tecnici. A quanto pare succede solo con IE9...

      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.