Pubblicato il 20/12/12e aggiornato il

Widget delle Etichette multicolore per Blogger.

Come installare un widget delle etichette multicolore su Blogger.
Sulla falsariga del widget dei Post più popolari con effetto multicolore si può realizzare anche un gadget dello stesso tipo per le Etichette di Blogger. Quando si va su Layout > Aggiungi un gadget > Etichette si crea un widget con ID Label1; se poi se ne crea un altro questo avrà ID Label2 e così via. Il gadget che vado a presentare è formato da una serie di rettangoli arrotondati posti in verticale e può quindi essere usato per determinate etichette particolarmente importanti per il nostro sito che poi saranno selezionate in un secondo tempo.



Per prima cosa dobbiamo verificare se abbiamo già il widget delle etichette e quanti ne abbiamo. Si va su Modello > Modifica HTML > Procedi e si clicca su F3 o su Ctrl+F. Nel campo che si apre in alto su Chrome e Internet Explorer o in basso su Firefox incolliamo Label1 per vedere se fosse presente. Se ci fosse già proviamo a cercare Label2. Se ci fosse anche questo andiamo con Label3 e così via.

Poniamo che già Label2 non sia presente nel template. Si cerca allora la riga ]]></b:skin> e, subito sopra, si incolla questo codice di CSS

/* Etichette Colorate */
#Label2 ul li a:hover{color:#ffffff;text-decoration:none}
#Label2 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #191919; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label2 ul li:first-child:after,
#Label2 ul li:first-child + li:after,
#Label2 ul li:first-child + li + li:after,
#Label2 ul li:first-child + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#Label2 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label2 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label2 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label2 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label2 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label2 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label2 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label2 ul li:first-child + li + li + li + li:after{content:"5"}
#Label2 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label2 ul li:first-child + li + li + li:after{content:"4"}
#Label2 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label2 ul li:first-child + li + li:after{content:"3"}
#Label2 ul li:first-child + li{background:#ff764c; width:90%}
#Label2 ul li:first-child + li:after{content:"2"}
#Label2 ul li:first-child{background:#ff4c54 ;width:90%}
#Label2 ul li:first-child:after{content:"1"}
#Label2 ul{margin:0;padding:0px 0;list-style-type:none}
#Label2 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Si salva il modello. Se non avessimo ancora inserito il gadget delle Etichette al posto di Label2 dovremmo mettere Label1 come ampiamente illustrato in precedenza. Tutti i codici esadecimali dei colori possono essere personalizzati a piacimento per ottenere un risultato come questo

etichette-colorate-blogger
Con Internet Explorer non saranno visti gli arrotondamenti come invece accade con gli altri browser. Si potranno selezionare fino a un massimo di 9 etichette. Andiamo adesso su Layout > Aggiungi un gadget > Etichette e posizioniamo il widget in una sidebar. Dobbiamo selezionare un massimo di 9 etichette

etichette-multicolore 

Si mette la spunta su Etichette selezionate quindi si va su Modifica e si scelgono le etichette da mostrare. Si va su Completato quindi su Salva. In Ordinamento si può mettere la flag a Per frequenza invece che In ordine alfabetico per mostrare per prime le etichette più comuni. In basso sarà visibile tra parantesi anche il numero di articoli in cui è presente la data etichetta. Avrà un aspetto ereditato da quello del blog. Tale numero si può anche togliere con questo procedimento. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca Label2 o quello che è e si scorre il codice fino a trovare la riga

<span dir='ltr'>(<data:label.count/>)</span>

L'espressione in rosso rappresenta il numero delle etichette. Si può togliere da solo oppure insieme a tutta la riga. Si possono inserire anche altre espressioni per ottenere questo risultato

etichette-multicolore[5]

Basta sostituire (<data:label.count/>) con il seguente codice

(<b:if cond='data:showFreqNumbers == 0'>
articolo
<b:else/>
<b:if cond='data:label.count == 1'>
1 articolo <b:else/>
<data:label.count/> articoli
</b:if>
</b:if>)
dove al posto di articolo/i possono essere messe altre parole.




14 commenti :

  1. ciao ernesto volevo farti alcune domande a te che sei esperto, purtroppo le faccio qui, sai dovresti fare una sezione apposta per tutti quelli come me che ti importunano!

    cmq

    nel mio sito avevo al mio indirizzo 634 mi piace su facebook, ora ne ho solo 207

    come google pulsante + 1 avevo +34 ora ho 76500+

    incredbile 76500+ bah!

    non capisco cosa sta succedendo...

    poi quando su google ricercavo il mio sito mi usciva il sito url principale con sotto tutte le pagine, come il tuo sito diciamo

    stranamente da qualche giorno non succede più se cerco il mio sito esce solo l'indirizzo come una pagina qualunque

    sai percasso rispondermi a tutti questi quesiti?

    RispondiElimina
    Risposte
    1. @GiuseppeArcuri
      Se creassi un forum apposito non lo visiterebbe nessuno, ho già provato. I +1 di Google+ e i Mi Piace di Facebook spesso danno i numeri perché modificano le impostazioni nei loro server e magari nei codici vecchi possono avere dei problemi di affidabilità dei dati.

      Elimina
  2. Ciao bravissimo come al solito con queste belle chicche e voglio augurarti Buon Natale a te e Famiglia ed una splendida fine con un ancora più meraviglioso inizio 2013.

    RispondiElimina
  3. come sempre esauriente, ne approfitto e ti faccio gli auguri scontati di buone feste, sai rispondermi all'altro quesito?

    poi quando su google ricercavo il mio sito mi usciva il sito url principale con sotto tutte le pagine, come il tuo sito diciamo

    stranamente da qualche giorno non succede più se cerco il mio sito esce solo l'indirizzo come una pagina qualunque

    RispondiElimina
    Risposte
    1. @GiuseppeArcuri
      Ricambio gli auguri ma non so risponderti, spesso Google è imperscrutabile :)

      Elimina
  4. Auguri anche da parte mia in anticipo

    RispondiElimina
  5. ciao ernesto purtroppo nel web non trovo nulla per darmi una risposta,forse tu puoi aiutami

    ora succede questo normalmente se cerchi su google ti escono nei risultati di ricerca esempio cosi:

    Widget delle Etichette multicolore per Blogger. | Idee per computer ...
    www.ideepercomputeredinternet.com/2012/12/...Condividi
    di Ernesto Tirinnanzi - in 355 cerchie di Google+
    2 giorni fa – Per prima cosa dobbiamo verificare se abbiamo già il widget delle etichette e quanti ne abbiamo. Si va su Modello > Modifica HTML > Procedi ..

    quando invece cerco un mio articolo mi esce questo:

    Titolo Articolo
    www.esempioindirizzo.com › etichetta
    13 giu 2012 – descrizione...

    -----------------------------

    non capisco perchè sotto al titolo dell articolo invece di uscire il link mi esce il link principale del sito la freccia e poi la etichetta relativa all articolo

    non riesco a spiegarmi cosa stia succedendo

    RispondiElimina
    Risposte
    1. @GiuseppeArcuri
      Forse dipende dal fatto che il tuo blog non ha ancora i post ben indicizzati, le metadescrizioni non sono state attivate e neppure c'è stata l'unificazione del Profilo di blogger con quello di Google Plus. Leggi questi post
      http://www.ideepercomputeredinternet.com/2012/03/la-descrizione-nelle-preferenze-di.html
      http://www.ideepercomputeredinternet.com/2012/09/google-authorship-attribuzione-contenuti.html
      http://www.ideepercomputeredinternet.com/2011/12/l-del-profilo-di-blogger-con-quello-di.html
      http://www.ideepercomputeredinternet.com/2011/09/come-farsi-indicizzare-rapidamente-un.html

      Elimina
  6. molte guide che hai linkato le ho seguite tempo fa e ti ringrazio, ma il mio blog sito è online da più di un anno e prima non succedeva quello che è successo ora, questa cosa sta capitando da qualche giorno

    non vorrei che ho combinato qualcosa nel html del sito, oppure puo essere dipeso che ho usato la spunta, nella sezione lettori di blog per 1 giorno intero mentre lo modificavo, invece di chiunque aperto solo ad autori di questo blog?

    vorrei mandarti i link del sito così puoi dargli un occhiata veloce al codice html se non ti disturbo

    RispondiElimina
    Risposte
    1. @...
      Se hai tenuto il blog per soli utenti registrati quando è passato il crawler di Google allora si spiega il comportamento. È probabile che ci vogliano settimane fa per far tornare tutto alla normalità

      Elimina
  7. Grazie Ernesto, stavo cercando una soluzione simile.L'ho inserito nel blog di prova e funziona! L'ideale sarebbe poter inserire, al posto delle cornici che hai creato, dei bottoni fatti da me, ma temo che sia troppo complicato....
    Un saluto
    Cinzia

    RispondiElimina
  8. Ciao. Vorrei sapere come si mettono le edichette in alto in prima pagina! Grazie

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.