New Blogger: post espandibili con i CSS 16/11/07

Viste le richieste riguardo ai post espandibili con la nuova versione di Blogger, ho deciso di fornire un' alternativa interamente realizzata con (DUE) regole CSS; si tratta dello stesso metodo che utilizzo nel mio blog (che ancora "gira" con la vecchia versione) e che rende possibile inserire il link "continua a leggere" se e solo se lo vogliamo inserire...

» continua

Naturalmente il metodo va adattato alle nuove features di Blogger ma, alla fine, basta capire dove inserire le due regolette ed il gioco è fatto.

Anche in questo caso l' unica difficoltà è quella di trovare le righe giuste del nostro template; entriamo quindi nel nostro Layout (o Modello) e selezioniamo la voce modifica HTML:

Quindi spuntiamo Espandi i modelli widget e scorriamo la pagina fino alla parte che ci interessa evidenziata sotto:

Praticamente dobbiamo inserire le regole nella parte di codice che indica la visualizzazione dei singoli post; il codice da "rintracciare" è questo:

<b:if cond='data:blog.pageType == "item"'>
<p>:<data:post.body/></p>
<b:else/>
<p>:<data:post.body/></p>

Dobbiamo aggiungere qui il nostro stile, in questo modo sarà "valido" solo per la visualizzazione dei singoli post. Questo è il codice da inserire subito sotto la prima riga (semplicemente, andate a capo senza cancellare niente):

<style>
div.fullpost {display:block;}
span.espandi {display:none;}
</style>

Ecco lo screenshot del risultato:

Ora dobbiamo inserire lo stesso codice invertendo i valori; in questo modo la visualizzazione in home e negli archivi escluderà la seconda parte di post e includerà il link "continua". Subito sotto la riga <b:else/> inseriamo il seguente codice:

<style>
div.fullpost {display:none;}
span.espandi {display:block;}
</style>

Bene, abbiamo "rovesciato" i valori delle due classi (espandi e fullpost) e terminato le modifiche del template. Salviamo quindi il modello.

Passiamo adesso alla formattazione; in pratica questo passaggio sarebbe opzionale; potremmo semplicemente scrivere il nostro nuovo post e inserire le due classi "a mano" ma questo richiederebbe ogni volta la stessa operazione, lo può fare tranquillamente Blogger per noi.

Andiamo alla voce Impostazioni e quindi su Formattazione:

Scorriamo la pagina fino all' ultima voce, Modello Post:

Nell' area di testo inserite il seguente codice HTML:

<p>Testo prima parte</p><p><span class="espandi"><a href="http://nomeblog.blogspot.com/2007/06/titolopagina.html#tutto">» continua</a></span></p><div class="fullpost"%gt;<a name="tutto"></a><p>Testo seconda parte</p></div>


Avete terminato; a questo punto avrete il vostro editor pronto per l' utilizzo e formattato, se non vorrete inserire il link "continua" basterà cancellare tutto e scrivere il post normalmente.

Segnalo che dovrete inserire il link dei singoli post manualmente, questo perchè non è possibile inserire i tag di Blogger (e di nessun altro linguaggio server side); poco male, ricordate che Blogger inserisce nell' URL un trattino al posto dello spazio, non inserisce lettere accentate o punteggiatura e che il nome del file è limitato a non più di 30 caratteri (mi pare)... per sicurezza comunque controllate sempre ;)