15/05/2013

Tutorial: Sliding Tags

||

Hi, black stars! Como vão hoje? Eu vou admitir que vou bem cansada, estive tão ocupada que nem pude postar ou responder comentários, (agradeço por tantos comentários). E por situações assim venho a pensar em chamar alguém, para ajudar a postar. Ainda irei pensar direitinho nisso, porque dentro de alguns meses vou começar a a trabalhar (que sera bem divertido, mangás esperem por mim) e, terei menos tempo no PC. Exemplo no momento eu estudo de manhã, curso a tarde, arrumo casa, as 15 vou para o computador, 17 horas vou para o centro de atividades.  Então só as 20 da noite posso voltar para o computador, então meu tempinho vai diminuir um pouco... Mas mudando de assunto, 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.

 [PREVIEW]

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:

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

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

 /* 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:


<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
    Respostas
    1. Fico feliz que tenha gostado

      Excluir
  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
    Respostas
    1. Hihi verdade ^^
      Participo sim

      Excluir
  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
    Respostas
    1. Hihi que bom então que postei

      Excluir
  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

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram