venerdì 16 maggio 2008

Come visualizzare solo i riassunti dei post nella homepage del proprio blog


I pochi fruitori di questo neonato blog avranno notato una modifica essenziale all'aspetto della homepage...quale? Eccola!
Ebbene sì, quella feature che tanto invidiavo a Wordpress, con un minimo sforzo, la si può avere anche sul nostro amato Blogger.
La definizione precisa dovrebbe essere Expandable Post Summaries e, cercando un po', troverete questa pagina dell'help di Blogger, che però non brilla per chiarezza...
Sarà che non ho mai avuto a che fare con siti internet prima di questa esperienza e che quindi conosco a malapena il significato degli acronimi html e css, ma davvero, utilizzando semplicemente quella risorsa, non credo sarei andato lontano.
Per fortuna la rete è grande e così è stato facile trovare un altro manuale di istruzioni da consultare.
La continuazione di questo articolo è dunque sostanzialmente una traduzione del sito linkato con qualche minima aggiunta (immagini e poco altro) del sottoscritto.

HOW TO
Vediamo al fine come fare; si tratta di modificare il codice html del template aggiungendo una dichiarazione css e di inserire in ciascun post uno specifico tag html...

N.B.:Per tutta la durata dell'articolo "@" sarà il nostro carattere jolly da sostituire con "<" !
Essendo codice html non avrei potuto scriverlo correttamente, altrimenti sarebbe stato interpretato dal browser anzichè scritto a monitor...

1)Dopo aver cliccato su personalizza, andiamo su Layout>Modifica HTML

2)Cliccando su scarica modello faremo una copia di backup del template originale...AZIONE OBBLIGATORIA!!!
3)cerchiamo nel codice la stringa @/head> (potete farlo, se siete su firefox, con il comando cerca: CTRL+F) e inseriamo subito prima questo codice:

@style>
@b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
@b:else/>
span.fullpost {display:none;}
@/b:if>
@/style>


4)Clicchiamo su salva modello e poi spuntiamo la casella Espandi i modelli widgets che trovate in alto a destra nell'immagine precedente.
5)A questo punto, avendo espanso le parti nascoste, troveremo nel template molto più codice di prima; cerchiamo la stringa @data:post.body/> e inseriamo subito dopo questo codice (sostituendo a "read more!" quello che preferite venga visualizzato):

@b:if cond='data:blog.pageType != "item"'>
@a expr:href='data:post.url' target='_blank'>Read more!@/a>
@/b:if>


5b)Se si vuole modificare colore e grandezza del font usato per la scritta "Read More" allora usate questo codice al posto del precedente:

@b:if cond='data:blog.pageType != "item"'>
@span >@a expr:href='data:post.url' target='_blank'>@font size="120" color="red">Read more!@/font>@/a>@/span>
@/b:if>

sostituendo a "120" la dimensione voluta e a "red" il colore preferito

per avere la scritta in grassetto, usiamo questo codice anzichè quello scritto sopra:

@b:if cond='data:blog.pageType != "item"'>
@span style="font-weight:bold;">@a expr:href='data:post.url' target='_blank'>Read more!@/a>@/span>
@/b:if>

se invece vogliamo entrambe le cose (modificare i font e avere la scritta in grassetto) ecco l'ultima variante di codice:

@b:if cond='data:blog.pageType != "item"'>
@span style="font-weight:bold;">@span >@a expr:href='data:post.url' target='_blank'>Read more!@/a>@/span>@/span>
@/b:if>

6)Salviamo il template cliccando su salva modello
7)Abbiamo praticamente finito, si tratta solo di aggiungere ad ogni post la stringa:

@span class="fullpost"> @/span>

Dovremo quindi scrivere la parte del post da inserire nel sunto prima della stringa, mentre la parte restante dovrà essere inserita prima della stringa @/span>


Potremo anche aggiungere questa stringa in Impostazioni>Formattazione alla voce Modello Post per non doverla riscrivere ogni volta.
Provate a giocare con gli a capo prima delle varie parti di codice html per ottenere il layout che più vi piace nella homepage.

L'unica vera fatica di tutta la procedura è rimodificare *tutti* i post a mano per aggiornarli alla novità
---
M

3 commenti:

  1. Porco cane grandissimo non funziona una cippa.. se volessi editare solo un unico post con read more che cosa dovrei fare?

    RispondiElimina
  2. bravissimo complimenti!sulla guida di blogger non si capiva nulla!ora mi metto all'opera!!!

    RispondiElimina
  3. A quanto pare ha funzionato, grazie.

    Un piccolo appunto, questo metodo aggiunge a TUTTI i post presenti sul blog il link Read more! sul fondo, anche se sono post corti che non hannno nulla di nascosto. Decisamente anti-estetico.
    Per evitare ciò basta aggiungere un {span class="fullpost"}{/span"} (sostituite le {} con <> e le " dopo il secondo span non sono un errore, servono) alla fine del post e il Read more! non verrà visualizzato.

    RispondiElimina

commentando accetti implicitamente le regole del blog, leggile!