15/05/2013

Menu Sliding Tags


Hi, black stars! Venho trazer um tutorial que alguns leitores pediram do menu que uso atualmente nas minhas Tags "Mais Vistas". Ele se chama Sliding Tags, ele passa a sensação de ser uma caixinha que ao passar o mouse, sai uma faixinha de dentro dele. Uma leitora disse que parece um chiclete saindo da caixa rsrs é parece mesmo.


Aviso: Vou responder as tags e selinhos, assim que eu voltar a noite. Sorry pela demora.

Eu pessoalmente achei ele muito fofo, eu acho que ele combina com qualquer modelo de layout, principalmente com os mais simples. Mas vou parar por aqui e vamos ao tutorial.

1. Vá ate área de seus códigos. Procure pela tag </body>, antes dela cole:

Códigos
<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>

2. Agora procure por <head>, então abaixo dela cole:

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

Esses são os códigos funcionais, mas ainda falta a parte da personalização e o código de visualização, ou seja o que vai na gadget.

3. Ainda dentro do HTML procure pela famosa tag ]]></b:skin>, acima dela adicione todo esse código:

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

 Para personalizar a imagem do background, você pode trocar as cores do background é só mudar o endereço"http://http://s20.postimage.org/b9zsk1t25/tag.png" pela sua imagem modificada. Basta trocas as cores no Photoshop ou outro programa editavel.


4.Agora para o código aparecer em sua gadget, vá ate seu layout abra um novo gadget de html/java script e nele cole o código abaixo:

Códigos

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

Quando quiser quebrar a linha, adicione ente código <li class="clear"> entre os <li></li>, certo?  Bem apesar de ter bastantes parte ele não é difícil de se colocar, agora é só arrumar como quiser. Onde esta "#tag aqui" e o nome da tag que deseja colocar já o "veja" e o que sai ao passar o mouse. Todos os créditos vão para o blog Too Kawaii, então se usarem não esqueçam de creditar. Esse é o tutorial de hoje, espero que tenham gostado e não esqueçam de comentar. Beijinhos e ate a próxima.

24 comentários:

  1. Bruno15/5/13

    Drw!!!!!!!!!!!!!! Voce e um anjo, cara eu te amo obrigada por postar esse menu! Nossa muito muito muito muitooooo obrigada mesmo!!!!

    ResponderExcluir
  2. Ele é muito lindo :3
    Acho que vou usar no próximo lay..
    http://novajuventudexxi.blogspot.com.br/2013/05/meta-300-seguidores-divulgacao.html
    Se puder participa ?

    ResponderExcluir
  3. quando vi em seu novo lay eu pirei !!
    Tá em favoritos *----------*

    ResponderExcluir
  4. Anônimo15/5/13

    Bem diferente esse menu

    ResponderExcluir
  5. Belo menu! Realmente muito lindo

    ResponderExcluir
  6. Vou usar com certeza, apesar do meu blog não ter ainda muitos posts eu precisava mesmo de algo assim pra facilitar a busca.
    Já estou seguindo ^^

    sempre-divando.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Ana, mas não precisa ter muitos post para usar. O bom é que já vai organizando eles.

      Excluir
  7. Uwa gostei *u* concordo com o annon, é diferente mesmo.
    Ah, eu postei lá no blog um tutorial com o gadget dos posts recentes, espero que lhe seja útil *3*
    byee o/

    ResponderExcluir
    Respostas
    1. Yo yo Themy!!! Nya que saudades de você, que bom que gostou do menuzinho. Jura? Irei lá agora mesmo estou precisando de um para o modelo free.

      Excluir
  8. *o* Esse que eu queria hsuahsuahs o/
    ncnosekai.blogspot.com

    ResponderExcluir
  9. Nossa, que legal :3
    Ótimo tutorial .
    cr4zy-world.blogspot.com

    ResponderExcluir
  10. Amei o menu, super perfeito ^^
    Vou usar com certeza
    Beijos | blogsweet-love.blogspot.com

    ResponderExcluir
  11. Anônimo19/5/13

    menu legal

    ResponderExcluir
  12. Drw posta sobre o novo anime devil survivor 2?

    ResponderExcluir
  13. Oie o meu deu erro no html?! pode conserta isso!

    ResponderExcluir
  14. Que tipo de erro flor?

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345