Os menus estão super na moda nos blogs. Hoje estava procurando alguns e achei super legal eu fazer esse post para vocês usarem. Vamos logo que o post é grande!
Cute Menu
Vá no seu HTML e procure por:
]]></b:skin>
Alterações:/*Cute Menu -----------------------------------*/ #menuextra{ display: block; font-size: 11px; letter-spacing: 0; border-bottom: 1px dashed #CDB7B5; background-repeat: no-repeat; text-indent: 5px; vertical align : middle; text-decoration: none; line-height: 15px; margin-bottom: 1px; background : url('URL DO MINI GIF 1') no-repeat left; padding-left: 10px; } #menuextra:hover{ display:block; text-decoration: none; vertical-align: middle; line-height: 15px; border-bottom: 1px dashed #FF69B4; background : url('URL DO MINI GIF 2') no-repeat left; padding-left: 10px; }
Onde está 'URL DO MINI GIF 1' você põe a URL no mini gif que ira aparecer quando o mouse não estiver em cima.
Onde está 'URL DO MINI GIF 2' é o mini gif que irá aparecer quando o mouse estiver em cima (efeito hover).
Cores:
#CDB7B5 é a cor do pontilhado quando o mouse não estiver no link.
#FF69B4 é a cor do pontilhado quando o mouse estiver no link.
Depois de fazer ás alterações salve o modelo.
Depois, vá em Layout, adicione um gadget de HTML e cole o seguinte código:
Visualize e se estiver tudo certo salve.<div id="menuextra"><a href="Link">Nome do link</a></div><div id="menuextra"><a href="Link">Nome do link</a></div>
Créditos: Sweet Poison
Mais menus:
...............................................................................................................................................
Menu Miki Candy (igual o do FT)
Vá no seu HTML e procure por:
]]></b:skin>
Acima dessa tag (todo o tutorial faz isso?! kk) cole:
/* 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 */}No próprio código tem ás alterações necessárias. Quando acabar de alterar tudo salve o modelo.
Depois de salvar, vá em Layout, adicione um gadget de HTML e cole:
<a href="URL DA PAGINA"><cute> NOME DA PAGINA</cute></a>Faça ás alterações e salve :)
<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>
Créditos: Promised Land (antigo Sweet Mulberry) e Miki Candy.
...............................................................................................................................................
Menu Spazio com efeito hover
Vá em design, editar HTML e procure por:
]]></b:skin>
(sim, de novo!)
Acima desse código cole:
/* MENU SPAZIO DM */Depois das alterações, vá em Layout, adicione um gadget de HTML e nele cole:.menu {background: url(URL DA IMAGEM) no-repeat; /*imagem do fundo normal*/float:left; /*posicionamento*/font-family:Courier; /*fonte da letra*/color: #XXXXXX; /*cor da letra*/font-size: 10pt; /*tamanho da fonte*/width:98px; /*largura da imagem*/text-align: center;margin: 3px;line-height:25px;margin-bottom: 1px;}.menu:hover {background: url(URL DA IMAGEM)no-repeat; /*imagem de fundo hover*/font-family: Courier; /*fonte hover*/color: transparent; /*cor da letra hover*/float:left; /*posicionamento*/}
<div class="menu"><a href="URL PARA REDIMENCIONAR">TÍTULO</a>A cada link que você for adicionar cole esse código.
Bom gente, foi isso.
Beijos!
ameii vc poderia fazer bases para cabeçalhos,beijinhos
ResponderExcluirOwnnnt '
ResponderExcluirSimplesmente lindo seu blog, ameeeeei , tudo muito bem organizado, dahora (:
Seguindo aqui viu, dá uma passadinha ?
Nós no Pc >CLIQUE<
Nós no Computador >CLIQUE<
Beijão !
Adorei seu tutorial e Seu blog e lindo!
ResponderExcluirvisita ->
www.blogajudinha.blogspot.com.br
Drica
ResponderExcluirN gostei, estas pessoas dizem que gostam, mas n gostam de certeza, porque este blog é uma merda,e o meu blog é muito melhor sua burra papocinderela.blogspot.com
vc sabe mais ou menos onde se encontra esse ]]> ??
ResponderExcluirAdorei os menus são lindissimos :P
ResponderExcluirminhas-confissoes-2012.blogspot.com