Pubblicato il 07/03/10 - aggiornato il  | 8 commenti :

Come inserire delle icone personalizzate per ciascuna categoria in un blog su Blogger.

Alcuni blog su Blogger vengono divisi in sezioni utilizzando delle etichette principali da aggiungere a quelle secondarie. Per esempio un blog sul mondo dello spettacolo può decidere di raggruppare gli articoli secondo gli argomenti: cinema, musica, televisione, gossip, ecc.
Nel momento in cui si scrive un post, insieme ai tag specifici per l'articolo, viene inserita anche l'etichetta corrispondente alla sezione. Per esempio un articolo con il titolo "Tragedia sfiorata all'Isola dei Famosi per un tuffo dall'elicottero con l'acqua bassa" avrà le etichette: isola dei famosi, reality, elicottero, televisione. Dove l'ultima in grassetto sarà la categoria principale.
Se si utilizza un sistema di pubblicazione di questo tipo può essere utile inserire il widget per gli ultimi articoli per categoria senza miniature o con miniature.
Un'ulteriore personalizzazione può essere quella di inserire delle icone personalizzate sotto il titolo in modo da informare immediatamente i lettori a quale categoria il post appartenga. Come sempre è più facile a vedere un esempio che a spiegarlo. Recatevi quindi nel mio blog di demo e guardate gli articoli pubblicati il 6 Marzo.
icone-etichetta

Oltre alle icone con il numero dei commenti sono presenti per ogni post delle immagini che indicano di quale argomento tratta l'articolo. La personalizzazione è piuttosto semplice. Andare come al solito su Layout > Modifica HTML e salvare il modello completo. Dobbiamo incollare il codice seguente, dirò dopo in quale punto

<!--ICONE START-->
<div style='text-align: right'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;musica&quot;'>
<img alt='musica' src='http://goo.gl/bAgg'/>
</b:if>
<b:if cond='data:label.name == &quot;cinema&quot;'>
<img alt='cinema' src='http://goo.gl/B987'/>
</b:if>
<b:if cond='data:label.name == &quot;televisione&quot;'>
<img alt='televisione' src='http://goo.gl/R1bn'/>
</b:if>
<b:if cond='data:label.name == &quot;computer&quot;'>
<img alt='computer' src='http://goo.gl/QW1G'/>
</b:if>
</b:loop>
</div>
<!--ICONE STOP - http://parsifal32.blogspot.com/-->

Ho inserito quattro categorie con le relative icone ma possono essere aggiunte tutte le categorie che si vuole con i nomi che si desidera e con le icone che si preferisce. E' sufficiente aggiungere nuovi blocchi di codice con la stessa sintassi. Vediamo le personalizzazioni
  1. Se al posto di right inseriamo left le icone si vedranno sulla sinistra invece che sulla destra
  2. Le quattro categorie che ho inserito (musica, cinema, televisione, computer) possono essere aumentate o sostituite da altre modificando il nome evidenziato di rosso
  3. Accanto a ciascuna categoria c'è l'URL dell'icona corrispondente (p.e. http://goo.gl/bAgg). Se si vogliono altre icone si devono caricare su un servizio tipo Skydrive, acquisirne l'URL e sostituirlo a quelli del codice
  4. Se volete trovare icone per qualsiasi esigenza consultate il motore IconFinder ricordandovi di immettere le parole chiave in inglese. Le icone possono anche essere ridimensionate a  seconda delle esigenze e del modello.
  5. Da notare che se sono presenti due o più etichette, si visualizzeranno due o più icone
La posizione di inserimento del codice dipende dal modello che avete e se il vostro blog ha la pubblicità di Adsense o meno. Vi suggerisco quattro possibilità
1): Immediatamente sotto alla riga
<div class='post-header-line-1'/>
può essere una buona soluzione se non avete pubblicità.
2): Immediatamente dopo il codice della pubblicità che si visualizza sotto il titolo del post 
3): Immediatamente sopra alla riga
<div class='post-body entry-content'>
4): Immediatamente sopra alla riga
<data:post.body/>
La scelta ottimale dipende anche da altre personalizzazioni che avete già inserito che possono andare a interferire con questa. Parlo di interferenza estetica e non a livello di incompatibilità che dovrebbe essere assicurata per tutti i modelli.



8 commenti :

  1. Ciao, ho inserito il codice e modificato il nome delle etichette, ma non si vede nulla (e sul mio blog nn ci sono pubblità).
    Any help? :P
    Tnx.

    RispondiElimina
  2. ciao :)
    ci ho provato...ma qual'è il codice magico per portare le iconcine sulla stessa riga tra Titolo e nuvoletta Commenti?
    grazie! ciao :)

    RispondiElimina
  3. @Supergerod
    Mettere tutte e due le icone sulla stessa linea non è semplice ma si potrebbe provare. Si va su WLW e si crea una tabella con una riga e due colonne.Nelle due celle si inseriscono i codici delle icone con numero e delle icone delle etichette. Si passa alla modalità HTML (Origine), si copia il codice e si incolla nel modello nella posizione desiderata.

    RispondiElimina
  4. molto bene! appena posso provvederò a seguire le istruzioni...sempre chiare come tutto il resto! very good! :D

    RispondiElimina
  5. Ciao Ernesto,
    mi pare di capire che inserire icone e titolo sulla stessa riga non è possibile senza utilizzare WLW?
    Grazie,
    Giuliana

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Icona e Titolo si possono mettere anche sulla stessa riga. Se non sono perfettamente allineati si può inserire il tag della immagine con un CSS. Quando vedi per esempio
      style='text-align: right'
      metti
      style='text-align: right; padding-top: -3px;'
      Dove puoi inserire dei numeri positivi o negativi per settare l'allineamento verticale in padding-top

      Elimina
  6. Ciao Ernesto, ho appena provato ad inserire il codice per le categorie, ma non si vede nulla.
    Ho anche provato ad inserirlo in un blog di prova con meno modifiche personalizzate, ma nulla.
    Naturalmente ho cambiato il nome etichette (con quelle di mio interesse) e i rispettivi URL delle immagini.
    Ho anche provato ad inserire nei diversi punti da te segnalati.

    Rinuncio, o hai la dritta giusta anche stavolta?
    Grazie come sempre ;)

    RispondiElimina
    Risposte
    1. @# Se non hai sbagliato potrebbe darsi che il codice di Blogger è cambiato visto che il post risale a più di 3 anni fa

      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