Image Map

Menu horizontal - Apenas um passo

|
Tumblr_lwbd1d4ebk1r87h2qo1_500_large
Hoje vou ensinar pra vocês como fazer um menu bem fácil e que não envolve CSS (Ou seja, é só um passo). Ele ficará assim:  
1- Vá até Design, Elementos de Página, adcione um Gadget HTML/Javascript e adcione o código abaixo:

<div style="text-align: center;"><span style='-moz-border-radius: 7px; background-color:#f781f3; padding: 5px 15px 5px 15px;'><a href="LINK 1 ">categoria 1</a></span> <span style='-moz-border-radius: 7px; background-color:#58acfa; padding:  5px 15px 5px 15px;'><a href="LINK 2">categoria 2</a></span> <span style='-moz-border-radius: 7px; background-color:#81f79f; padding: 5px 15px 5px 15px;'><a href=" LINK 3 ">categoria 3</a></span> <span style='-moz-border-radius: 7px; background-color:#f78181; padding: 5px 15px 5px 15px;'><a href=" LINK 4 ">categoria 4</a></span> <span style='-moz-border-radius: 7px; background-color:#f2f5a9; padding: 5px 15px 5px 15px;'><a href="LINK 5">categoria 5</a></span><br /><br /></div>

2- Para fazer as alterações no seu código siga a explicação abaixo:
moz-border-radius: 7px – É o efeito redondo do seu menu, você pode alterar o número para diminuir ou aumentar este efeito.
5px 15px 5px 15px É o tamanho de cada categoria do menu.
#f781f3 – Cor de cada categoria do menu.
Categoria – Altere para o nome de cada categoria de seu menu.
LINK – É o link de cada categoria do seu menu.
Se você quiser fazer alguma alteração siga os passos acima. Espero que vocês tenham gostado do post. Beijos. 

15 comentários:

Luh Siglindes disse...

aaah que menu lindo ! Super fofo *-* http://fashionscream.blogspot.com/

Agnes Arruda disse...

Desculpe o incidente com o background, o AP tá de cara nova, obrigada por ter sido sincera, não foi por mal. :/
E obrigada pelo menu! Adorei, ficou lindo lá no blog e funcionou super bem, viu? Parabéns, amei!

Beijão.

www.agnesplace.tk

Anônimo disse...

Meu blog tá participando do Blog vs Blog 2 , poderia ir nesse blog http://meninanerd.blogspot.com/ e na barra lateral tem uma enquete, poderia apertar CTRL + F e procurar por Saladadefrutasbr, e votar nele, por twitter, yahoo e orkut, tudo que vc tiver ? OBRIGADA MESMO

saladadefrutasbr.blogspot.com
Segue lá e avisa q eu vou retribuir

Anônimo disse...

O kind girl esta de volta. olha la bjão

http://blog-kindgirl.blogspot.com

Mandy disse...

Ah, que tudo! Sempre quis saber como se faz isso. Adorei, ainda por cima não precisa mexer com o HTML do blog ^^
http://papo-teen-mandydamas.blogspot.com/

LUANA ANDRADE disse...

mt dificil de fazer ! esse codigo é mt complicado :X

Sofia Mota disse...

Funciona super bem e é lindo ! Bjão, :*

Unknown disse...

Oi flor tudo bom?
Tudo que dá certo no blog, faço questão de agradecer! Muito obrigada.
Ficou lindo e editei bem do meu jeito.
Bejinhus :p

Unknown disse...

To usando.
sanduichedeassunto.blogspot.com

Gabriela C disse...

heey, tudo bem? bom eu tô usando esse menu no meu blog, e queria saber se tem como arredondar ele.. tem?

Anônimo disse...

Olá tudo bem? É a primeira vez que eu venho aqui em seu blog e to aprendendo muitas coisas e vou usar, mas a minha pergunta é, eu coloquei esse menu lá no meu blog, como faço para que ele tenha mais que 5 abas e fique essas a mais do lado das que ja tem e não embaixo? Se puder me ajudar agradeço.
Bjs

Unknown disse...

useei

Unknown disse...

como deixar ele centralizado o meu nao ficou veja: angelsofstardoll.blogspot;com

thaic. disse...

aqui os links nao funcionam por nada, ele só fica lá bonito, mas inutil ):

Unknown disse...

Olá!!! O menu ficou lindo mas tbm não sei fazer o link com o conteúdo!!!! Help!!!