Come creare riquadri per evidenziare contenuti in un blog.

Come creare delle schede o dei riquadri con i tag CSS e HTML per mostrare in modo più accattivante e evidente dei contenuti particolari del blog come per esempio gli ingredienti di una ricetta.

Più di quattro e mezzo anni fa pubblicai un post per dare una idea agli amministratori di blog di cucina su come creare delle schede esteticamente originali che racchiudessero le informazioni di base della ricetta come gli Ingredienti. A fronte di un commento ricevuto ieri ho pensato di riprendere l'articolo cercando di rendere il codice più semplice ma anche più personalizzabile.

L'esempio del contenuto è riferito a un blog di ricette ma la struttura della scheda può essere usata anche per altre tipologie di siti quali quelli che si occupano di recensioni cinematografiche e televisive. Nel nuovo riquadro che vado a proporre vengono inserite due immagini. Una grande e una piccola in stile icona. Riferendomi sempre al blog di ricette l'immagine grande può essere la foto del piatto realizzato mentre l'icona può rappresentare la tipologia di ricetta (primo piatto, secondo piatto, dessert, dolce, ecc).

Oltre alle immagini possono essere personalizzati anche molti altri parametri. Il codice del post di 4 anni fa portava a questo risultato in stile minimalista

Il nuovo codice come quello vecchio non utilizza dei tag specifici di Blogger quindi può essere usato anche nelle altre piattaforme o in una pagina generica HTML.  Ecco un esempio 

Cinghiale in bianco

Ingredienti

• 1 Kg di cinghiale circa
• ginepro
• alloro
• chiodi di garofano
• olio
• aglio
• dado per brodo
• vino bianco.

Procedura e preparazione:

1. Tagliare la carne a pezzi e metterla in infusione con il vino assieme mezza quantità degli odori sminuzzati (salvia, rosmarino, aglio, ginepro, granelli di pepe, alloro e aceto).
2. Lasciar riposare per almeno 12 ore in frigorifero.
3. Fare un battuto con gli odori rimasti e soffriggere in olio extravergine d’oliva per 10 minuti.
4. Mettere la carne (tolta dalla marinatura e asciugata) nel soffritto a fuoco vivace; filtrare il liquido di marinatura, scaldarlo, aggiungerlo alla carne e cuocere a fuoco lento per un quarto d'ora.
5. Aggiungere opzionalmente la polpa di pomodoro, salare, pepare e cuocere per un'ora o più.

Il codice utilizzato ha la seguente struttura

<fieldset style="border: #A60 3px dotted; padding:5px; width: 600px; background: #ffffff;"><legend><img style='padding:5px;' src="URL-ICONA" width="50" height="33" /><span style="position:relative; top:-12px; margin-right:10px; font-size:20px; font-weight:700; color:#03A;">Nome Ricetta</legend> <p style='font-size:16px; font-weight:700; padding-left:10px; color:#03A;'>Ingredienti<ul><a style="float: right;"><img border="0" src="URL-IMMAGINE-PIATTO" width="200" height="132" /></a> <li>Ingrediente 1 </li> <li>Ingrediente 2</li> <li>Ingrediente 3 </li> <li>Ingrediente 4 </li> <li>Ingrediente 5 </li> <li>Ingrediente 6 </li> <li>Ingrediente 7</li> <li>Ingrediente 8. </li> </ul> <p  style='font-size:16px; font-weight:700; padding-left:10px; color:#03A;'>Procedura e preparazione:</p>
<div style='text-align:justify; padding-right:10px;'>
<ol>
<li>Preparazione 1.</li>
<li>Preparazione 2.</li>
<li>Preparazione 3. </li>
<li>Preparazione 4.</li>
</ol>
</div>
</fieldset>

PERSONALIZZAZIONE TAG FIELDSET

Vanno inseriti i link diretti alle immagini della icona e della immagine principale. Il bordo del riquadro può essere a linea unita o anche tratteggiata o punteggiata. Basterà modificare lo stile del bordo tramite i CSS. Oltre ai codici dei colori sono importanti anche i parametri che riguardano la larghezza del riquadro (600 pixel) e la dimensione dei caratteri dei titoli (font-size:16px).  Il tag text-align:justify serve per giustificare il testo e allinearlo anche a destra. Naturalmente il codice precedente va incollato in un post o in una pagina statica in Modalità HTML.

Coloro che avessero dei problemi nella modifica e personalizzazione del codice possono consultare il mio ebook gratuito Guida all'HTML e al CSS.