Un template DIVerso per un articolo di Blogger

Il template del mio blog prevede per la colonna che contiene gli articoli, circa 530 pixel di larghezza, solitamente sufficienti. Potrebbe però capitare di aver bisogno di una maggior larghezza: cosa fare?
Altre piattaforme, tipo Wordpress, permettono di scegliere un template diverso da quello standard per un dato post, così da occupare tutto lo spazio disponibile nel corpo del blog, senza sacrificarne per le colonne laterali. Questo non è possibile in Blogger, per lo meno non nella maggioranza dei template, come non anche in quello utilizzato per questo blog.

Potremmo cambiare template o modificare la larghezza della colonna con gli articoli, ma questa modifica andrebbe ad impattare anche su tutti gli altri post e magari non vogliamo assolutamente che questo accada.

Quando inseriamo un'immagine in Blogger utilizzando l'editor online, le immagini vengo incluse in una sezione, delimitata da tua tag DIV e l'immagine viene allineata a sinistra e dimensionata tramite CSS:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://blablabla.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://blablabla.jpg" /></a></div>

Possiamo utilizzare nello stesso modo delle istruzioni in CSS per ottenere una sezione più larga che contenga il corpo del nostro articolo.

Fortunatamente la struttura del template di Blogger ci permette di farlo senza troppe complicazioni

<div style="position: relative;">
<div style="background-color: rgba(255, 160, 32, 0.8); border: 2px solid green; height: 520px; left: -150px; overflow: auto; padding: 5px; position: absolute; top: 10px; width: 800px; z-index: 2;">
Il testo che vogliamo inserire
etc
etc
</div></div>

Un primo div con position: relative ci serve per posizionare la successiva sezione a partire dalla prima parte, quella che nel mio caso contiene l'inizio dell'articolo che va nella Home Page del blog ed un bannerino pubblicitario.
La successiva istruzione position:absolute farà riferimento, come posizione, al precedente contenitore DIV.
Dopo i due DIV annidati, ho utilizzato un DIV vuoto per distanziare gli elementi successivi, in quanto il DIV con posizione assoluta si va a collocare al di fuori del flusso degli altri elementi della pagina e si sovrapporrebbe ad elementi che non vogliamo siano coperti, tipo i pulsanti per la condivisione etc.

<div style="height: 540px;">
</div>
Infine la presenza dell'istruzione overflow:auto mi permette di non dover tener conto delle dimensioni precise del testo contenuto nella sezione più larga

Nota
Il presente articolo non ha la pretesa di voler essere un esempio di stile o di codice ottimizzato.
Lo sfondo trasparente è stato realizzato utilizzando istruzioni compatibili con CSS3. Inoltre l'effetto è stato testato solo sull'ultima versione di Chrome. Dovrebbe funzionare senza sorprese sulle versione recenti degli altri browser mentre potrebbe dare effetti non voluti su browser più vecchi. Non sono inoltre del tutto sicuro che funzioni su template diversi dal quello del mio blog.