16 setembro 2014

Menu horizontal colorido para blog


Dando continuidade aos tutoriais de como personalizar seu blog, hoje você irá aprender como colocar um menu horizontal simples colorido. Claro, se você quiser pode deixá-lo com uma cor única. Vai da sua imaginação e preferência.

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


Veja na imagem como ficará:


Código do Menu


1 - Copie o código abaixo e o coloque em um bloco de notas.

 
<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.

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 " " (aspas). 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! Gostou? Comente!
Beijinhos


Este código pertence ao Attitude Included , fiz somente algumas modificações.

Um comentário:

  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



Agregadores