Come arrotondare i bordi delle foto inserite in un post del blog di Blogger

Per modificare la visualizzazione degli angoli delle immagini postate negli articoli su un blog di Blogspot e cambiare i bordi rettangolari delle foto per farli diventare tondi è possibile utilizzare uno specifico foglio di stile CSS da aggiungere da "Modello">"Personalizza" nel menu "Avanzato">"Aggiungi CSS" del Designer di Modelli di Blogger seguendo la specifica procedura per aggiungere CSS in Blogger.
Il CSS da inserire per rendere tondeggianti gli angoli delle foto nei post di Blogger è il seguente:

.post-body img, .post-body .tr-caption-container { 
border-radius: 20px;
}

Per aumentare o diminuire la parte rotonda dei bordi arrotondati delle immagini nei post di Blogger è possibile variare il valore in pixel (al momento 20px) presente nel CSS.
E' possibile visualizzare un esempio di un blog su Blogger contenente nei post immagini con i bordi arrotondati al seguente link: viaggiareconilweb.com

Come risolvere problemi di layout nei template delle Visualizzazioni Dinamiche di Blogger

Per superare alcuni inconvenienti relativi alla corretta visualizzazione nel browser web  degli elementi del Layout e della grafica dei modelli delle Visualizzazioni Dinamiche di Blogger al momento può essere utile intervenire direttamente con una modifica HTML nel codice del template di Blogger.
La modifica prevede, dopo aver individuato con una scorciatoia da tastiera specifica per Blogspot, lo script:

<script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>

la sostituzione nel codice del valore 0 con il valore 800 in modo da vedere correttamente, in attesa di una risoluzione definitiva di questo tipo di inconveniente, il blog di Blogspot che utilizza come modello un template delle Visualizzazioni Dinamiche di Blogger,

Come aggiungere gli attributi ALT e TITLE alle immagini inserite in un post di Blogger

Per far conoscere ancor meglio a Google il contenuto delle foto postate in un blog di Blogger ed ottimizzare così in ottica SEO le immagini presenti in un post  è possibile aggiungere al tag IMG delle foto l'attributo ALT (alternativo) e l'attributo TITLE da mettere direttamente dalla barra degli strumenti che si visualizza dopo aver caricato una foto nel post dall'apposito strumento di inserimento immagini dell'editor di Blogger.

Per aggiungere quindi al tag IMG dell'immagine con l'attributo ALT un testo alternativo che descrive il contenuto dell'immagine e con l'attributo TITLE ulteriori informazioni sull'immagine (che si visualizzano in un tooltip passando con il mouse sopra l'immagine) possiamo cliccare sul link "Proprietà" sull'icona a forma di ingranaggio "Cambia" della barra per aprire la finestra che consente l'inserimento degli attributi ALT e TITLE alle foto di Blogspot direttamente con l'editor in modalità "Scrivi" senza dover aggiungere gli attributi in modo manuale in modalità HTML

In "Proprietà Immagine" "Modifica Immagine" bisognerà riempire gli appositi campi per l'attributo ALT lo spazio "Testo alternativo" e per l'attributo TITLE il campo "Testo del titolo" con i contenuti testuali che servono per descrivere in modo più completo e diretto al motore di ricerca di Google cosa rappresenta l'immagine inserita nel post di Blogger.

Come mettere un link in una immagine all’interno di un post di Blogger

Come visualizzare sul PC la versione per smartphone di un blog su Blogger

Per vedere sullo schermo del PC o del notebook la versione per dispositivi mobili di un blog di Blogger (attivabile nella Bacheca di Blogger da "Impostazioni">"Modello">"Cellulare")  così come la vedono i lettori che si collegano al blog con uno smartphone è possibile aggiungere all'URL del blog di Blogspot (o del dominio personalizzato) la query   /?m=1

Per controllare quindi la versione per smartphone sarà necessario inserire l'URL nella barra degli indirizzi del browser che si utilizza, per i blog di Blogger con dominio personalizzati in questa forma:
 http://www.viaggiareconilweb.com/?m=1
oppure per i blog di Blogspot in questo modo:
http://fabriziocastelli.blogspot.com/?m=1

! Attenzione !

Al momento disattivare la versione per dispositivi mobili di Blogger disabilita contemporaneamente le funzionalità "Avanzate" del Designer di Modelli che non potranno più essere utilizzate se non ripartendo da una versione senza personalizzazioni di un template di Blogger.

Come centrare il contenuto del gadget Statistiche di Blogger con un CSS

Per posizionare al centro il contenuto del gadget contatore delle "Statistiche" in un blog di Blogger è possibile, seguendo la procedura per inserire un CSS dal Designer di Modelli, utilizzare il seguente foglio di stile CSS:

#Stats1{ 
text-align:center; 
}

L'inserimento del CSS consente di mettere al centro del gadget, posizionato nella sidebar o nel footer, i dati relativi alle visualizzazioni totali e il grafico delle visite del blog presente nel modulo.

Come creare GIF animate dalle proprie foto direttamente online

Per realizzare GIF animate da immagini o foto conservate sul proprio PC , da URL già online o da Webcam è possibile utilizzare direttamente su Internet il servizio Picasion GIF Maker
L'applicazione web Picasion consente infatti di caricare tramite il tasto "Scegli file" le foto dal proprio PC (è possibile aumentare il numero delle immagini da inserire nella GIF animata da "Add one more picture") che, dopo aver impostato la dimensione (Size) e la velocità (Speed),verranno mostrate in sequenza nella GIF animata da creare.
Dopo aver cliccato su "Create Animation" nella schermata successiva si potrà ottenere il link diretto alla GIF, il codice HTML da utilizzare per incorporare l'immagine creata nel blog di Blogger (tramite il gadget HTML/Javascript) o di Wordpress (in un widget "Testo")  il BBcode da utilizzare per i Forum e, da "Save this animation" sarà possibile scaricare la Gif animata sul proprio computer.

Come centrare la didascalia in un gadget FOTO di Blogger

Per posizionare al centro il testo utilizzato come "Didascalia" sotto ad una immagine inserita nel layout del blog tramite il gadget "Foto"di Blogger (come il banner di Prove di blogger presente nella colonna laterale di Web per blog ) è possibile inserire il testo nell'apposito campo "Didascalia" della finestra di configurazione del gadget Foto in questa forma:

<div style="text-align:center;">Testo della didascalia</div>

Nello stesso banner per centrare la foto rispetto alla colonna che la ospita nel blog di Blogger è stata utilizzata questa soluzione:

Come centrare l'immagine inserita in un gadget FOTO di Blogger con un CSS

Per centrare i titoli dei gadget (nell'esempio: Realizzato con) presenti nella sidebar di Blogspot è possibile utilizzare il seguente procedimento:

Come centrare il titolo dei gadget in un blog di Blogger

Per chi desiderasse aprire il link del gadget "Foto" in una nuova finestra del browser è possibile applicare una modifica direttamente nel codice HTML del blog

Come aprire il link del gadget FOTO in una nuova finestra del browser in un blog di Blogger

Come evidenziare in grassetto le etichette dei post di Blogger

Per visualizzare in grassetto e mettere così in maggior evidenza le etichette presenti nel gadget "Etichette" della sidebar di Blogger è possibile aggiungere, utilizzando la procedura per aggiungere un CSS ,il seguente foglio di stile:


#Label1 {
font-weight: bold;
 }

leggi anche...
Come cambiare il colore delle etichette nella Tag Cloud di Blogger con un CSS dal Designer di Modelli

Come avere le foto di uguale larghezza nei post di Blogger

Per inserire in Blogger le immagini dei post con una larghezza fissa ed uguale in tutti i post è possibile aggiungere dal Designer di Modelli, utilizzando la procedura per aggiungere un CSS ,il seguente foglio di stile CSS:

.post-body img { width: 450px; height: auto;
}

Il valore di larghezza in pixel (450) che imposta in modo automatico le foto del blog può essere eventualmente aumentato o diminuito in base alla dimensione della colonna del post che le contiene.

Come visualizzare le immagini con Lightbox in un blog di Blogger

Per mostrare le foto del blog su Blogger con la visualizzazione Lightbox che permette al lettore ,dopo aver cliccato su una foto,di visualizzare l'immagine in una nuova finestra sovrapposta al blog è possibile selezionare in "Impostazioni">"Post e Commenti" dal menu a tendina alla destra di "Mostra immagini con Lightbox" la voce "SI" e cliccare poi in alto a destra su "Salva Impostazioni".

L'opzione,se il post comprende più immagini, consente di vederle tutte in sequenza ed anche disponibili come miniature nella parte bassa della finestra indipendentemente dal fatto che siano caricate sul blog di Blogspot o inserite da URL esterni o di altri servizi di hosting online per immagini.

(Nella precedente bacheca di Blogger è possibile attivare la funzione Lightbox da "Impostazioni">"Formattazione")