Pubblicato il 18/06/11e aggiornato il

Aggiungere una descrizione con miniatura alle pagine delle etichette di Blogger.

Le pagine delle etichette contengono tutti i post che hanno un determinato tag. Il loro URL generico in Blogger è dato da

http://nome-blog.blogspot.com/search/label/nome-etichetta

e rappresentano la collezione di articoli che trattano lo stesso tema. In alcuni blog tematici queste pagine assumono grande importanza e sono spesso inserite nel menù del blog. Di default, quando si apre una pagina come la precedente, Blogger mostra il messaggio Visualizzazione degli ultimi post con etichetta … che non è proprio il massimo dell'estetica. Vediamo come inserire e personalizzare un messaggio con miniatura per ciascun tag che abbia un aspetto simile a questo

messaggio di benvenuto per ciascuna etichetta

  dove il testo e la immagine si riferisce alla etichetta musica. Per avere una idea di come funzioni accedete alla

e alla fine del post o nell'Elenco di Link in alto a destra cliccate su Musica, Sport o Televisione. In tutti e tre i casi si vedranno dei messaggi personalizzati all'inizio della pagina. Questo testo non sarà visibile se invece si selezionerà un'altra etichetta. Si potrà quindi utilizzare questo metodo solo per un certo numero di tag che riteniamo particolarmente importanti. Andate su Design > Modifica HTML e salvate il modello completo. Mettete la spunta a espandi modelli widget e cercate la riga

<b:include data='top' name='status-message'/>

Immediatamente sotto, incollate un codice simile a quello che ho postato come esempio su Google Documenti

L'esempio riguarda tre etichette ma ovviamente possono essere anche molto di più. Non c'è problema di appesantimento del blog perché sono presenti i tag condizionali che fanno caricare il messaggio solo nella pagina relativa. L'URL delle singole pagine è colorato di rosso, l'indirizzo della immagine di 64x64 pixel è colorato di blu mentre il messaggio di ingresso è colorato di viola. Il testo può anche essere formattato inserendo grassetto (<b>), corsivo (<i>), salti di riga (<br/>) e link (<a href="URL">Testo ancoraggio</a>). La sintassi da seguire per ciascuna pagina di etichetta è la seguente

<b:if cond='data:blog.url == &quot;http://nome-blog.blogspot.com/search/label/nome-etichetta&quot;'>
<div id='MsgEtichetta'>
<img src='URL_IMMAGINE' style='float: left; border:0; margin: 0px 5px 10px 0px;'/>
... Testo messaggio ...
</div>
</b:if>

Dove i numeri dopo margin rappresentano la distanza nelle quattro direzioni tra l'immagine e i bordi. Si inizia con la parte alta quindi quella a destra e così via in senso orario. Gli attributi dopo style accanto all'URL della immagine servono per lo stile di quest'ultima. Nel codice proposto viene inserita a sinistra, senza bordo e con i margini dati dai quattro valori numerici. Adesso bisogna cercare la riga ]]></b:skin> e, immediatamente sopra, incollare il blocco di codice CSS

.status-msg-wrap {visibility:hidden;display:none;}
#MsgEtichetta {
background:#FDBCB7; /* Colore dello sfondo */
color:#003366; /* Colore del testo */
padding:15px;
margin:4px 4px 15px 4px;
}

Si salva il modello. La prima riga serve per nascondere il messaggio che appare sempre all'inizio di tutte le pagine delle etichette di Blogger. I valori in rosso possono essere personalizzati a piacere e riguardano il colore del testo (#003366), il colore dello sfondo (#FDBCB7), la distanza tra il testo e il bordo (padding:15px) nelle quattro dimensioni e la distanza tra il rettangolo e il layout in ciascuna direzione da fissare in senso orario a partire dall'alto (margin: …).





19 commenti :

  1. Grazie per il post ma ho una domanda da farti. Ho un blog con molte etichette e faccio fatica a scrivere un messaggio per tutte. Esiste un codice che attribuisca a tutti i tag un unico messaggio sempre uguale?

    grazie e complimenti per il lavoro che fai

    Roberto

    RispondiElimina
  2. @Roberto
    Ci posso pensare, senza impegno :)

    RispondiElimina
  3. grandioso! proprio quello che cercavo da un po'... graziegraziegrazie!

    RispondiElimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. Ciao Parsifal,è possibile aggiungere le miniature,durante la ricerca in google?mi sono accorta che quando cerco una ricetta alcuni blog,hanno di fianco alla descrizione,la foto della ricetta che cercavo.E' carino,perchè vedi subito l'immagine.Ciaoo

    RispondiElimina
  6. @Anna
    E' Google che inserisce le immagini e le anteprime dei risultati di ricerca. Noi non possiamo farci nulla ...

    RispondiElimina
  7. ho capito,allora google crome,non c'entra nulla?perchè non tutti ce l'hanno,quindi non capisco in base a quale criterio lo fa.Va bene,sei sempre gentilissimo..notte Parsifal

    RispondiElimina
  8. ciao Ernesto, molto interessante questa personalizzazione, mi chiedevo se fosse possibile personalizzare anche le sidebar di ciascuna etichetta, così da dare info più specifiche per ciascun tag trattato. Grazie

    RispondiElimina
  9. @ViviTaranto
    Tutto è possibile. Però devi creare un nuovo CSS e inserire i tag condizionali subito all'inizio della sezione della sidebar il cui codice varia da modello a modello.

    RispondiElimina
  10. Grazie Ernesto, penso che giocherò un po' con le personalizzazioni dei widget a seconda delle etichette come spiegasti qui http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html, sarà più che sufficiente. Ancora grazie alla prossima

    RispondiElimina
  11. ciao Ernesto, il vecchio mess di blogger mi rimane comunque visibile, mentre quello inserito da me appare più sotto e senza bordo, avrò sbagliato qcosa?

    RispondiElimina
  12. anche lo sfondo, in pratica è come se il codice CSS non andasse

    RispondiElimina
  13. @Vivi Taranto
    Controlla se hai sbagliato qualcosa nella classe
    MsgEtichetta deve essere la stessa di quella presente nel div

    RispondiElimina
  14. perdonami credo di non aver capito

    RispondiElimina
  15. @ViviTaranto
    Il codice funziona. Se nel tuo modello no va, prova a incollare direttamente il mio codice per vedere se dipende dalle tue personalizzazioni. Cambia solo nome-etichetta con quello di un tuo tag. Nel caso funzionasse allora devi stare più attento a editare il tuo codice. Se invece non funziona neppure questo allora non c'è nulla da fare.

    RispondiElimina
  16. grazie Ernesto, purtroppo devo concludere che il codice CSS non è supportato dal mio modello, ho incollato come mi hai detto ma ho avuto lo stesso risultato, ancora grazie alla prossima

    RispondiElimina
  17. Anche seguendo i passaggi,purtroppo non sono riuscita! COme posso fare?
    Littlestarofstardoll.blogspot.com

    RispondiElimina
  18. @Auroryna_98
    Non è che posso aggiungere altro a quello che c'è già nel post ...
    Prova a inserire il codice di esempio che ho messo per vedere se ti funziona. In questo caso lo personalizzi dopo.

    RispondiElimina
  19. Sposto qui i miei commenti. Era proprio questo l'effetto che cercavo!
    (blog magnifico, per la serie "chiedi e ti sarà dato!")
    Ho inserito i codici che hai descritto in questo articolo (anche se vorrei mettere un'immagine più grande, e niente testo, si può?). Però c'è qualcosa che non va.

    Tempo addietro, avevo tolto il testo "visualizzazione degli ultimi post … quando si apre una etichetta" (seguendo la tua relativa guida).
    Oggi, ho provato a rimettere le cose a loro posto, ma nulla, non si vede l'immagine che vorrei per due categorie specifiche.

    Grazie comunque per l'aiuto e dei post, sempre utilissimi! ;)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.