Browse By

Menu Horizontal no Blogger

Anúncios

Antes de nós começarmos, como sempre eu faço, recomendo fazer o backup do template do Blogger. Agora sim, podemos prosseguir com o nosso tutorial.

1. Entre no painel do Blogger, vá em Layout -> Editar HTML, e procure por ]]></b:skin> e abaixo desse código adicione:

#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background-color:#FFFFFF
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #000000;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

#navigation .selected,#navigation a:hover{
background:#000000;
color:#FFFFFF;
text-decoration:none;
}

2. Para adicionar o menu abaixo do cabeçalho, adicione antes de:

<div id=’header-wrapper’>

Este código:

<div id=’navigation’><b:section class=’navigation’ id=’navigation’ showaddelement=’yes’></b:section></div>

Salve as modificações. Agora vá em Layout -> Elementos de página, e veja se é possível adicionar um novo elemento abaixo do cabeçalho, se for possível, adicione o elemento lista de links e é só adicionar seus links.