Immagine di anteprima del post su Blogger, come caspita si fa?!

Son passati solo due giorni da quando ho deciso di provare la piattaforma Blogger, giusto per curiosità, senza l'idea di iniziare veramente un mio blog, e invece eccomi qua a scrivere il mio primo post, un mini tutorial su...Blogger!?...

Uno dei punti forti di questa piattaforma è sicuramente la personalizzazione, non pensavo di avere così tanta libertà di manovra, tra CSS, HTML e widget si può fare quasi tutto direi.
Ho faticato però ad implementare una cosa per me fondamentale in un blog, cioè proprio l'immagine di copertina del post.

La soluzione più gettonata nelle guide sparse per la rete è quella di usare il Tag data:post.thumbnailUrl, ma questo metodo vi restituisce un'anteprima da 72x72 px, un francobollo praticamente. Molti scansano l'ostacolo grazie al JavaScript ma io cercavo una soluzione più pulita diciamo, ed ecco che scopro un altro magico Tag, il data:post.firstImageUrl che essenzialmente copia la prima immagine del post dove più mi piace.

Con uno slancio di iniziativa sostituisco brutalmente quest'ultimo tag nel solito codice che circola per la rete e come per magia mi ritrovo la prima immagine del mio post in copertina in home page.

Beh tante grazie, ora ho due immagini uguali in cima al mio post -.-'

Aspetta non è finita, occorre una spruzzata di CSS per aggiustare il tutto, ma guardiamo un attimo il codice:

<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<div>
<b:if cond="data:post.firstImageUrl">
<a expr:href="data:post.url" href="http://www.blogger.com/null">
    <img class="post-thumbnail" expr:alt="data:post.title" expr:src="data:post.firstImageUrl" />
  </a>
</b:if>

<div class="snip">
<data:post .body=""></data:post></div>
</div>
<b:else>
<data:post .body="">
</data:post></b:else></b:if>
<b:else>
<data:post .body="">
</data:post></b:else></b:if>

Tutto questo va inserito nell'editor HTML sostituendo la stringa <data:post.body/>.

Ma ci sono tre di quelle stringhe, sostituisco tutte?!

Ecco questa è una cosa che nessun tutorial menziona non so perchè, comunque cercando (Ctrl-F) nel codice quella stringa, sostituite la seconda che trovate, oppure cliccate su "Vai al Widget" poi su "Blog1" e quindi espandete il codice in corrispondenza della linea <b:includable id='post' var='post'> , sostituite appena trovate il tag cercato.
Benissimo, ora manca solo da aggiungere poche righe nell'editor CSS, questa volta dove più vi piace ^_^

div.snip img {display: none;}
.post-body .separator:first-child img {display: none}
img.post-thumbnail {}

Finito, ora avrete la prima immagine che inserite in copertina, cliccabile come il titolo ma non visibile una volta entrati nel post per intero. Potrete scegliere la dimensione tra quelle proposte "piccola, media, grande, extra e dim. originale" e allinearla come volete, personalizzare lo stile aggiungendo un po' di CSS in "img.post-thumbnail" che ho lasciato vuoto nel codice sopra.

Questa è la soluzione che ho trovato più versatile senza dover aggiungere tag e codice manualmente ogni volta che si crea un nuovo post, fatemi sapere cosa ne pensate, alla prossima!