Come aggiungere una barra dei menu superiore al vostro vecchio stile blog in Blogger

May 14

Aggiungere una barra di navigazione del menu per un blog di Blogger, anche se l'interfaccia blog attualmente visualizzato in uno stile Blogger vecchio. Blogger ha aggiornato l'interfaccia che agli utenti di modificare i loro blog nel 2010, che permette un maggiore accesso al codice HTML per la progettazione del blog. Blogger aggiorna automaticamente questa interfaccia quando i titolari di conto che non hanno effettuato l'accesso in quanto il roll-out log-in per Blogger, a quel punto è possibile incollare il codice HTML per il menu di navigazione superiore.

istruzione

1 Entra in Blogger utilizzando le credenziali dell'account Google. Fare clic sul pulsante "Design" sotto il nome del blog che si desidera modificare.

2 Fare clic sul pulsante "Aggiungi gadget", quindi selezionare "text / html". Incollare il seguente codice nel campo vuoto:

<Ul>
<Li> <a href="page1.html"> Navigazione Opzione 1 </a> </ li>
<Li> <a href="page2.html"> navigazione Opzione 2 </a> </ li>
<Li> <a href="page3.html"> Navigazione Opzione 3 </a> </ li>
<Li> <a href="page4.html"> Navigazione Opzione 4 </a> </ li>
</ Ul>

Sostituire i link di esempio e titoli con gli URL reali e titoli delle pagine. Aggiungere ulteriore <li> </ li> elementi per aggiungere ulteriori collegamenti al menu di navigazione. Fare clic sul pulsante "Salva".

3 Selezionare "Modifica HTML". Scorrere verso il basso per la <b /: pelle> elemento e cliccare con il mouse sulla linea prima di questo codice. Incollare il codice riportato di seguito:

.basictab {
padding: 3px 0;
margin-left: 0;
font: 12px grassetto Verdana;
border-bottom: 1px grigio solido;
list-style-type: none;
text-align: left;
}

.basictab li {
display: inline;
margin: 0;
}

.basictab li a {
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px grigio solido;
border-bottom: none;
background-color: # f6ffd5;
color: # 2d2b2b;
}

.basictab li a: visited {
color: # 2d2b2b;
}

.basictab li a: hover {
background-color: # DBFF6C;
colore nero;
}

.basictab li a: active {
colore nero;
}

.basictab li.selected un {/ selezionato effetto scheda /
position: relative;
top: 1px;
padding-top: 4px;
background-color: # DBFF6C;
colore nero;
}

Modificare i codici per i colori, i nomi e le dimensioni dei caratteri e tutti gli altri elementi di stile del menu che si desidera modificare. Fare clic sul pulsante "Anteprima" per visualizzare in anteprima il menu sembra sul tuo blog e apportare le modifiche necessarie. Fai clic su "Salva modifiche" quando si è pronti a fare i cambiamenti finale.