12/07/2015

Menu simples para Blogger!



Procurando na internet algumas novidades para o Design Mania, encontrei um menu bem simples e de fácil instalação em seu blog então vamos lá, mão na massa! [PREVIEW]

1. Acesse: Modelo - Editar HTML. Com a página aberta procure por ]]></b:skin>, ou use Ctrl+f para ajudar. Quando encontrar coloque o seguinte código acima:

/* MENU SIMPLES
---------------------------------------------- */
.submenu{
width: 1000px;
border-top: 1px solid #bebebe;
border-bottom: 1px solid #bebebe;
margin: -30px 0 0 15px;
color: #dedede;
position: absolute;
}
.submenu li{ display: inline }
.submenu li a{
color: #9c9c9c;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
padding: 20px;
}
.submenu li a:hover{ color: #c9848f }
.status-msg-body{
background: #fff;
padding: 11px;
color: #333;
font-family: 'Roboto', sans-serif;
width: 735px;
margin-left: -35px;
}

COMPREENDENDO O CÓDIGO: Vermelho - largura total do menu / Laranja: Cor dos títulos normal / Azul - Tamanho da Fonte / Amarelo - Cor dos títulos Hover / Verde - Fonte dos títulos.

2. Depois procure por </header> ou use Ctrl+f para ajudar. Quando encontrar coloque o seguinte código acima:

<div class='submenu'>
<ul>
<li><a href='#'>Intercâmbio</a></li>|
          <li><a href='#'>Projetos</a></li>|
 <li><a href='#'>Música</a></li>|
 <li><a href='#'>Geek</a></li>|
          <li><a href='#'>Cinema</a></li>|
          <li><a href='#'>Moda</a></li>|
 <li><a href='#'>Livros</a></li>|
 <li><a href='#'>Séries</a></li>
</ul>
</div>

Para copiar os códigos desta postagem, selecione, puxe e solte no seu código fonte. Pronto, agora e só Salvar o Modelo, e não se esqueça de colocar seus links e títulos.

4 comentários:

LEIA ANTES DE COMENTAR

• Você pode comentar usando apenas seu Nome e Url. Não aceitamos anônimos, selecione a opção no menu suspenso "comentar como".

• Alguns comentários podem não ser aceitos, dependendo do cunho da mensagem. Seja gentil na blogosfera.

Obrigado por comentar. Sua visita e opinião são importantes. Volte sempre!

DESIGN E PROGRAMAÇÃO POR JOÃO VITOR M.A. • ALL RIGHTS RESERVED TO DESIGN MANIA • TECNOLOGIA BLOGGER