Tutorial Menu Cute

| |
Olá pessoal,hoje eu vim trazer um tutorial bem legal de um menu cute para vocês,peguei esse tutorial no blog Adolescente Nerd e fiz para mostrar um passo a passo para vocês,confiram :)
O menu vai ficar assim,para ver melhor entre no blog Teste que eu fiz (clique aqui)
Os:Não reparem no blog viu kkkk,não estou conseguindo alterar muita coisa por causa do código de erro e só estou fazendo o básico por HTML




Primeiro abra seu blog e vá em Modelo>Editar HTML
Procure por ]]></b:skin>
Como na imagem abaixo

Cole o código acima de ]]></b:skin>

/* Menu Miki Candy */


cute{

text-align:center;

font-size: 10px; /* Tamanho da fonte do menu */
background: #FFC0CB; /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: crosshair; /* cursor, troque tb por: help, normal etc ...*/
width: 45%; /* tamanho do menu
-webkit-transition-duration: .80s; /* efeito fade */
border:1px dashed #87CEEB; /* bordas */
color: #fff; /* cor da fonte quando passa o mouse */
}


cute:hover{
font-size: 10px; /* Tamanho da fonte do menu */
background: #ADD8E6; /* fundo do menu quando passa o mouse */
border:1px solid #FF69B4; /* bordas quando passa o mouse */
color: #fff; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
letter-spacing: 3px; /* espaço das letras hover */
}
.post-footer-line-1{
border-bottom: 1px dotted #ADD8E6; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-1{
border-bottom: 1px dotted #ADD8E6; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}
.post-footer-line-2{
border-bottom: 1px dotted #FFC0CB; /* Estilo da borda */
font-size:11px; /* Tamanho da fonte de letra */
}




































Agora salve as alterações
Vá em Layout>Adicionar Gadget
Use o que está bem abaixo do Cabeçalho para ter o menu abaixo do Cabeçalho.







Selecione o HTML/Java Script e cole o código abaixo nele
****É importante deixar o título em branco para evitar erros no menu****











<a href=" URL DA PAGINA "><cute>  NOME DA PAGINA </cute></a>

<a href=" URL DA PAGINA "><cute>  NOME DA PAGINA </cute></a>



<a href=" URL DA PAGINA "><cute>  NOME DA PAGINA </cute></a></div></div>
****Sempre que quiser adicionar uma aba nova,use <a href=" URL DA PAGINA "><cute>  NOME DA PAGINA </cute></a>




Agora vamos editar as partes em rosa.Em URL DA PAGINA você coloca o link dessa página,por exemplo,se quiser colocar a aba Início/Home,você coloca o link do seu blog.
Em NOME DA PAGINA é só colocar o nome da aba,no caso do exemplo,colocar Início ou Home
Depois de alterar todas as abas,coloque em Salvar.






E pronto,o Menu Cute do blog está feito,espero que tenha sido fácil,qualquer dúvida é só me chamar.
É um tanto fácil e um tanto complicado,mas vocês conseguem.
Beijos doces ^.^

Comente com o Facebook:

2 comentários:

  1. Oi, me ajuda. Meu blog é bem simples, e eu queria deixar ele mais bonito :D mas eu não consegui fazer esses passos, você pode me ajudar?

    ResponderExcluir
    Respostas
    1. Oi Monique,claro que eu ajudo,talvez você não veja essa mensagem,então vou tentar entrar em contato com você.
      Se vir a mensagem,me chama no face
      https://www.facebook.com/pages/Little-Wonders/641141336013319
      Ou no meu email nunesjennyfer1@gmail.com
      Beijos :D

      Excluir

Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar

Related Posts Plugin for WordPress, Blogger...
Tecnologia do Blogger
Edição e Design: Jennyfer Aguillar || Todos os direitos reservados © 2016