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
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 == "http://nome-blog.blogspot.com/search/label/nome-etichetta"'>
<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: …).
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?
RispondiEliminagrazie e complimenti per il lavoro che fai
Roberto
@Roberto
RispondiEliminaCi posso pensare, senza impegno :)
grandioso! proprio quello che cercavo da un po'... graziegraziegrazie!
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaCiao 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@Anna
RispondiEliminaE' Google che inserisce le immagini e le anteprime dei risultati di ricerca. Noi non possiamo farci nulla ...
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
RispondiEliminaciao 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@ViviTaranto
RispondiEliminaTutto è 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.
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
RispondiEliminaciao Ernesto, il vecchio mess di blogger mi rimane comunque visibile, mentre quello inserito da me appare più sotto e senza bordo, avrò sbagliato qcosa?
RispondiEliminaanche lo sfondo, in pratica è come se il codice CSS non andasse
RispondiElimina@Vivi Taranto
RispondiEliminaControlla se hai sbagliato qualcosa nella classe
MsgEtichetta deve essere la stessa di quella presente nel div
perdonami credo di non aver capito
RispondiElimina@ViviTaranto
RispondiEliminaIl 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.
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
RispondiEliminaAnche seguendo i passaggi,purtroppo non sono riuscita! COme posso fare?
RispondiEliminaLittlestarofstardoll.blogspot.com
@Auroryna_98
RispondiEliminaNon è 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.
Sposto qui i miei commenti. Era proprio questo l'effetto che cercavo!
RispondiElimina(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! ;)
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...)
RispondiEliminaMi 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
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@#
grazie Ernesto
EliminaCiao 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.
RispondiEliminaSe 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
Eliminahttps://productforums.google.com/forum/#!forum/blogger
@#
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?
EliminaDevi togliere tutte le righe di codice delle immagini che iniziano con < img src=' e che terminano con '/ >
Elimina@#
Molte grazie, sei sempre prezioso.
EliminaAiuto, non funziona... :(
RispondiEliminaLe Demo funziona. Viene aggiunto un messaggio alle pagine di etichetta cioè del tipo
Eliminahttp://nomeblog.blogspot.com/search/label/etichetta
e non a tutti i post non quella data etichetta
@#
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...
RispondiEliminaHai un blog gratuito? Forse hai lasciato il .it nell'url invece di sostituirlo con il .com (ipotesi)
RispondiElimina@#
Se nell'etichetta ci sono accenti è probabile che sia wueque il motivo. Prova con una etichetta senza accenti
RispondiElimina@#
* quello
RispondiEliminaIl mio blog è gratuito, ma ho lasciato il .com come dici tu. Inoltre ho provato anche con un'etichetta senza accento.
EliminaNel tema il codice compare due volte. Ho provato a inserire il codice sotto a entrambi. Non saprei più cosa fare! :(
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.
RispondiEliminaNo. 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@#