Barra de Funções no Topo do Blog 2

girl, hipster, indie, menina

Olá amores, tudo bem? Hoje vou ensinar mais um modo de criar aquela barra de funções no blogger, que vocês podem encontrar em alguns sites como CAPRICHO, R7, TodaTeen entre outros. Espero que gostem! Clique em Leia Mais para conferir!


O menu deve ficar igual a esse (se você não alterar o código):


Vá em Modelo > Editar HTML

Cole o código abaixo, ACIMA da tag ]]></b:skin>:

#navtop {
background:#df005a; /* -- Cor de Fundo -- */
height: 35px; /* -- Altura -- */
width: 100%; /* -- Largura: Todo o Painel -- */
margin: 0 auto 24px auto; /* -- Margem -- */
font-family: Arial;  /* -- Fonte -- */
text-decoration:none; /* -- Decoração do Link: Nenhuma -- */
font-weight: bold; /* -- Negrito -- */
color:#fffff; /* -- Cor da Fonte -- */
font-size: 12px; /* -- Tamanho da Fonte -- */
z-index:2000; /* -- Não Altere -- */
position:fixed; /* -- Não Altere -- */
top:0; /* -- Não Altere -- */
left:0;  /* -- Não Altere -- */
}
.nav {
width: 950px; /* -- Tamanho da Área Onde Fica a Barra -- */
margin: auto;
}
#navtop img {
margin-left:30px; /* -- Margem Esquerda da Imagem -- */
display: inline; /* -- Não Altere -- */
float:left; /* -- Não Altere -- */
margin-top: -7px; /* -- Margem do Topo -- */
}
#navtop img a {
margin: 12px; /* -- Não Altere -- */
display: inline; /* -- Não Altere -- */
}
#jumpMenu2 {
display: inline; /* -- Não Altere -- */
margin-top: -4px; /* -- Margem do Topo -- */
margin-left: 8px; /* -- Margem Esquerda -- */
}
#jumpMenu2form {
line-height:25px; /* -- Não Altere -- */
float:right; /* -- Não Altere -- */
margin: 0px; /* -- Não Altere -- */
padding: 0px; /* -- Não Altere -- */
}
ul.navtop {
padding: 0px; /* -- Não Altere -- */
}
ul.navtop li {
list-style: none; /* -- Não Altere -- */
display: inline;/* -- Não Altere -- */
}
ul.navtop li a {
color: #ffffff; /* -- Cor do Link Normal -- */
display: block; /* -- Não Altere -- */
float: left; /* -- Não Altere -- */
margin-right: 3px; /* -- Não Altere -- */
text-decoration: none; /* -- Não Altere -- */
}
ul.navtop li a {
color: #ffffff; /* -- Cor do Link Normal -- */
display: block; /* -- Não Altere -- */
float: left; /* -- Não Altere -- */
padding-left: 7px; /* -- Não Altere -- */
margin-right: 3px; /* -- Não Altere -- */
text-decoration: none; /* -- Decoração do Link: Nenhuma -- */
}
ul.navtop li a:hover {
color: #fff5b4; /* -- Cor do Link com o Mouse em Cima -- */
text-decoration: none;  /* -- Decoração do Link: Nenhuma -- */
}
ul.navtop li ul {
float:left; /* -- Não Altere -- */
margin:0; /* -- Não Altere -- */
padding:0; /* -- Não Altere -- */
}
.search{
line-height:25px; /* -- Não Altere -- */
float:right; /* -- Não Altere -- */
font-family: arial; /* -- Fonte -- */
display: inline; /* -- Não Altere -- */
margin-top: -6px; /* -- Margem do Topo -- */
}
.searchbar{
height: 20px; /* -- Altura da Barra -- */
width: 140px; /* -- Largura da Barra -- */
color: #ff0066; /* -- Cor da Fonte -- */
background: #FFF; /* -- Cor de Fundo da Barrinha -- */
border: none; /* -- Não Altere -- */
}
.searchbut{
width:75px; /* -- Largura do Botão -- */
height:21px; /* -- Altura do Botão -- */
border: 0; /* -- Não Altere -- */
background: #8B2252; /* -- Fundo do Botão -- */
color: #fff; /* -- Cor da Fonte do Botão -- */
font-weight: bold; /* -- Negrito -- */
}

Certo? Agora   SALVE   as alterações e  procure por: <head> e acima, cole o seguinte código:


<div id='navtop'>
<div class='nav'>
<div id='navtop-img'>
<a href='URL_DO_BLOG_AQUI'><img src='URL_DA_IMAGEM_AQUI'/></a>
</div>
<ul class='navtop'>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
</ul>
<select id='jumpMenu2' name='jumpMenu2' onchange='window.open(this.value)' style='font-size:10px;'>
<option>Outros Categorias (Seu Blog)</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
</select>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' type='text' value=''/>
<input class='searchbut' type='submit' value='Pesquise'/>
</form>
</div>
</div>

Pronto? Clique em  SALVAR  e pronto! Veja se está tudo certo!

A primeira lista de links são as dos links normais do menu. A segunda lista de links é a do menu suspenso. Espero que tenham conseguido fazer e gostado do resultado ;D

PROÍBIDO REBLOGAR