27 novembro 2011

Menu Simples - Horizontal

Bom gente eu poderia postar esse tutorial amanhã, mais uma leitora minha me pediu e sabe como eu sou? o quanto antes melhor né? então o tutorial é fácil basta prestar atenção, clique em leia mais para ver o tutorial.
São dois modelos desse menu que eu vou postar o primeiro é esse do meu..


Vá no seu (Design > Editar HTML) e proucure pela tag ]]></b:skin>, cole o código acima dela e salve.

/*** Menu simples blog-garotadescolada.blogspot.com ***/
.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:100px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}
.menusimples:hover {
background-color:#FFD7EB; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}

adc um Gadget (HTML/Javascript) encima da área das postagens, ou embaixo do cabeçalho. e cole o código fazendo as devidas alterações que se pede abaixo:

<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>

caso não queira as bordas arredondadas tire as  linhas que estão destacadas em azul.

se você quiser esse menu: 


acrescente esse código e salve antes da tag  ]]></b:skin> e salve.

/*---Menu simples blog-garotadescolada.blogspot.com ---*/
bdg {
font-family: tahoma; /* Fonte do Menu */width: 17%; /* Tamanho do Menu */float: left;
background: #8C99F0; /* Cor do fundo do Menu */padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 0px 9px 0px; /* Pontas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */}
 bdg:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */width: 17%; /* Tamanho do Menu quando passa o mouse */float: left;
background: #88BBF4; /* Cor do fundo do Menu quando passa o mouse */padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */color: #fff; /* Cor da fonte do Menu quando passa o mouse */}

adc um Gadget (HTML/Javascript) encima da área das postagens, ou embaixo do cabeçalho. e cole o código fazendo as devidas alterações que se pede abaixo:

<a href="Url do Link"><bdg>Nome do link</bdg></a>
<a href="Url do Link"><bdg>Nome do link</bdg></a>
<a href="Url do Link"><bdg>Nome do link</bdg></a>
<a href="Url do Link"><bdg>Nome do link</bdg></a>
<a href="Url do Link"><bdg>Nome do link</bdg></a>
se gostarem e utilizarem comentem aqui beijos. *-
Comentários
9 Comentários

9 comentários:

  1. Oi não consegui fazer!
    você pode fazer para mim? será que é pedir d+?
    beijos!

    ResponderExcluir
  2. Ótimo tutorial :D eu adorei
    visita?
    http://conversando-com-a-lua.blogspot.com/

    aa e poderia te pedir um favor? ^^
    poderia votar no meu blog (conversando com a lua) neste blog:
    http://ianapaulinhaaaa.blogspot.com/2011/11/comecaram-as-votacoes-corre.html#comment-form

    Agradeceria muito muito se votasse :D

    ResponderExcluir
  3. Adorei o tuto ^^
    Obrigada pela visita, <3
    Tem post novo no blog , amr.
    Beijos,
    Tendências Teens || Curta-nos no facebook!

    ResponderExcluir
  4. aa eu ja tinha visto um monte de gente com esse menu mas não sabia fazer!
    Obg por ensinar *----*

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  5. Desculpa estar sempre pedindo um tutorial mas
    como você fez aqui com a C-box?
    beijos
    http://www.manahatori-teengirls.blogspot.com/

    ResponderExcluir
  6. SEGUE ? COMENTA ?
    thethingsofmoda.blogspot.com

    ResponderExcluir
  7. ótimo tutorial ^^ acho que vou usar lá no meu blog ! Seu blog é super lindo rs e o lay de Natal tá muito fofo ^^

    Adoraria uma visita sua lá no meu blog, beijos

    http://delicadas-blog.blogspot.com/

    ResponderExcluir
  8. To usando viu linda?

    www.girlycute.blogspot.com.br

    ResponderExcluir
  9. Super fofo estou usando o 2°

    http://meninasensivelgirls.blogspot.com.br/

    ResponderExcluir

- Fique a vontade para comentar, mas seja sempre educado(a)
- Seu comentário precisa ser relacionado com o assunto do post, caso não seja use a Cbox AQUI :)
- Não falar palavrões e não ficar criticando.
- Se for dar sugestões que seja para a melhoria do blog.
- Quer Parceria? então siga meu blog e coloque meu banner e me avise.
- Deixe a URL do seu blog para que eu possa retribuir.
- Não precisa pedir pra seguir que eu vou.
- ah e Não participo de concursos,e tags NÃO INSISTA!