16 giugno 2009

14 commenti Condividi il post Facebook Twitter Google+

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.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

14 commenti

  1. Grande Jole!!! E' tutto chiarissimo
    baci

    RispondiElimina
  2. grazie, piace un sacco anche a me! un bacione

    RispondiElimina
  3. Per il momento non utilizzerò lo script, ma se mi servisse saprò dove trovarlo ;)

    RispondiElimina
  4. Molto interessante e originale, come sempre.
    Ciao

    RispondiElimina
  5. Grazie Iole ci provo anch'io.

    RispondiElimina
  6. Grazie Iole,
    avevo pensato anch'io ad una soluzione di questo tipo ma aspettavo che quelli di Blogger risolvessero il problema.
    Guarda che il tuo blog mi da Operazione terminata, impossibile aprire la pagina se uso IETab cioè uso Firefox con l'estensione per Explorer.
    Deciditi anche tu ad eliminare il widget perché la maggior parte dei navigatori, non dei blogger ovviamente, usa quel browser e ti si dimezzano le visite :-(
    Ciao

    RispondiElimina
  7. @parsifal32: ora ho tolto uno script delle visite e l'errore non mi compare... speriamo bene!!!

    RispondiElimina
  8. secondo me tu sei una maga^_^

    RispondiElimina
  9. hello... hapi blogging... have a nice day! just visiting here....

    RispondiElimina
  10. ciao Iole, grazie per avere accolto la mia richiesta, anche se non era questo che intendevo, ma è comunque una bella idea che può sempre servire...

    cerco di spiegarti 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?

    grazie :D

    RispondiElimina
  11. @butterfly.23: sì, penso che si può fare... basta adattare la funzione personalizza_titolo (anziché impostare lo style del titolo dovrà aggiungere il link per ogni etichetta associata al post). Devi però fare qualche modifica all'html del template. Se mi contatti dalla chat o via email ti aiuto!

    RispondiElimina
  12. Che bella trovata personalizzare il colore del post in base alle categorie. Adesso provo a seguire i tuoi consigli. Sei troppo brava e creativa. Grazie!

    RispondiElimina
  13. [url=http://love.ebiteua.com/]проститутки киева[/url]

    RispondiElimina
  14. Care blogger, ho un'informazione da chiedervi: spesso i titoli dei post sono un po lunghi e occupano 2 righi a causa della dimensione della scrittura e del fatto che ho usato un layout a tre colonne. Mi chiedo se è possibile e, se lo è, come posso fare per modificare il titolo di un post e dividerlo tra le due righe in modo equo e più elegante, tipo così:
    Cosi si presenta il mio blog:
    Recensione: "Scommettiamo che ti faccio
    innamorare" di Emma Hart
    Mentre vorrei:
    Recensione:
    "Scommettiamo che ti faccio innamorare"
    Emma Hart
    TUTTO CENTRATO.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy