06 janeiro 2014

Menu para Tags

| |
Oi... Confesso que depois de ficar esse tempo todo fora dá até um pouco de vergonha de voltar. Caso queira saber, fiquei fora por que minha internet caiu. Mas, pelo menos, eu acabei aprendendo bastante coisas no PS enquanto fuçava.

Mudando o assunto, me pediram na minha nova ask para ensinar a fazer um menu para tags que tem no meu blog de teste. Eu nem pretendia posta-lo aqui, mas como foi pedido eu mudei de ideia.

#Preview (Tags #3)


1 • No HTML do seu blog, aperte F3 e procure por ]]>< e acima cole:
#menu-tags-dois-isa {
color: white;
background-color: #COR DO FUNDO;
text-shadow: 2px 1px 1px #COR DA SOMBRA;
font-family: 'arma five';
font-size: 8px;
padding: 1px;
margin-bottom: 1px;
border: 1px solid #COR DA BORDA;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
#menu-tags-dois-isa:hover {
text-shadow: 2px 1px 1px #COR DA SOMBRA HOVER;
border: 1px solid #COR DA BORDA HOVER;
-moz-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-webkit-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-o-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-ie-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;}
@font-face {font-family: "Arma Five"; src: url('http://static.tumblr.com/bsalulu/qxQmmc6lm/pf_arma_five.ttf');}
.lado-esquerdo {float: left; width: 49%; text-align: center;}
.lado-direito {float: right; width: 49%; text-align: center;}

Depois de visualizar, salve.

2 • Vá em Layout e Adicione um gadget • HTML/JavaScript e cole:
<div class='lado-esquerdo'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
<div class='lado-direito'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
Mude o que se pede e depois é só salvar.

••• ♥ •••
Espero que tenham gostado...
Beijos ;*

10 comentários:

  1. Você tem tantos menus e efeitos lindos <3 Adorei o de hoje.

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
  2. Gostei do Menu,visita e segue fofa?

    Beijos de chocolate >3<
    XOXO I IAdolescente Kawaii

    ResponderExcluir
  3. Ameei o menu, acho que vou usar!
    Amei o blog também, ah e flor, teria como você ensinar a colocar aqueles negocinhos tipo oque estão ali embaixo, o que tem várias fotos de garotas...?(não sei o nome :/)
    Quero muito aprender, mas como não sei o nome, fica mais dificil neh haha
    Apenas Adolescentes Loucas

    ResponderExcluir
  4. Adorei o menu para tags, estava procurando um bom para colocar no meu novo layout e achei esse maravilhoso <3

    Kissus, Alice | Perfect California

    ResponderExcluir
  5. Sempre procuro menu de tags e nunca acho, mas esse é tão perfeeeeeeito *0* Gostei muito, é bem criativo >3<

    htmlandresources.blogspot.com

    ResponderExcluir
  6. O menu é lindo!
    Amei demais o seu blog! :)

    http://oestranhomundodeisa.blogspot.com.br/

    ResponderExcluir
  7. Estava procurando por um menu que não usasse aquela edição no HTML do blog, e você disponibilizou um que só precisa colocar no gadget, muito obrigada!

    www.furdunciododatilografo.blogspot.com

    ResponderExcluir

« »