Pubblicato il 18/06/11 - aggiornato il  | 36 commenti :

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: …).



36 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. @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
  15. 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
  16. Anche seguendo i passaggi,purtroppo non sono riuscita! COme posso fare?
    Littlestarofstardoll.blogspot.com

    RispondiElimina
  17. @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
  18. 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
  19. ciao Ernesto, complimenti sempre per i tuoi articoli estremamente utili ed originali....(ma stavolta non sono riuscito a trovare quello che cercavo e che credo sia utilissimo per gli utenti blogger...)
    Mi chiedevo se fossepossibile inserire una descrizione alla pagina di una etichetta/label: ad esempio http://www.ideepercomputeredinternet.com/search/label/testo fare in modo che ci sia una descrizione (SEO docet....) ad hoc. Grazie ciao Federico Hoefer

    RispondiElimina
    Risposte
    1. In modo automatico non si può fare perché si può aggiungere solo una descrizione che varrà per tutte le pagine. Il sistema mostrato in questo post è l'unica cosa che si possa fare (almeno credo...)
      @#

      Elimina
  20. Ciao Ernesto, ho inserito un'immagine di prova in una delle mie pagine. Riesco a visualizzarla senza problemi solo con Chrome, mentre se cambio browser (io uso safari) l'immagine compare come errore mentre il testo non dà problemi. Da cosa può dipendere? Aggiungo che l'immagine l'ho caricata tramite blogger, pertanto è nell'archivio Google.

    RispondiElimina
    Risposte
    1. Se il problema si presenta su Safari purtroppo non ti posso aiutare perché non ho un Mac e Safari per Windows non viene aggiornato da anni. Rivolgiti al forum
      https://productforums.google.com/forum/#!forum/blogger
      @#

      Elimina
    2. Ti ringrazio. Nel caso in cui volessi evitare di inserire l'immagine (se il problema persiste) lasciando solo il testo, come dovrei modificare il codice?

      Elimina
    3. Devi togliere tutte le righe di codice delle immagini che iniziano con < img src=' e che terminano con '/ >
      @#

      Elimina
    4. Molte grazie, sei sempre prezioso.

      Elimina
  21. Risposte
    1. Le Demo funziona. Viene aggiunto un messaggio alle pagine di etichetta cioè del tipo
      http://nomeblog.blogspot.com/search/label/etichetta
      e non a tutti i post non quella data etichetta
      @#

      Elimina
  22. Lo so, ma per qualche strano motivo a me non funziona... Non compare i messaggio che ho impostato per quella determinata etichetta... Ho controllato di aver scritto bene l'etichetta (maiuscole, minuscole, accenti) ma niente...

    RispondiElimina
  23. Hai un blog gratuito? Forse hai lasciato il .it nell'url invece di sostituirlo con il .com (ipotesi)
    @#

    RispondiElimina
  24. Se nell'etichetta ci sono accenti è probabile che sia wueque il motivo. Prova con una etichetta senza accenti
    @#

    RispondiElimina
  25. Risposte
    1. Il mio blog è gratuito, ma ho lasciato il .com come dici tu. Inoltre ho provato anche con un'etichetta senza accento.
      Nel tema il codice compare due volte. Ho provato a inserire il codice sotto a entrambi. Non saprei più cosa fare! :(

      Elimina
  26. Ciao scusa se ti disturbo, so che non ti sei dedicato ai temi dinamici di blogger ma per caso durante le tue ricerch hai avuto modo di trovare un codice simile per il tema notable. Ho provato a cercare ma senza successo. Ciao e grazie.

    RispondiElimina
    Risposte
    1. No. Mi spiace. Da quando hanno rilasciato i nuovi temi ho smesso di occuparmi di Blogger. Sarebbe stato troppo complicato. I codici sono tutti diversi 🤔
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy