Post in forma sintetica su Blogger: la mia versione senza script

Ho sempre pensato di presentare nella homepage del mio blog gli articoli in forma sintetica seguendo i due post di Tenebrae (versione manuale e automatica) ma non mi andava di mettere mano all'html dei post che avevo già pubblicato né tanto meno di aggiungere altri script al blog (che già ne ha troppi).

Qualche mese fa ho anche pubblicato il post su come realizzare i Post espandibili su Blogger; l'unica differenza con i due metodi presentati da Tenebrae stava nel fatto che cliccando su "Leggi tutto..." il resto del post veniva visualizzato senza aprire una nuova pagina ma semplicemente rendendo visibile quella parte di post nascosta. Ovviamente sempre grazie ad uno script.

Da oggi, come potete vedere, nella homepage del mio blog i post sono in forma sintetica e la soluzione che ho trovato non utilizza script...

Su alcuni blog ho letto anche che Blogger ha introdotto da poco la possibilità di utilizzare i post espandibili grazie al nuovo editor; io l'ho provato sul mio blog di prova e preferisco utilizzare l'editor classico.

Vediamo insieme come realizzare la mia soluzione senza script!

Andate in Blogger - Layout - Modifica HTML e cliccate poi su Espandi i modelli widget. Trovate la riga di codice:

<p><data:post.body/></p>

e sostituitela con

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='height: 300px; overflow: hidden;'><data:post.body/></div>
<span class='readmore' style='margin-top: 15px; margin-left: 380px'><a expr:href='data:post.url'> Leggi tutto...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

In questa porzione di codice potete personalizzare il valore 300px, che rappresenta l'altezza della porzione di post che volete mostrare nell'homepage, e la dicitura Leggi tutto..., per il link che consente di visualizzare il resto nel post.

Potete anche scegliere uno style per la scritta Leggi tutto... da inserire nel css del blog o sostituirla con un'immagine o un pulsante.

Nel mio blog il css per abbellire il Leggi tutto... è il seguente:

.readmore a {
color: #9B0021;
font-weight: bold;
font-size: 10px;
text-decoration: none;
padding: 5px;
}
.readmore a:hover {
color: #F00036;
}

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.