☂ Chuva de HTML: 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJQC0d4o7DViJo78Le29Jrma7M9I5Ns21uhBs8TZWdmohDjnIP2Fu-wonma-WsxYh3opgbbhhTXBO1S8xN2KCsEA4j2xKE5D8yGHyp8qGeegtV22d4GPYxJhLoZpGaa-dIe5kM6z8lv3Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEBKw6o4SIwOi5TJjNMJpKi90_Q1QSG7xuU7LmOKIJMvEsDxGEaKpSHQV1ajgxK5bFXHsTEyFj7BuRKJNmvDK4shXNBNyPExoFuGUCAycknpkMi58EUYSXu_uqig1wR6XxqCdpKVtfkU/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: