Prima di tutto se avete già installato il gadget andate al passaggio successivo, se invece ancora non lo avete messo sul blog, cliccate su Layout > Aggiungi un gadget > Etichette, in sostanza noi andremo a trasformare la classica nuvola di etichette standard di blogger in un menù a tendina come vedete nelle 2 immagini chiusa/aperta.
.
.
Il titolo delle etichette che ho messo per provare il gadget l'ho chiamato Menu Etichette, ricordatevi il titolo che avete messo al vostro menù etichette.
Adesso dovete andare su Modello > Modifica HTML cliccando su F3 o Ctrl+F si cerca una riga simile a questa (nello spazio dove io ho scritto Menu Etichette dovrete mettere esattamente il titolo del vostro gadget etichette sennò non sarà possibile trovare la riga in questione, e non cliccate su espandi modelli widget):
Ora si cancella detta linea e si sostituisce con questo codice:
<b:widget id='Label3' locked='false' title='Menu Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='menu-etichette' onchange='location=this.options[this.selectedIndex].value;'>
<option>Scegli etichetta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<div style='font-size:60%;text-align:right;'>
<a href='http://goo.gl/PjyA8' target='_blank'>Get Widget</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Dopo di che clicchiamo su Anteprima e vediamo se è comparsa la tendina, se è così salviamo tranquillamente.
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='menu-etichette' onchange='location=this.options[this.selectedIndex].value;'>
<option>Scegli etichetta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<div style='font-size:60%;text-align:right;'>
<a href='http://goo.gl/PjyA8' target='_blank'>Get Widget</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Dopo di che clicchiamo su Anteprima e vediamo se è comparsa la tendina, se è così salviamo tranquillamente.
L'espressione Scegli etichetta sarà la prima voce del menù e può essere sostituita con un'altra senza problemi.
ATTENZIONE: Evitate per quanto possibile parole accentate e soprattutto apostrofi che possono essere interpretati come HTML dal sistema.
Per personalizzare la tendina con dei colori basta cercare la seguente riga di codice sempre su Modifica HTML:
]]></b:skin>
immediatamente sopra incollate questo codice CSS
.menu-etichette {
width:100%; /* Larghezza del menu */
background-color: #FDBCB7; /* Colore dello sfondo */
color: #003366; /* Colore del testo */
}
I parametri sono illustrati a fianco di ciascuno di essi e possono essere personalizzati. Possono essere modificati per dare al menù delle etichette gli stessi colori del blog ovviamente. La larghezza 100% significa che il menù prende tutto lo spazio disponibile nella sidebar vi ricordo.
Come ultima cosa vi posso dire che se vogliamo eliminare i numeri tra parentesi che compaiono vicino alle etichette nel menù a tendina basta eliminare la riga (<data:label.count/>).
Si possono mettere i numeri anche tra parentesi quadre sostituendola con quest'altra [<data:label.count/>] o possiamo anche inserire al suo posto questa riga [<data:label.count/> post] per avere vicino alle etichette il numero di esse con l'espessione "post" oppure sostituendola con qualsiasi altra parola.
+ commenti + 1 commenti
... sei una favola :-) GRAZIE
Posta un commento