12 de set de 2013

Sliding Tags

Olá pessoal, trago para vocês um dos menus que acho super fofo, o slinding tags, 
os créditos deste menu vai para Too Kawaii. Para ver este menu clique aqui

Primeiro coloque o código abaixo 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>

Segundo coloque o código abaixo antes de </head>

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

Agora coloque o código abaixo antes da tag ]]></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;
}
.novi{width:184px;height:40px;background-color:#ff8080;text-align:left;text-indent:5px;margin-left:57px;font-family:bebas neue;font-size:20px;color:#3C2A2A;margin-top:5px;}
 .novi p{font-size:11px;line-height:11px;}
 .novi img{width:40px;height:40px;position:absolute;margin-left:-63px;}
 .novi:hover img{-webkit-animation:brilha 0.7s;-moz-animation: brilha 0.7s;}
 .novi:before {content:"";position: absolute;width: 0;height: 0;border-top: 2px solid transparent;border-right: 18px solid #ff8080;border-bottom:8px solid transparent;margin: 22px 0 0 -21px;}

@-webkit-keyframes brilha {
   0% { opacity: 0.5;}
   25% {opacity: 1;}
  50% {opacity: 0.5;}
    75% { opacity: 1;}
   100% {opacity: 0.5;}
   }
@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf');
}

Para fazer este menu funcionar copie o código abaixo e coloque no gadget html/java script

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

2 comentários :

  1. Respostas
    1. Gabriela, Você deve estar colocando algum código
      errado ou deixando de colocar. Se faltar alguma aspa " " ou chave { } ou ; dá Erro.
      Já testei várias vezes e deu certo.

      Excluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo