Per aggiungere automaticamente la parola "Foto:" o un'icona (come una emoji ) prima di ogni didascalia senza doverla scrivere manualmente ogni volta nel testo, puoi sfruttare i pseudo-elementi CSS (::before) abbinati alla proprietà content.
1.Apri l'editor HTML del tema:Accesso al codice.
Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.
Verifica: L'editor del codice sorgente del blog risulta aperto.
2.Aggiungi il pseudo-elemento ::before:Codice CSS.
Individua il blocco CSS delle didascalie che avevi inserito in precedenza e aggiornalo aggiungendo la regola ::before per inserire automaticamente il testo o l'icona desiderata:
CSS
.tr-caption, figcaption {
font-size: 14px;
font-family: inherit;
color: var(--text-color, #666666);
text-align: center;
margin-top: 8px;
margin-bottom: 16px;
font-style: italic;
line-height: 1.4;
}
/* Aggiunge automaticamente l'icona e la scritta prima della didascalia */
.tr-caption::before, figcaption::before {
content: " Foto: ";
font-style: normal; /* Riporta il testo normale ed evita che erediti il corsivo */
font-weight: 600; /* Rende la scritta leggermente in grassetto */
margin-right: 4px;
}
Nota: All'interno delle virgolette di content puoi inserire qualsiasi emoji o parola desideri (ad esempio " Immagine: " oppure semplicemente "• " se preferisci un punto elenco stilizzato).
Verifica: Il codice CSS viene inserito correttamente all'interno del foglio di stile senza errori di sintassi.
3.Salva e verifica sul blog:Salvataggio e Test.
Clicca sull'icona del dischetto in basso a destra per salvare le modifiche, quindi apri un articolo del tuo blog per controllare la visualizzazione.
Verifica: Tutte le didascalie delle immagini mostrano ora l'icona e la scritta "Foto:" generate automaticamente all'inizio del testo.
Commenti
Posta un commento