Tutorial Menu Cute

Por - 13:00

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 ^.^

Share
Tweet
Pin
Share
Tags : , , ,

CONFIRA TAMBÉM ⬇

2 comentários

  1. Monique15 de março de 2015 às 00:19

    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. Jennyfer Aguillar15 de março de 2015 às 18:01

      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