Menu horizontal colorido para blog | Quero Dicas | Tutoriais para seu blogs


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, para saber, melhor, onde colocar o código
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
Clique na imagem para ampliá-la

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! Espero que tenham gostado!? Deixe seus comentários e em caso de dúvida é só Comentar! Beijinhos

Este código eu conheci a pouco tempo no site Attitude Included , dei algumas modificadas para que ficasse do jeitinho que eu queria e outras formas de adicioná-lo ao blog. Me Contrate!

1 comentários:

Clique e deixe seu comentários
domingo, 09 agosto, 2015 ×

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

A casa eh sua fez o primeiro comentário! Comente você também!
Resposta
avatar
admin


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.