20.7.14

Modelos para tags mais mirabolantes


Okaeri ^^

Já ouviram falar do menu Sliding tags? É aquele modelo super fofo para marcadores, que ficam na sidebar. Então, embora seja um tuto que nunca usei, agradeço ao blog #too kawaii por me ter permitido aprender, fiz algumas mudanças nada relevantes, apenas para ficar à minha maneira. E neste mesmo post, ensinarei também outro modelo para tags, esse sim que já testei num layout free que ainda pretendo postar por aqui. Já vão ver...


Sliding Tags - preview: www

Procure por 
</body>
Acima 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>

Agora procure por 
<head>
Abaixo acrescente
<link rel="stylesheet" media="screen" href="http://static.tumblr.com/7bcdfh6/kY2mhr0cc/reset.css"/>

E finalmente, procure por
/b:skin
Cole acima todo o código seguinte - lembrando que só organizei a partir do tuto do #too kawaii!!:
.tag {
background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 0px 0px;
color: #868686;
display: none;
float: left;
height: 25px;
line-height: 1;
margin: 5px;
padding: 0px 5px 0px 8px;
position: relative;
text-decoration: none;
font-size: 10px;
font-family: 'Trebuchet MS', Trebuchet, Sans-serif;
text-transform: uppercase;
}
.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 0px 0px;
position: relative;
text-shadow: 0px 1px 1px #ffffff;
z-index: 10;
}
.tag_name a {
background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -25px;
height: 19px;
padding: 6px 10px 0px 0px; position: relative;
text-shadow: 0 1px 1px #ffffff;
z-index: 10;
}
.tag_count {
background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px;
color: #ffffff;
height: 19px;
padding: 5px 10px 0px;
position: absolute;
right: 0px;
top: 1px;
text-shadow: 1px 1px 0px #bf9a9a;
z-index: 5;
}
.tag_count a {
background: url(http://s20.postimage.org/b9zsk1t25/tag.png) no-repeat 100% -50px;
color: #ffffff;
height: 19px;
padding: 5px 10px 0px;
position: absolute;
text-shadow: 1px 1px 0px #bf9a9a;
right: 0px;
top: 1px;
z-index: 5;
}

Pode fazer as alterações que quiser, para mudar as cores das imagens, basta usar algum editor básico, até Pixlr serve - depois vá mexendo na tonalidade, salve, e substitua a url. Pegue em baixo a imagem, sim, é só uma, mas o código ajusta perfeitamente, atenção se quiser mudar os valores! Substitua em todas as linhas que dizem background, também fiz uns modelos meus (os 2 primeiros) que pode pegar.

Pronto, agora para usar, abra um gadget HTML/Javascript e cole o código abaixo, substituindo os links e nomes pelas tags que quiser que apareçam.
<ul>
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
      </li>
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
      </li>
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
      </li>
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
      </li>
<a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
   
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
            <span class="tag_count">Veja</span>
       </a>
      </li>
<li>
       <a href="LINK" class="tag">
        <span class="tag_name"># NOME</span>
        <span class="tag_count">Veja</span>
       </a>
      </li>
</ul>

Modelo 2 - preview: www «no gadget que diz "etiquetas"

Procure por
/b:skin
Acima acrescente
.label-size {
margin: 0;
padding: 0;
position: relative;
}
.label-size a {
float: left;
height: 24px;
line-height: 24px;
position: relative;
font-size: 10px;
font-family: silkscreen;
margin-bottom: 5px;
margin-left: 20px;
padding: 0px 10px 0px 12px;
background: url(http://3.bp.blogspot.com/-EKMmtAiCFVI/UsRfsZN7pKI/AAAAAAAAROw/63NcZOhKaOk/s1600/back2.png) no-repeat;
color: #ffffff;
text-decoration:none;
border-radius: 0px 4px 4px 0px;
-webkit-transition-duration: .60s;
}
.label-size a:before {
content: "";
float: left;
position: absolute;
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #e8c3b5 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0;
-webkit-transition-duration: .60s;
}
.label-size a:after {
content: "";
position: absolute;
top: 10px;
left: 0;
float: left;
width: 4px;
height: 4px;
border-radius: 2px;
background: #ffffff;
box-shadow: -1px -1px 2px #752500;
-webkit-transition-duration: .60s;
}
.label-size a:hover {
background: url(http://2.bp.blogspot.com/-pMY75y9-bxY/UsRfrxIpcHI/AAAAAAAAROs/t9hRaYPU9pM/s1600/back1.png) no-repeat;
-webkit-transition-duration: .60s;
}
.label-size a:hover:before {
border-color: transparent #fcba8d transparent transparent;
-webkit-transition-duration: .60s;
}

Para editar, indico que mude apenas as linhas que dizem background. Certifique-se de que a cor que coloca na ponta da seta, correspondente às chavetas com a palavra "before", são da mesma cor que você coloca a faixinha. A imagem que usei de base foi esta, muda as cores em algum editor:

Para usar, basta adicionar um gadget de "Etiquetas", e coloque-as em formato de nuvem, assim: 


Era tudo. Sei que é um post extenso, mas espero que seja útil de algum modo, e pelo menos assim tem algumas diferenças em relação a outros blogs :)


1 comentário:

  1. yoo! Eu queria uma ajuda eu tentei colocar o primeiro menu poém o quadradinho com #nome ficou para baixo dos outros,como que faço para ele subir?
    Bjos, Bye!!bye!!

    ResponderEliminar