Menu para tags

12:07 0 Comments A+ a-


Bom gente, trago hoje como prometido e marcado na agenda um tuto, hoje irei ensinar como por o menu sliding tags, acho ele super fofo e lindo, com certeza o usaria (planos para um próximo layout?).


Bem, se você gostou dele e quiser saber como o colocar em seu blog, continue lendo.


Primeiramente vá em seu html e procure por </body>, depois de achada a tag cole isto antes dela:


<script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/zOfmhr0bq/jquery-1.6.2.min.js"></script><script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/crdmhr0al/jquery.easing.1.3.js"></script><script type="text/javascript" charset="utf-8" src="http://static.tumblr.com/7bcdfh6/9Zqmhr07y/functions.js"></script>
Após feito isso, procure por <head>, achado cole este outro código abaixo dela:

<link rel="stylesheet" media="screen" href="http://static.tumblr.com/7bcdfh6/kY2mhr0cc/reset.css">

Agora, procure por ]]></b:skin> e acima dessa tag cole:



/* CSS SLIDING TAGS - POR TOO KAWAII - NÃO RETIRE OS CRÉDITOS
-------------------------------------------------------------*/
.tag { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 0 0; color: #868686; display: none; float: left; height: 25px; line-height: 1; margin: 5px; padding: 0 5px 0 8px; position: relative; text-decoration: none; font-size:10px;text-transform:uppercase; font-family: 'Trebuchet MS', Trebuchet, Sans-serif; }
.tag:hover { cursor: pointer; }
.tag:active { top: 1px; }
.tag span { display: block; float: left; }
.tag_name { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }
.tag_name a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px; height: 19px; padding: 6px 10px 0 0; position: relative; text-shadow: 0 1px 1px #fff; z-index: 10; }
.tag_count { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }
.tag_count a { background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px; color: #fff; height: 19px; padding: 5px 10px 0; position: absolute; right: 0; text-shadow: 1px 1px 0px#bf9a9a; top: 1px; z-index: 5; }



Agora vamos personalizar, se você quiser outro backgroud você irá primeiro ter que salvar as imagens abaixo e editá-las no ps ou em outro editor para modificar as cores, depois hospede-as em algum site e substitua pelos links em roxo destacados no código acima.
Aqui as imagens:



Agora, para colocar no seu blog adicione um gadget HTML/JavaScript e cole o seguinte código, o personalizando de acordo:




<ul>
<li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
<li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
<li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
<li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
<li>
<a href="link da tag" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
<li>
<a href="#" class="tag">
<span class="tag_name"># tag aqui</span>
<span class="tag_count">veja</span>
</a>
</li>
</ul>
Dicas: 
       Quando quiser quebrar a linha, adicione ente código <li class="clear"> entre os <li></li>
       Para pesquisar as tags em seu HTML tecle Ctrl+F.
Bom gente, é isso! Espero de verdade que vocês tenham gostado! Eu realmente amo esse menu de tags por isso fiz esse post de coração <3
Bem, até mais!                                                                       

Sou Nathalia Nates, adolescente, confusa, que não sabe o que quer da vida, e por isso tenta de tudo(desistindo na maioria das vezes por ter medos e inseguranças).

Nasci em uma pequena cidade do norte do paraná, onde moro até hoje, com meus pais e meus dois cachorros.