10 setembro 2011

Como fazer um Menu Cute

Hey! Quem mexe em HTML de tumblr ou tem uma noção sobre isto, sabe que vários tutoriais de tumblr funciona no blogger, basta saber onde colocar o codigo no blogger *-*
Eu já tentei colocar este menu cute no blog, só que eu não conseguia, de algum jeito dava erro. Hoje, visitando o tumblr Desings Forever, encontrei um menu e resolvir testar no meu blog de testes e deu certo.
Para visualizar o menu clique aqui.
Meu menu ficou assim

Fica muito fofo e é bem fácil de colocar no blog e modifica-lo. Vamos aprender? *o*
Aperte Ctrl+F e escreva

]]></b:skin>
Acima desta tag coloque a primeira parte do codigo que é quando o menu esta estatico

.menucute {
margin-bottom: 1px;
display: block;
padding-bottom : 2px;
font-size: 10px; /*** Tamanho da fonte **/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee; /*** Cor e estilo da linha **/
vertical-align: middle;
text-indent:5px;
text-indent: 5px;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/044.gif')no-repeat left; /*** url do seu mini gif ***/
background-repeat: no-repeat;
padding-left: 10px;
text-decoration: none;}
Agora coloque em seguida este codigo que é quando o mouse esta em cima do menu

.menucute:hover {
margin-bottom: 1px;
display: block;
font-size: 10px;  /*** Tamanho da sua fonte quando o mouse esta em cima ***/
font-family: verdana;
letter-spacing: 0;
line-height: 15px;
border-bottom: 1px solid #eee;  /***Cor e estilo de linha quando o mouse esta em cima ***/
text-indent: 5px;
vertical-align: middle;
background: url('http://drikoti.net/Goodies/Favicons/Gifs/022.gif')no-repeat left; /*** url do mini gif quando o mouse esta em cima ***/
background-repeat: no-repeat;
padding-left: 10px;
text-indent: 5px;
text-decoration: none;
padding-bottom: 2px;}
 Explicando o que esta em vermelho
1 px é a espessura da linha que fica em baixo
Solid é a borda que no caso é a solida, a 'reta', a 'normal'
#eee; é a cor da linha
Tipos de borda: 
Existem algumas bordas, mas as mais conhecidas são a Solid é a borda sólida. Se você quiser pontilhada, use dotted. Se quiser tracejada, use dashed. E se quiser dois traços sólidos, use double (O valor pra ficar dois traços precisa ser a partir de 3px)
Alguns mini gifs você pode encontrar aquiaquiaqui.
Tabela de cores aqui
Obs: Não se esqueça de apagar o que esta em lilas ok?! *-*

Como colocar no blog?
Até agora você colocou o codigo no HTML do seu blog. Para que funcione você vai em design e adiciona um gadget HTML/Java Script
Se você quiser que o menu seja em link coloque este codigo:
<div class="menucute"> <a href="LINK_AQUI">TITULO </a></div>
Se você apenas quiser  apenas escrever alguma coisa coloque:
<div class="menucute"> ESCREVA_AQUI</div>
Se quiser mais links só ir repetindo o codigo morzim *-*

Creditos: 
[www] Explicação dos tipos de borda e imagem
[www] Tutorial do menu
 Espero que tenham gostado *---*
Duvidas?
Bezôôs,
Erica Judd



15 comentários:

  1. Ótimo tutorial ^^

    www.theatrevidos.blogspot.com

    ResponderExcluir
  2. oi me ajuda? sab esse menu de páginas? então, por nada desse mundo eu consigo colocar no meu blog. faço o tuto do place femme, attitude included mas nada dá certo. me ajude? bjs
    TDiaryofteens.blogspot.com

    ResponderExcluir
  3. Fica lindo, pena que eu não sei mexer muito bem nessas coisas.
    Adorei seu Blog. Lindo.
    Beijos
    http://www.umconjuntoumasolucao.blogspot.com

    ResponderExcluir
  4. Tutorial super útil, amei *-* Design do blog lindo, parabéns ^^

    http://comoumrefugio.blogspot.com/

    ResponderExcluir
  5. Adooooro esses menus, são uma graça.

    Beijos,
    http://placefame.blogspot.com/

    ResponderExcluir
  6. Oi, participa ou divulga? http://miss-scd.blogspot.com/2011/09/promocao-make-me-up.html Beijos :*

    ResponderExcluir
  7. OMG! que bloguinho organizado ! Tão lindo! E agradeço por deixar sua opinião no VCB. BJS

    ResponderExcluir
  8. Oi!

    Amei esta dica de tutorial! Eu gosto de ler e aprender estas coisas bacaninhas para blogs!

    Olha, estou seguindo o seu blog, se quiser me visitar e seguir, ficaria muito feliz!

    Bjs e sucesso pra você!!!

    Claudia Paiva (Anunciando e Reciclando)

    http://vendertrocar.blogspot.com

    ResponderExcluir
  9. Querida, poderia me explicar que layout é esse que as meninas do Lookbook usam? Vai lá:
    http://www.umconjuntoumasolucao.blogspot.com
    Beijos e obrigada *-*

    ResponderExcluir
  10. Que bacana , tinha visto um tutorial desse no blog do Jeff (acleticus) mas esse está bem explicadinho *-* . Já salvei nos favoritos pra usar no próximo layout *o*
    Ei flor, estou realizando um sorteio de lindos esmaltes a sua escolha, que se encerrará logo quando o blog alcançar a meta de mil seguidores, falta pouco, então corra! Se não quiser para você, pode presentear uma amiga, sem contar que tem muitas chances simples que lhe dão muito mais inscrições! Não é demais?!
    Link do sorteio: http://blog-mundo-da-moda.blogspot.com/2011/09/sorteio-de-esmaltes-ludurana-em.html

    Beijinhos!!
    http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  11. Adorei seu blog, estou seguindo! Seus posts são ótimos *-* Amor, você faz layout? É que eu tava querendo um parecido com o seu, é muito lindo :$ Dá uma passadinha no meu blog, se você gostar, segue por favor! Beijos, Dani.

    http://onthefame.blogspot.com

    ResponderExcluir
  12. Adorei o menu, acho que vou colocar lá no blog.
    Tem post novo. Comenta?
    Girl Teen

    ResponderExcluir
  13. Amei o tuto amr...
    Beijos ;*
    Novo post comenta?? www.diamontlilac-news.blogspot.com

    ResponderExcluir
  14. Querida,eu fiz tudo certinho no meu blog mas o menu fica normal sem nenhum efeito,me ajude
    Beijos
    www.maah-sweetkiss.blogspot.com

    ResponderExcluir
  15. ain, muito obrigadaaaaaaaaaaaaaaaaaaaaaaaaaa, muito obrigada mesmo, eu sempre entava fazer aaqui mas nunca dava certo tbm, mas agr deu *-*
    brigada s2' *--------*
    thingsteen-oficial.blogspot.com

    ResponderExcluir

Muito obrigada pelo comentário leitor, ele é muito importante *---*