Menu horizontal colorido para blog | Quero Dicas Quero Dicas : Menu horizontal colorido para blog

Quero Dicas : Menu horizontal colorido para blog

Menu horizontal colorido para blog

|


Dando continuidade ao tutorial para personalizar seu blog ou site, hoje nós vamos aprender como colocar um menu horizontal bem colorido.

Claro, se você quiser você pode deixá-lo sem cor ou colocá-lo com uma única cor, vai da sua imaginação.

Vou ensinar 3 formas de colocá-lo dentro do seu template e ao final como personalizá-lo.

Veja na imagem como poderá ficar

    Código do Menu


1 - Copie o código abaixo e o coloque onde desejar.

 
<div style="text-align: CENTER;" >
<span style='-moz-border-radius: 10px; background-color: #FF6666; font-size: 18px; padding: 10px 20px 10px 20px;'><a href="LINK DO MENU ">MENU 1</a></span> 
<span style='-moz-border-radius: 10px; background-color: #009900; font-size: 18px; padding: 10px 15px 10px 15px;'><a href="LINK DO MENU">MENU 2</a></span> 
<span style='-moz-border-radius: 10px; background-color: #FF6600; font-size: 18px; padding: 10px 15px 10px 15px;'><a href="LINK DO MENU ">MENU 3</a></span> 
<span style='-moz-border-radius: 10px; background-color:#f78181; font-size: 18px; padding: 10px 15px 10px 15px;'><a href="LINK DO MENU ">MENU 4</a></span> 
<span style='-moz-border-radius: 10px; background-color:#CC6600 ; font-size: 18px; padding: 10px 15px 10px 15px;'><a href="LINK DO MENU ">MENU 5</a></span>
<br /><br /></div>



    Instalando o Menu



DICA 1 - Adicionando Gadget
Este é o jeito mais fácil e simples. (forma original)

Acesse o seu blog. Vá em "Layout", "Adicionar Gadget", "HTML/javaScript" e cole o código.
Pronto! agora é só fazer as modificações necessárias que está ao final da postagem.

DICA 2 - Acima do título 

1 - Acesse o HTML do seu blog e procure pelo código

 <div class='titlewrapper'>

2 - Abaixo dele, cole o código do menu, salve e pronto!

 Agora é só personalizar. Veja como personalizar no final da postagem.

Veja a imagem
Clique na imagem para ampliá-la
DICA 3 - Abaixo da Descrição
Dica: Para que fique bonito em seu template, não utilize as suas página "exclua".

1 - Acesse o HTML do seu blog e procure por:

 <b:include name='description'/>
 

2 - Você encontrará 4 iguais. Coloque o código do menu, abaixo do último encontrado (o 4 º)

Veja a imagem

3 - Salve! Agora é só personalizar.


    Personalizando o código


Agora chegou a hora de personalizar o nosso menu. É fácil, mais preste atenção!
Deixei o código bem separado para você não se perca. :)
As cores aqui mostradas em vermelho, serão as que você irá trocar no seu código.

Posição - Se quiser, troque CENTER (centralizado) por RIGHT (direita) ou LEFT (esquerda)

Cor - Cada "caixinha" do menu são 5 cores diferentes. troque "background-color: #FF6666 ;"pela cor que mais combine com seu template.
Tabela de cores - ufpa

Tamanho da fonte - Troque "font-size: 18px,"pelo tamanho que mais lhe agrade. Cuidado para não ficar exagerado.

Tamanho da caixa - Altere "padding: 10px 20px 10px 20px", como mais gostar.

Link - Onde está escrito "LINK DO MENU" será a o endereço da sua página ou marcador. Coloque o endereço dentro das " ". Troque o nome de menu pelo que mais convêm.
Exemplo: <a href="LINK DO MENU  "> MENU 3 </a>

ATENÇÃO
A cor dos links quando normal ou houver, você terá que trocar em "personalizar" e "avançado" do seu blog. Assim como também o tipo de fonte que deseja. Veja nas imagens.



Prontinho! 
Beijinhos


Este código pertence ao Attitude Included , fiz algumas modificações para adicioná-lo ao blog.

Compartilhe


Um comentário:


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥

  1. Ótimo tutorial e sem alterar código HTML, parabéns. Fiz lá no meu blog: www.acasaehsua.com.br. Obrigada!

    ResponderExcluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir