Nwlapcug.com


Come aggiungere un menu a discesa per barra dei collegamenti in Blogger

Aggiungere un menu a discesa alla barra dei collegamenti in Blogger per semplificare la navigazione del tuo blog di Blogger per i tuoi lettori. Aggiunta di menu a discesa per la navigazione del tuo blog dà un visitatore diverse opzioni per procedere ogni volta che si muove il cursore sopra il menu. L'installazione richiede l'inserimento di codice nel tuo blog.

Istruzioni

1

Accedi a Blogger utilizzando le credenziali di Google. Selezionare "Design" da sotto il nome del blog a cui si desidera aggiungere menu a discesa.

2

Selezionare "Modifica HTML", quindi scorrere il documento fino a raggiungere il < / head > tag. Fare clic sulla riga sopra il tag, poi tasto destro del mouse e incollare il codice riportato di seguito:

< style >

sddm

{margin: 0;
padding: 0;
z-indice: 30}

sddm li

{margin: 0;
padding: 0;
list-style: none;
float: left;
/Font del top menu/
carattere: grassetto 11px arial}

sddm li un

{display: block;
margine: 1px 0 0 0;
padding: 4px 10px;
/larghezza di ogni top menu/
Larghezza: 60px;
/colore di sfondo del menu principale/
background: #5970B2;

/colore del testo del menu principale/
colore: #FFFFFF;
text-align: center;
Proprietà Text-decoration: none}

sddm li un: al passaggio del mouse

{

/colore di sfondo del menu principale al passaggio del mouse/
background: #49A3FF}

sddm div

{Posizione: assoluta;
visibilità: nascosto;
margin: 0;
padding: 0;

/colore di sfondo del menu a discesa /
Priorità bassa: #FFFFFF;
/bordo del menu a discesa/
border: 1px solid #5970B2}

sddm div un

{Posizione: relativo;
display: block;
margin: 0;
padding: 5px 10px;
Larghezza: auto;
white-space: nowrap;
text-align: left;
Proprietà Text-decoration: none;
/colore di sfondo di ogni elemento di menu/
Priorità bassa: #FFFFFF;
/colore del testo di ogni elemento di menu/
colore: #2875DE;
/tipo di carattere di ogni elemento di menu/
carattere: 11px arial}

sddm div un: al passaggio del mouse

{
/sfondo di ogni elemento al passaggio del mouse/
background: #49A3FF;
/colore del carattere di ogni voce di menu al passaggio del mouse/
colore: #FFFFFF}
< / stile >
< script type = "text/javascript" >

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

Aprire il livello nascosto
funzione mopen(id)
{
annullare il timer di stretta
mcancelclosetime();

chiudere il vecchio strato
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

ottenere il nuovo livello e mostrarlo
ddmenuitem = document.getElementById(id);
ddmenuitem.Style.Visibility = 'visibile';

}
chiudere livello hanno mostrato
funzione mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

andare vicino timer
funzione mclosetime()
{
closetimer = Window. setTimeout (chiudinM, timeout);
}

annullare il timer di stretta
funzione mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

chiudere livello quando click-out
Document.OnClick = chiudinM;
< / script >

Sostituire eventuali elementi di codice colore con codici di colore che corrisponde esattamente al tema del tuo blog, quindi fare clic su "Salva"modello. Selezionare il collegamento "Elementi pagina" nella parte superiore della pagina.

3

Selezionare "Aggiungi un Gadget", quindi fare clic su "HTML/JavaScript." Pulsante destro del mouse all'interno del campo di "Corpo", quindi incollare il codice riportato di seguito:

< ul id = "sddm" >
< li >< un href = "#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()" > Home < /a >
< div id = "m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()" >
< a href = "#" > prima opzione del Menu #1 < /a >
< a href = "#" > secondo Menu #2 opzione < /a >
< a href = "#" > terza opzione di Menu #2 < /a >
< / div >
</li >
< li >< un href = "#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()" > Scarica < /a >
< div id = "m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()" >
< a href = "#" > prima opzione del Menu #2 < /a >
< a href = "#" > secondo Menu #2 opzione < /a >
< a href = "#" > terza opzione di Menu #2 < /a >
< / div >
</li >
< div style = "chiaro: entrambi" >< / div >

Sostituire il carattere "#" dietro ogni "< a href = >" elemento con l'URL della pagina a cui si desidera collegare, quindi sostituire il titolo di campione dietro ciascuno con il titolo della pagina. Fare clic su "Salva Widget."

4

Mostra il tuo blog in una nuova scheda o finestra. I menu a discesa sono ora attivi nella barra dei collegamenti.