Come personalizzare il titolo dei post in base alle etichette

Scrivo questo post per rispondere ad una richiesta di butterfly.23:

volevo chiederti se posso far apparire in ogni post un link diverso che cambia in base all'etichetta...

Ho creato allora uno script che permette di personalizzare il titolo di ciascun post in base all'etichetta associata. Basta apportare delle piccole modifiche al codice html del template.
Potrebbe essere utile per chi ha un blog multi-argomento e quindi colorare il titolo dei post di un determinato argomento in modo diverso da quelli relativi ad altri argomenti.

Per capire come funziona potete vedere questo mio blog di prova, dove ho testato lo script. I tre post presenti hanno ciascuno il titolo di un colore diverso, in base all'ultima etichetta. Lo script infatti permette di associare a ciascuna etichetta un particolare stile (colore, font, sfondo, bordi, ecc). Se un post però ha più etichette, il titolo assumerà lo stile associato all'ultima etichetta.

Vediamo ora quali sono i passi da fare per questa funzione:

- andate in Blogger -> Layout -> Modifica Html e poi su Espandi i modelli widget

- trovate la riga di codice:

<a expr:href='data:post.link'><data:post.title/></a>

e sostituitela con

<a expr:href='data:post.link' expr:id='"a-" + data:post.id'><data:post.title/></a>

- poi trovate la riga di codice:

<a expr:href='data:post.url'><data:post.title/></a>

e sostituitela con

<a expr:href='data:post.url' expr:id='"a-" + data:post.id'><data:post.title/></a>

- poi trovate il codice:

<b:loop values='data:post.labels' var='label'>

e subito dopo aggiungete

<script>personalizza_titolo(&#39;<data:label.name/>&#39;,&#39;<data:post.id/>&#39;);</script>

- ora bisogna inserire la funzione javascript personalizza_titolo prima del tag </head>:

<script>
function personalizza_titolo(tag,id) {
var titoloPost = document.getElementById(&#39;a-&#39; + id);
titoloPost.className = tag;
}
</script>

- e infine per ogni etichetta dovrete creare una classe nella parte del codice css del template (da inserire prima di ]]></b:skin>); per intenderci nel mio blog di prova ho creato queste classi:

h3 a.blu { color: blue; background: #DBEDFF; }
h3 a.rosso { color: red; background: #FFD6E0; }
h3 a.verde { color: green; background: #D8FCDB; }

relativo alle etichette blu, rosso e verde.

Resto a disposizione per ogni dubbio e chiarimento.

Lo script che ho realizzato non era proprio quello che butterfly.23 voleva! Ecco allora che dopo essersi spiegata meglio...

sotto al titolo dei post vorrei mettere un link che possa variare in base all'etichetta. ad esempio: io ho 2 etichette, "musica" e "tecnologia"...ecco, vorrei associare a "musica" il "link1" e a "tecnologia" il "link2"...è possibile?

ho adattato lo script alle sue esigenze; potete vedere il risultato su quest'altro blog di prova.

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.