August 31
Se si desidera rendere il vostro blog distinguersi dalla confezione, è necessario personalizzarlo. È possibile farlo con la scelta o la creazione di un modello di nessuno sta usando, o modificando il codice HTML per consentire widget personalizzati, come ad esempio un menu a discesa barra di navigazione. Al fine di personalizzare l'Navbar, avrete bisogno di essere vissuta con il codice HTML - ma è possibile aggiungere una barra di navigazione per il tuo blog copiando e incollando un paio di pezzi di codice.
1 Vai a Blogger.com e accedere al proprio account.
2 Fai clic su "Progettazione". Questo porta alla tua interfaccia di editing blog.
3 Fare clic sulla scheda "Design".
4 Selezionare "Modifica HTML".
5 Fare clic su "Scarica modello completo" per salvare una copia del modello corrente come riserva, nel caso in cui qualcosa va storto.
6 Fare clic sulla casella accanto a "Espandi i modelli widget".
7 Individuare il segmento "intestazione" del modello di blog. Vedrai questo testo:
<Header>
8 Copiare e incollare il seguente codice sotto il segmento intestazione del modello di blog. Si noti che se si dispone già di un codice a barre di navigazione, avrete bisogno di incollare su di esso.
/
Menu di navigazione
-------------------------------------------------- ---- /
NavbarMenu {
width: 100%;
Altezza: 35px;
background: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x in alto;
color: # cdaa7d
margin: 0 auto 0;
padding: 0;
font: 12px Arial normale, Tahoma, Verdana;
border-top: 1px solid # 855e42;
border-bottom: 1px solid # 855e42;
}
NavbarMenuleft {
Larghezza: 1200px;
float: left;
margin: 0;
padding: 0;
}
nav {
margin: 0;
padding: 0;
}
nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
margin: 0;
padding: 0;
}
nav li a, #nav li a: link, #nav li a: visited {
color: # ff0000;
blocco di visualizzazione;
text-transform: capitalizzare;
margin: 0;
padding: 15px 9px 8px;
font: 12px Arial grassetto, Tahoma, Verdana;
}
nav li a: hover, #nav li a: active {
sfondo: #FFFFFF;
color: # 8b5a00;
margin: 0;
padding: 15px 9px 8px;
text-decoration: none;
}
nav Li Li una, #nav Li Li a: link, #nav li li a: visited {
background: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x in alto;
width: 140px;
colore: #fff;
text-transform: capitalizzare;
float: none;
margin: 0;
padding: 10px 7px;
border-bottom: 1px solid # 855e42;
border-left: 1px solid # 855e42;
border-right: 1px solid # 855e42;
font: 12px Arial normale, Tahoma, Verdana;
}
nav li li a: hover, #nav Li Li a: active {
sfondo: #FFFFFF;
color: # 8b5a00;
padding: 10px 7px;
}
nav li {
float: left;
padding: 0;
}
nav li ul {
z-index: 9999;
position: absolute;
sinistra: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
nav Li dall'UL {
width: 140px;
}
nav li ul ul {
margin: 0 0 -32px 171px;
}
nav li: hover ul ul, #nav li: hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
sinistra: -999em;
}
nav li: hover ul, #nav Li Li: hover ul, #nav Li Li Li: hover ul, #nav li.sfhover ul, li #nav li.sfhover ul, #nav Li Li li.sfhover ul {
sinistra: auto;
}
nav li: hover, #nav li.sfhover {
Posizione: statica;
}
9 Trova il seguente codice HTML:
"/ B: section - / div"
Il modo più semplice per farlo è quello di premere il tasto "Ctrl" e "F" simultaneamente per aprire la funzione "Trova" del browser, quindi copiare e incollare: - ". Trovare" "/ b Sezione / div" e fare clic su
10 Copia e incolla il seguente codice sotto "/ b: section - / div":
<Div id = 'NavbarMenu'>
<Div id = 'NavbarMenuleft'>
<Ul id = 'nav'>
<Li> <a expr:href='data:blog.homepageUrl'> casa </a> </ li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEZIONE </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> SEZIONE & lt; / a> & lt; / li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div> <! - Fine barra di navigazione ->
11 Fai clic su "Anteprima" per vedere come appare, quindi fare clic su "Salva modello", se si guarda bene.