05 agosto 2012

Tutoriais: 3 Menus fofos para blog

Tumblr_m8a4wnvax91rzxnwvo1_500_large
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>

/*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; }
Alterações:
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:
<div id="menuextra"><a href="Link">Nome do link</a>
</div>
<div id="menuextra"><a href="Link">Nome do link</a></div>
Visualize e se estiver tudo certo salve.
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>
<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>
Faça ás alterações e salve :)
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 */
.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*/}
Depois das alterações, vá em Layout, adicione um gadget de HTML e nele cole:
<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!





















6 comentários :

  1. ameii vc poderia fazer bases para cabeçalhos,beijinhos

    ResponderExcluir
  2. Ownnnt '
    Simplesmente 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 !

    ResponderExcluir
  3. Adorei seu tutorial e Seu blog e lindo!
    visita ->
    www.blogajudinha.blogspot.com.br

    ResponderExcluir
  4. Drica
    N 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

    ResponderExcluir
  5. vc sabe mais ou menos onde se encontra esse ]]> ??

    ResponderExcluir
  6. Adorei os menus são lindissimos :P
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir

Comentários anônimos são aceitos apenas para elogios ou perguntas;
Deixe o link do seu blog para eu retribuir seu comentário;