11 de abril de 2014

Menu para sidebar super fofo.

No tutorial de hoje eu trouxe um menu para sidebar muito fofo com efeito veja a preview e vamos ao tutorial...
image preview
Em seu blog vá até modelo,editar HTML e aperte Ctrl+F juntos e procure por: ]]></b:skin>
exemplo

copie e cole o código abaixo acima dessa Tag como na imagem.

inicio/*menu por Liah - Cherry Bomb - credite sempre*/#menucb { 
float: left; 
display: line; 
margin:1px; 
background:#f2eee8; /*Cor de fundo */ 
width: 87px; /*Largura de cada link do menu */ 
height: 25px; 
text-align:center; 
font-size: 16px; /*Tamanho da fonte*/ 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
-moz-box-shadow: 1px 0px 9px #cccccc; 
-webkit-box-shadow: 1px 0px 9px #cccccc; 
box-shadow: 1px 0px 9px #cccccc; 
text-shadow: 0px 1px 5px #cccccc; 
-webkit-transition: color 0.7s ease-out;-moz-transition: 
color 0.7s ease-out;transition: color 0.7s ease-out; 

#menucb:hover { 
background: #cfd9f6; /* Cor de funo quando passa o mouse*/ 
color: #fff; /*Cor do texto quando passa o mouse*/ 
}
Vá até o layout do seu blog, adicione um gadget de HMTL/Javascript onde você quiser que o menu apareça e coloque esse código:
Repita ele para cada link que for colocar no menu e substitua a url e o nome do link. Depois é só salvar o Gadgets e pronto!
Obs:Para mudar as cores basta mudar os trechos que comecem com # tabela de cores aqui
salve as alterações.


<a href='LINK' id='menucb'>TÍTULO DO LINK</a>



Sobre a Autora:
Viviane Aos 31 anos Viviane é casada e mãe de três lindos filhos, blogueira nas horas vagas desde 2012 mais criou esse blog em Nov/2013 quando iniciou seu curso de Web Designer.Apaixonada por códigos Html e tudo que esteja relacionada a blogs e internet.

15 comentários:

  1. Adorei o menu, é super fofo ocupa pouco espaço é muito útil!

    Küsses

    Visite o Teens Forever :3 || Portfólio :3

    ResponderExcluir
    Respostas
    1. Também gosto muito pelo fato de não ocupar espaço alem de ser foficimo.
      Obrigada pela visita bjs.

      Excluir
  2. Olá Viviane já te coloquei nos meus afiliados e estou seguindo seu blog , se puder siga o meu também :) Lindo lay parabéns! Beijos

    ResponderExcluir
    Respostas
    1. Obrigada flor já estou te seguindo, e também já esta em meus afiliados,beijos e seja bem vinda

      Excluir
  3. Que bom que gostou,obrigada pela visita e volte sempre.
    Beijos

    ResponderExcluir
  4. Esse menu é muito fofo e fica lindo no blog.

    ResponderExcluir
  5. É verdade flor,também acho ele muito fofo.
    Obrigada pela visita kissus

    ResponderExcluir
  6. Muito fofo o menu!
    Seu blog é uma gracinha!
    Bjs
    http://pitacopnk.blogspot.com.br/

    ResponderExcluir
  7. Obrigada flor beijos e obrigada pela visita.

    ResponderExcluir
  8. Olá amei seu Blog....cheio de dicas mara!!!! Vim através do Agenda dos Blogs e já estou te seguindo. Bjoks

    ResponderExcluir
    Respostas
    1. Oi flor fico feliz que tenha gostado obrigada por seguir e pela visita.
      Beijos

      Excluir
  9. Seu blog é super lindo e suas dicas são incriveis parabéns !
    Beijos

    ResponderExcluir
  10. Amei esse tutorial ! Esse menu é mt fofo *-*
    Bjs da Mih,
    garotasdohtml.blogspot.com

    ResponderExcluir

Oi obrigada por sua visita,espero que tenha encontrado o que precisa.
E obrigada por comentar seu comentário é muito importante para o desenvolvimento do blog.

Design por Viviane Sonia/Dicas no Blog | Tecnologia do Blogger | Todos os direitos reservados ©2013