Blogger Book

Una didascalia è una breve descrizione che puoi aggiungere alle immagini del tuo blog. Questa descrizione fornisce informazioni accurate sulla foto e ti aiuta a comprenderla.
Ad esempio, quando aggiungi la foto di una persona, puoi includere una didascalia che ne indichi il nome, la posizione, il risultato o un evento rilevante. In questo modo, chiunque veda la foto saprà chi è la persona o cosa ha fatto.

Vedi altro

l

l

Vedi altro

l

l

Da un punto di vista SEO, queste descrizioni ci aiutano anche a posizionare le immagini nei motori di ricerca, poiché queste informazioni sono utili per i crawler.
Blogger ci offre la possibilità di aggiungere una didascalia quando carichiamo l'immagine, ma il problema è che il risultato è molto semplice e poco accattivante, tanto da passare quasi inosservato.

Cuccioli in giardino

Quello che faremo è aggiungere una didascalia alle immagini , ma a differenza di una didascalia tradizionale, questa verrà posizionata sopra l'immagine stessa e aggiungeremo uno sfondo semitrasparente, in modo che il risultato sia simile a questo:

Se vuoi una didascalia come questa, vai su Modello | Modifica HTML e prima di ]]></b:skin> aggiungi questi stili:

.caption {
padding: 0;
width: 100%;
position:relative;
}
.caption img {
width: 100%;
height: self;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200; /* Colore di sfondo */
background: rgba(234, 242, 0, 0.6); /* Colore di sfondo in RGBA */
color: #000; /* Colore del testo */
font-size: 14px; /* Dimensione del testo */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}

Vedi altro

l

l

Ora, ogni volta che vuoi aggiungere una didascalia alle tue immagini, usa questo codice:

Vedi altro

l

l

<div style=" width:400px; padding:10px; margin:0 auto;"><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

Qui vedrai dove aggiungere la descrizione della foto e l'URL dell'immagine.
La dimensione dell'immagine viene modificata modificando il testo in grassetto.
Il primo codice che abbiamo aggiunto contiene gli stili per la didascalia. Vedrai che il colore di sfondo appare due volte, prima in codice esadecimale e poi in RGBA. Questo perché RGBA ci permette di definire la trasparenza; in questo caso, è 0,6. Tuttavia, se il browser (Internet Explorer, come al solito) non supporta questo stile, utilizzerà il codice esadecimale, ma senza la trasparenza. Nella sezione Colori , puoi trovare il codice sia in esadecimale che in RGB.

Vedi altro

l

l

Per impostazione predefinita, l'immagine sarà centrata, ma se si desidera allinearla a sinistra in modo che sia circondata dal testo, utilizzare questo codice:

<div style="width:400px; padding:10px; clear: left; float: left; "><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

In realtà è la stessa cosa: abbiamo solo aggiunto un float a sinistra e rimosso il margine. Il risultato è il seguente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Mecenate a gravida ligula. Mai sed malesuada leo, et lacinia diam. Nullam bibendum just libero, a varius mi suscipit vel. Mecenate commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Intero a erat ornare, molestie lorem sed, volutpat arcu.

Possiamo fare lo stesso se vogliamo allineare l'immagine a destra .

<div style="width:400px; padding:10px; clear: right; float: right; "><div class='caption' title=' Aggiungi didascalia qui '><img src=' URL immagine '/></div></div>

E apparirà così:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Mecenate a gravida ligula. Mai sed malesuada leo, et lacinia diam. Nullam bibendum just libero, a varius mi suscipit vel. Mecenate commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Intero a erat ornare, molestie lorem sed, volutpat arcu.

E se volessimo che la didascalia appaia solo quando il cursore passa sopra l'immagine ?

In tal caso, rimuoviamo gli stili che abbiamo applicato e aggiungiamo invece questi:

.caption {
padding: 0;
width: 100%;
position:relative;
}
.caption img {
width: 100%;
height: self;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200;
background: rgba(234, 242, 0, 0.6);
color: #000;
font-size: 14px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: tutti 0.4s lineari;
-moz-transition: tutti 0.4s lineari;
-o-transition: tutti 0.4s lineari;
-ms-transition: tutti 0.4s lineari;
transizione: tutti 0,4s lineari;
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}

In entrambi i casi, trovo il risultato molto più attraente del layout nativo di Blogger (anche se i gusti variano) e possiamo anche personalizzarlo a nostro piacimento cambiando il colore dello sfondo, le dimensioni, il tipo di testo e gli stili extra che possono essere aggiunti in base alla creatività di ognuno.

fonte