Tutorial - Efeito na Wishlist

 

Boa noite, gente.

Eu estou meio enjoada de postar somente utilitários, tem tantos que fica meio chato ficar postando as mesmas coisas toda hora. Não sei nem como ainda tem coisa para pedir e é por isso que se vocês precisarem de algum tutorial ou quiserem que eu transforme algo do tumblr que não estão conseguindo, é só pedir que eu faço rapidinho e sem trabalho nenhum. Aliás, nem precisa creditar por isso nem nada, cada um sabe o que faz, só não gosto mesmo quando dão control + c na postagem, aí fica meio que me incomodando.

Para quebrar um pouco essa nossa onde de utilitários, trouxe um tutorial super simples. Eu peguei a base no tumblr Gold Html, mas editei bastante retirando coisas desnecessárias no blogger e mudando as personalizações e no fim ficou meio diferente do que estava lá, de toda forma peço que credite ao garoto. O efeito é de wishlist onde vocês podem colocar status, afiliados ou qualquer coisa que não exija tanta atenção assim, onde ao passar o mouse uma linha de cor diferenciada aparece subindo. É bem básico mesmo, mas acho que ficar super lindo se souberem como combinar com o resto do blog e onde usar também. Para não deixar tão chatinho ainda adicionei um efeitozinho com padding que faz o texto se mover um pouco para o lado.

Clique aqui para ver o efeito e se gostar, siga com o tutorial. Podem reblogar.

1. Vá até editar HTML e pressione ctrl + F. Na caixinha procure por ]]></b:skin> e acima disso, cole:

.haruharu a {

color:#ffffff;

}

.haruharu {

color:#404040;

font: 8px "handy", small fonts;

text-transform: uppercase;

text-align:left;

background: #CORDALINHAPASSANDO;

margin-bottom: 2px;

padding:2px;

padding-left: 8px;

-webkit-transition-duration: .99s;

border-radius: 2px;

box-shadow:inset 0px 20px 0px #CORNORMAL;

}

.haruharu:hover {

color:#404040;

padding-left : 15px;

box-shadow: inset 0px -24px 0px #CORNORMAL;

text-shadow: 1px 1px 0px #d2d2d2;

}

As partes principais que vocês podem querer editar são bem poucas. Troque o primeiro #404040 pela cor da sua fonte e o segundo #404040 pela cor da fonte ao passar o mouse. 8px é o tamanho da fonte e handy é o nome dela, mude se quiser. O resto já está indicado no código, observe as partes em negrito e troque.

2. Em um gadget de Html/JavaScript, cole o seguinte e repita se precisar de mais linhas:

<div class="haruharu">Escreva algo</div>