Menu Sliding Tags

Postagem Programada

Créditos: pics :3

Hi nekos! Bem.. esse final de semana não poderei entrar! Então, vou programar três postagens (essa já é uma delas). Todas com tutoriais de menus.. desculpem por isso ;^;

Vão ter poucas novidades também, pois estou fazendo isso muito rápido.. então tudo que eu iria colocar nesse post eu coloco no próx pra não ficarem tão vazios! Entenderam? -qq

É só isso.. então.. vamos para o tutorial. 

Antes de começar, queria avisar que as postagens estão programadas para dia 10 de outubro (hoje), 12 e 13. Agora sim, vamos lá.

PREVIEW: clica

Primeiro cole esse código antes de </body>

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

Então coloque esse código antes de </head>

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

E aí você coloca esse código antes de ]]></b:skin>

 /* 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; }

E então você cola esse último código no gadget html/java script em que você quer seu menu:

<ul><li>       <a href="#" 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><li>       <a href="#" 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><a href="#" class="tag">        <span class="tag_name"># tag aqui</span>        <span class="tag_count">veja</span>       </a>      <li>       <a href="#" 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>

Bem.. é isso.. gostaram? eu achei super chique :3
Beijos..