MENU HORIZONTAL (I)

Você quer colocar um menu horizontal no seu blog? Mas acha que é muito complicado, então se acalme que não tem nada de difícil!
Se você quiser um menu sem imagem, ou com uma imagem contínua (diferente do meu que são como abas) eu recomendo o site da Ariane (my teacher). Aqui eu vou explicar como fazer um tipo esse meu! É bem simples, vamos lá!

Esse menu é feito a partir de um site (http://www.cssmenumaker.com/), lá você encontrará vários tipos de menus, só que agora o site é pago (quando eu fiz não era), então vou ensinar tudo por aqui mesmo!

1º Passo

Baixe as imagens e as hospede no site de sua preferência.

Download!

OBS: Se você quiser mudar as cores da sua imagem ou algo assim, não hospede as imagens! Vá para a PARTE III! Os códigos do menu estarão com as cores que uso aqui, só para testar, ok?

2º Passo

Entre no editor de html do seu blog e procure por essa parte do código. (Não sabe como procurar um código, clique AQUI!)

Copie o código em vermelho, cole depois de HEADER e antes de OUTER, como indicado :

* Header
-----------------------------------------------
*/

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
width:900px;
height:140px;
border: 0px
dashed $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header .description {
margin:0 5px
5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide:
auto;
margin-$endSide: auto;
}

/* Menu
-----------------------------------------------
*/
#menu {
float:left;
width:100%;
background:$bgcolor;
font-size:93%;
line-height:normal;
border-bottom:1px solid #000000;
}
#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menufino-1.jpg) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url(http://i2.photobucket.com/albums/y27/fadasanguinaria/menu-1.jpg) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#000000;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;

3º Passo

Copie o código vermelho antes de content-wrapper (se você quiser ele depois de header, como está o meu), como indicado:

<div id='menu'>
<ul>
<li><a href='SEU BLOG AQUI'><span>Home</span></a></li>
<li><a href='http://criarecria.blogspot.com/'><span>Recomendo</span></a></li>
<li><a href='SEU LINK AQUI'><span>LINK</span></a></li>
<li><a href='SEU LINK AQUI'><span>LINK</span></a></li>
</ul>
</div>

<div id="'content-wrapper'">

Atenção: Se quiser por o código antes de HEADER, cole o que está em vermelho log acima de

<div id='header-wrapper'>

4º Passo

Visualize. Deu certo?
Se sim é hora de começar a mexer no código para personalizar.

Como esse post já está para lá de extenso vou separá-lo em 3 partes! Sendo essa a primeira, a SEGUNDA a personalização do link e os detalhes do menu, e a TERCEIRA a imagem do menu!
Escolha o que quer fazer agora e vamos continuar!

Não deu certo!? Limpe as edições e tente de novo, se continuar não conseguindo, me avise que eu tento te ajudar, ok?