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