Boa tarde, pessoal.
Desculpem a demora novamente, mas hoje fiquei com uma preguiça enorme de postar. Confessem que as vezes dá essa preguiça mesmo, acontece com todos. Acho que vou começar trazendo alguns tutoriais legais para vocês, já que é mais fácil para mim e mais útil para todos. O blog da Rafaah onde eu posto está em reforma, então terei mais um tempinho extra para vocês se a preguiça resolver deixar.
Para nosso primeiro tutorial do dia, trouxe o tutorial do efeito que usei ali no recomendo. Por coincidência achei o tutorial dele enquanto passeava pelo tumblr e lembrei que alguns haviam pedido. Postarei, embora ele já seja bem conhecido pela blogosfera e seja um pouco desnecessário, vai que alguém ainda não viu. Clique aqui para ir até a preview do efeito.
1. Procure por ]]></b:skin> e acima dessa tag, cole o seguinte:
.figure { margin: 3px; width: LARGURApx; height: ALTURApx; overflow: hidden; position: relative; border: 3px solid #CORDABORDA; margin-right: 3px; float: left;}figcaption { font-family: verdana; font-size: 11px; position: absolute; display: block; width: 111px; height: 20px; left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE; text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; line-height: 20px; box-shadow: rgba(0,0,0,.5) 0 2px 8px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transition-duration: 60s; -webkit-transition-duration: .60s;}figure:hover figcaption { left: 35px;bottom: 10px;}
Nesse código existe muita coisa a ser editada, mas destaquei apenas os mais importantes. Recomendo que a largura e altura sejam ambas 108px, pois se você mudar, vai ter que trocar o left e bottom da faixa. Após editar tudo que está em negrito, salve.
2. Em um gadget de HTML/JavaScript, cole:
<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>
Edite agora os códigos em negrito e em largura da foto coloque a mesma largura do código anterior. Salve e seu gadget estará pronto. Se houverem dúvidas, tirem pelos comentários.
Nenhum comentário:
Postar um comentário