News Update :
Home » » Menù a tendina verticale personalizzato con le etichette di Blogger.

Menù a tendina verticale personalizzato con le etichette di Blogger.

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):

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

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.

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.
Share this article :

+ commenti + 1 commenti

21 luglio 2013 12:39

... sei una favola :-) GRAZIE

Posta un commento

Ultimi commenti

 
Company Info | Contact Us | Privacy policy | Term of use | Widget | Advertise with Us | Site map
Copyright © 2011. Moneysky . All Rights Reserved.
Design Template by panjz-online | Support by creating website | Powered by Blogger