Come aggiungere delle didascalie originali alle foto in Blogger.

Come inserire una didasalia originale in una immagine con uno sfondo colorato trasparente e come inserire una immagine con didascalia in un riquadro con sfondo colorato.

Blogger ci dà la possibilità di aggiungere, oltre ai tag Title e Alt che servono per questioni SEO, anche una descrizione della immagine che pubblichiamo tramite il suo Editor. Dopo aver aggiunto la foto al post basta cliccarci sopra per selezionarla e andare su Aggiungi didascalia. 

Questa descrizione della foto è piuttosto misera anche se può essere in qualche misura personalizzata. Si può anche visualizzare un testo sopra alla foto al passaggio del cursore con un opportuno CSS inserito nel template o nel post. In questo articolo voglio mostrare come si possa inserire una didascalia in una immagine scegliendo il colore del testo e quello dello sfondo che sarà trasparente. Si potrà anche fare in modo che sia sempre visibile o che compaia solo al passaggio del mouse e inoltre si potrà anche inserire la foto con didascalia in un riquadro più grande.

DIDASCALIA FISSA

Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> quindi subito sopra si incolla

 

.descrizione1 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione1 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione1::before {
content: attr(title);
position: absolute;
background: rgba(255, 240, 0, 0.4); /* Colore dello sfondo */
color: #111; /* Colore de, testo */
font-size: 16px; /* Dimensione caratteri */
font-weight:bold; /* Grassetto */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}

Si salva il modello. Quando si vuole pubblicare una foto con la didascalia basterà andare su HTML e incollare un codice come questo

<div style="width:400px; padding:10px; margin:0 auto;"><div class='descrizione1' title='Digitare la didascalia'><img src='URL della immagine'/></div></div>

dove si deve inserire la didascalia e l'indirizzo della immagine. Il risultato sarà il seguente

Il codice del colore di sfondo è in RGB invece che in HEX per poter inserire la trasparenza. Nel codice proposto la trasparenza è stata settata a 0.4 e può essere scelta tra 0.1 (trasparenza massima) e 0.9 (trasparenza minima).

 

DIDASCALIA AL PASSAGGIO DEL MOUSE

 

Se vogliamo che la didascalia si veda solo al passaggio del cursore si deve incollare nel modello sempre nello stesso punto questo nuovo codice

.descrizione2 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione2 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione2::before {
content: attr(title);
position: absolute;
background: rgba(8, 242,236, 0.4);
color: #000;
font-size: 16px;
font-weight:bold;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.descrizione2:hover:before {
opacity:1;
filter:alpha(opacity=100);
}

Dopo aver salvato il modello si potrà incollare un codice appropriato con una transizione che durerà mezzo secondo. La didascalia si vedrà solo quando il mouse passa sopra all'immagine

Il codice da utilizzare nei post in questo caso sarà il seguente

<div style="width:400px; padding:10px; margin:0 auto;"><div class='descrizione2' title='Inserire la didascalia'><img src='URL_IMMAGINE'/></div></div>

dove oltre che inserire la didascalia va incollato l'URL della immagine caricata su Google+ e va settata la sua larghezza.

IMMAGINE CON DIDASCALIA IN UN RIQUADRO

 

Si può anche andare oltre e inserire per esempio una immagine con didascalia all'interno di un riquadro con una descrizione ancora più approfondita. Può essere un modo originale per mettere in evidenza delle immagini che ritenete siano particolarmente rilevanti. 

In questo caso il codice da usare e da incollare su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> sarà il seguente

.descrizione3 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione3 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione3::before {
content: attr(title);
position: absolute;
background: rgba(0, 255, 200, 0.4); /* Colore dello sfondo */
color: #000; /* Colore dl testo */
font-size: 16px; /* Dimensione del testo */
font-weight:bold;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
.testo_immagine{
max-width:650px; /* Larghezza riquadro */
padding:8px;
background:#fec; /* Colore dello sfondo riquadro */
margin:0 auto;
border-radius:14px; /* Raggio arrotondamento */
text-align:justify
}

Si salva il modello e il codice da usare nel post avrà questa struttura

<div class="testo_immagine">
<div style="width:400px; padding:10px;clear: left; float: left; margin:0 auto;"><div class='descrizione3' title='Testo della didascalia'><img src='URL_IMMAGINE'/></div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit....  Testo da visualizzare nel riquadro ...</div>

Volendo si possono incollare tutti e tre i codici e utilizzare la classe che si desidera per inserire la didascalia in quella particolare immagine. Volendo si può anche evitare di modificare il modello nel caso si volesse usare questa personalizzazione in un numero limitato di pagine. Basterà incollare il codice tra <style> e </style> e inserirlo nel post subito prima di quello con il <div>. Chi non ama cercare le righe nel modello può incollare il codice su Modifica > Personalizza > Avanzato > Aggiungi CSS. Concludo ricordando che in quest'ultimo codice sostituendo clear: left; float: left; con clear: right; float: right; l'immagine sarà visualizzata sulla destra del riquadro in questo modo