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.
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>
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.
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; }
-------------------------------------------------------------*/
.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.
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.
Drw!!!!!!!!!!!!!! Voce e um anjo, cara eu te amo obrigada por postar esse menu! Nossa muito muito muito muitooooo obrigada mesmo!!!!
ResponderExcluirFico feliz que tenha gostado
ExcluirEle é muito lindo :3
ResponderExcluirAcho que vou usar no próximo lay..
http://novajuventudexxi.blogspot.com.br/2013/05/meta-300-seguidores-divulgacao.html
Se puder participa ?
Hihi verdade ^^
ExcluirParticipo sim
quando vi em seu novo lay eu pirei !!
ResponderExcluirTá em favoritos *----------*
Hihi certo ^^
ExcluirBem diferente esse menu
ResponderExcluirBelo menu! Realmente muito lindo
ResponderExcluirObrigada
ExcluirVou usar com certeza, apesar do meu blog não ter ainda muitos posts eu precisava mesmo de algo assim pra facilitar a busca.
ResponderExcluirJá estou seguindo ^^
sempre-divando.blogspot.com
Oi Ana, mas não precisa ter muitos post para usar. O bom é que já vai organizando eles.
ExcluirUwa gostei *u* concordo com o annon, é diferente mesmo.
ResponderExcluirAh, eu postei lá no blog um tutorial com o gadget dos posts recentes, espero que lhe seja útil *3*
byee o/
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*o* Esse que eu queria hsuahsuahs o/
ResponderExcluirncnosekai.blogspot.com
Hihi que bom então que postei
ExcluirNossa, que legal :3
ResponderExcluirÓtimo tutorial .
cr4zy-world.blogspot.com
Hai, é realmente bem legal
ExcluirAmei o menu, super perfeito ^^
ResponderExcluirVou usar com certeza
Beijos | blogsweet-love.blogspot.com
Usa sim ficara lindo!
Excluirmenu legal
ResponderExcluirDrw posta sobre o novo anime devil survivor 2?
ResponderExcluirHai!
ExcluirOie o meu deu erro no html?! pode conserta isso!
ResponderExcluirQue tipo de erro flor?
ResponderExcluir