Pubblicato il 29/04/12e aggiornato il

Come aggiungere una descrizione alle etichette di Blogger.

Come inserire la descrizione accanto a ciascuna etichetta nel widget di Blogger
La gestione delle etichette ha una grande importanza nella progettazione e nella ordinaria amministrazione di un blog. Ci sono siti che ne fanno largo uso mentre altri le utilizzano in modo molto più parco un po' come succede per le categorie di Wordpress.

Questi ultimi possono essere interessati a inserire anche una descrizione accanto a ciascuna etichetta nel widget ufficiale di Blogger. Visto che la cosa deve essere fatta manualmente questo metodo è consigliabile appunto solo a chi ne abbia un numero abbastanza modesto da essere visualizzate in un elenco a discesa senza occupare troppo spazio nel layout.


Ricordo comunque che su Blogger le etichette da mostrare possono anche essere selezionate però se si sceglie questa opzione non è possibile inserire la descrizione almeno con il metodo che vado a illustrare. L'aspetto del widget delle etichette sarà simile a questo

widget-etichette-con-descrizione

Se non lo si è ancora fatto si va su Layout > Aggiungi un gadget > Etichette e si posiziona il widget nella sidebar dopo aver scelto Elenco e averlo salvato

widget-etichette

Si va su Modello > Modifica HTML > Procedi e non si espandono i modelli widget. Si cerca la riga

<b:widget id='Label1' locked='false' title='Etichette' type='Label'/>

come mostrato nello screenshot

widget-etichette[5]

Al posto di Label1 potrebbe esserci Label2 se avete già inserito un widget simile. Si cancella tale riga e si sostituisce con il seguente codice

<b:widget id='Label1' locked='false' title='Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
<!-- Inizio Descrizione Etichette --><b:if cond='data:label.name == "blogger"'>
<span class="etichette"> - Widget per Blogger</span>
</b:if>
<b:if cond='data:label.name == "commenti"'>
<span class="etichette"> - Personalizzare commenti</span>
</b:if>
<b:if cond='data:label.name == "effetti"'>
<span class="etichette"> - Effetti speciali per blog</span>
</b:if>
<b:if cond='data:label.name == "icone"'>
<span class="etichette"> - icone per social network</span>
</b:if>
<!-- Fine Descrizione Etichette--></li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Si tratta del widget ufficiale delle Etichette di Blogger a cui sono state aggiunte le descrizioni. Queste sono state inserite tra due commenti colorati di verde, sono in numero di quattro e sono puramente indicative. Se ne possono aggiungere quante se ne vuole con la seguente sintassi

<b:if cond='data:label.name == "nome-etichetta"'>
<span class="etichette"> - Descrizione della etichetta</span>
</b:if>

Si salva il modello. Il trattino può essere sostituito anche da un altro carattere come | o altro ancora. I più bravi possono anche creare un CSS per la classe "etichette" in modo da personalizzare l'aspetto della descrizione come colore, font, dimensioni, caratteri, ecc. Per esempio

.etichette {
color:#003366;
font-weight:bold;
}

da incollare nel modello subito sopra alla riga ]]></b:skin>.




Nessun commento :

Posta un commento

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.