Menu horizontal acima dos posts

Hoje vou ensinar vocês a fazerem um menu igual o que eu tenho aqui, na horizontal e fica em cima dos posts. Ele tem um efeito hover bem bacana (passe o mouse lá por cima para ver). Antes de usa-lo, vamos instalar em seu html. Tutorial bem simples:

Para Instalar:


Painel > Design > Editar HTML. Seguindo esse caminho, você chegou no HTML do seu blog. Agora dê Ctrl+F e digite: ]]></b:skin>. Esse trecho ficará destacado dos demais. Agora, ACIMA dele, cole o código abaixo e faça suas alterações:
.menuhorizontal {
background:#ffffff; /*** cor do fundo ***/
float: left;
height:35px; /*** altura da aba ***/
width:140px; /*** largura da aba ***/
font-size: 13pt; /*** tamanho da fonte ***/
text-align: center; /*** posição do link ***/
margin: 9px; /*** espaço entre as abas ***/
margin-bottom: -20px; /*** distância entre menu e postagens ***/
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;

}
.menuhorizontal:hover {
background:#000000; /*** cor do fundo com mouse em cima ***/
float:left;
height:50px;
-webkit-border-top-left-radius: 13px;
-webkit-border-top-right-radius: 13px;
-moz-border-radius-topleft: 13px;
-moz-border-radius-topright: 13px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;}
O código já é auto-explicativo, é só ir lendo e personáliza-lo. Entendam as partes destacadas:

left: é a posição que ficará o menu, ou seja, se suas postagens ficam do lado esquerdo, pode deixar assim mesmo, mas se fica do lado direito, substituam left por right.
A parte em azul é o código das bordas redondinhas na parte de cima, se você quer que fiquem quadradas, é só apagar o trecho todo.
height:50px; esta parte é a que faz toda a "mágica" do efeito hover. Basta deixar o número pelo menos uns 15px maior do número que você colocou na altura da aba. Por exemplo, a minha aba tem 35px, então nessa parte eu colocarei 15 números maior (no exemplo, 50px). Caso não queira o efeito, é só apagar esse trecho.

Para Utilizar:

Painel > Design > Adicionar um Gadget > HTML/JavaScript. Deixe a parte "Título" em branco, e em "Conteúdo", cole o código abaixo:

<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>
<div class="menuhorizontal"><a href="LINK">TÍTULO</a></div>

Substitua LINK pelo endereço da página que você quer que apareça ali, e TÍTULO pelo nome da página. Lembre-se que cada linha dessa é uma aba no menu, por isso se você quiser adicionar mais uma aba, adicione mais uma linha, e assim sucessivamente.

Deu pra ver que não é tããão difícil, é só ir prestando atenção... Se usarem, comentem para eu ver como ficou, ok ? Espero que tenham gostado.
Beijinhos.

2 comentários:

  1. Bom dia!
    Adorei seu blog
    e esta super dica!
    Seguindo aqui!
    Retribui?
    Beijos!
    neiabenevides11.blogspot.com

    ResponderExcluir
  2. Oi, Vamos fazer afiliação?
    Beijos!
    http://neiabenevides11.blogspot.com

    ResponderExcluir

Obrigada por comentar *-*