Vamos ver como colocar um menu horizontal no seu blog.Então vamos lá.
Entra em Design--->editar HTMl
Procure por:
<div id='header-wrapper'>
</div>
Adicione logo depois:
<div id='front_menu'>
<li><a class='s' href='URL DO SEU BLOG' title='Início'><span>Início</span></a></li>
<li><a class='s' href='#' title='Sobre'><span>Sobre</span></a></li>
<li><a class='s' href='#' title='Vídeos'><span>Vídeos</span></a></li>
<li><a class='s' href='#' title='Contato'><span>Contato</span></a></li>
</div>
Agora você pode editar o conteúdo do meu depois vamos adicionar o estilo.
Para editar o menu é bem fácil onde esta URL DO SEU BLOG você coloca a URL do seu blog.Onde esta # você deve trocar pelos links dos nomes (Sobre, Vídeos…)
Se você não quiser alguma das opções é só apagar de <li> a </li>. E para adicionar mais uma opção, é só duplicar uma das opções e editar o conteúdo.
Vomos colocar o estilo do menu agora devemos procura por: (CRTL+F) ]]></b:skin>
Adicione ANTES desse código, o seguinte CSS:
#front_menu {
float:left;
overflow:hidden;
position:relative;
text-transform:uppercase;
width: 100%;
background: #c1c1c1;
}
#front_menu li {
float:left;
padding: 5px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-right:4px;
}
* html #front_menu li {
display:inline;
}#front_menu li a {
background:transparent;
color:#0960a3;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size: 12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:700;
line-height:26px;
padding-left:15px;
text-decoration:none;
}
#front_menu li a span {
background:transparent ;
display:block;
line-height:24px;
padding-right:15px;
}
#front_menu a {}
#front_menu a:hover{
color: #489ddf;
background-position:left bottom;
}
#front_menu li a.s {
background-position:left bottom;
}
#front_menu li a:hover span, #front_menu li a.s span {
background-position:right bottom;
}
No estilo: #front_menu { você vai editar o fundo do menu, no lugar de background adicione o código da cor desejada, ou adicione uma imagem. Para substituir a cor por uma imagem use:
background: CÓDIGO COR url() no-repeat;
ou
background: url() repeat;
Leia mais sobre como colocar uma imagem com CSS clicando aqui.
No estilo: #front_menu li a { faça as mudanças nas letras, cores, tudo sobre a parte escrita do menu.
Lembrando:
color:#0960a3; é a cor da letra.
As outras mudanças depende do gosto de cada um, seja curioso, apague, modifique e aprenda o que cada coisa significa.
Apos fazer as modificações, teste e salve.
Obs.: Você pode adicionar outro tipo de menu, existe vários e vários sites que trabalham só com menu CSS, procure no Google por "Menu CSS". Se quiser uma dica: CSS Menu Maker, um ótimo gerador de menu. Lembre-se de hospedar as imagens do menu e substituir onde necessário no CSS do menu.
Comete aqui tambem!