30 novembro 2013

Menu para Tags #1

| |
Status: Comendo brigadeiro >3<
Oi ^.^ Gostaram do novo layout? Ele é bem simples se compara-lo aos outros, mas eu gostei bastante por isso deixei ele aqui... O Alan (estraga prazeres u.u ) já deve ter contado de um pequeno concurso (gincana, melhor dizendo) que faremos próximo ao natal. Eu já estou fazendo a minha parte e eu acho que vão gostar ^^

Mas indo direto ao assunto, durante esse tempo de hiatus eu fiz alguns menus para tags que, surpreendentemente, me agradaram até que bastante. Só que eu acho melhor ir só postando um por um, porque... sim

Aqui está uma prévia • Tags 1



1 • No HTML do seu blog, aperte F3, procure por ]]></b:skin> e cole logo acima dessa tag:

.lado-esquerdo {float: left; width: 49%; text-align: center;}
.lado-direito {float: right; width: 49%; text-align: center;}
#menu-tags-tres-isa {
color: white;
background-color: #e6b4b7; /* cor do fundo*/
text-shadow: 2px 1px 1px #e4a2a8; /* cor da sombra do texto */
font-family: 'arma five';
font-size: 8px; /* tamanho da fonte*/
padding: 1px;
margin-bottom: 1px;
border: 1px solid #COR_DA_BORDA;
border-radius: 3px; /* Arredondamento */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
#menu-tags-tres-isa:hover {
text-shadow: 2px 1px 1px #COR_DA_SOMBRA_HOVER;
border: 1px solid #COR_DA_BORDA_HOVER;
-moz-box-shadow:inset 0px 15px 0px #COR_DO_FUNDO_HOVER;
-webkit-box-shadow:inset 0px 15px 0px #COR_DO_FUNDO_HOVER;
-o-box-shadow:inset 0px 15px 0px #COR_DO_FUNDO_HOVER;
-ie-box-shadow:inset 0px 15px 0px #COR_DO_FUNDO_HOVER;
-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');}

2 • Visualize apenas para checar se nada saiu fora do lugar. Se estiver tudo certo, salve e vá em Layout. Adicione um Gadget • HTML/JavaScript e cole:

<div class='lado-esquerdo'>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
</div>
<div class='lado-direito'>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-tres-isa">NOME</div></a>
</div>

Preencha tudo como se pede e depois salve.

••• ♥ •••
Espero que tenha gostado do tutorial. Qualquer dúvida é só perguntar na ask do blog (•••♥•••)... Beijos ;*

11 comentários:

  1. Se eu gostei do lay? Eu amei *3* Simples? Me humilhou :c Muito legal o menu, e criativo *u*

    htmlandresources.blogspot.com

    ResponderExcluir
  2. sinto cheiro de plagio no ar

    ResponderExcluir
  3. Ele ficou lindo <3 Mas só achei estranho tipo, rosa com verde? What? Haha, mesmo assim, ficou maravilhoso <3

    etcforme.blogspot.com

    ResponderExcluir
  4. muito lindo este menu......gostei muito.....o lay do blog esta perfeito aceita afiliação???.....se aceitar me avise para eu te encaixar no lay q estou fazendo!!bjosss

    Louca por HTML ^^

    ResponderExcluir
  5. annw que fofo

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir
  6. Ficou muito lindo *-*

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  7. Adorei o tuto, talvez eu use no meu próximo layout.
    Beijos!

    inventyourhappiness.blogspot.com

    ResponderExcluir
  8. Porque eu não consigo achar o ]]> no html? oque faço?

    ResponderExcluir

« »