#cute note hover

Tem bastante tempo que eu uso esse estilo de notes, e hoje vou fazer um tutorial sobre ela. Abaixo há um exemplo das notes:

Bom, vamos começar com o código do css? Então coloque este código (clique) antes da tag </body>.

Mas, é claro que você pode personalizar o código para seu uso. Então, não esqueça:

Na parte “box:hover .link” você pode personalizar o “margin-left” e o “margin-top”.

Na parte “caixinha” está escrito tudo o que você pode personalizar, simples.

Lembrando que se você souber mexer em HTML, pode mudar muito mais coisa no código (:

    Agora vem a parte mais complicada, o local onde você colocará o código. Primeiro, procure no código do seu theme pela tag “{Block:Posts}”; depois por “{block:Text}” e, embaixo da tag de caixa do texto (a box), coloque o código:

  <div class="link"><div class="caixinha"><a href="{Permalink}"><img src="http://static.tumblr.com/o286adx/9NDm2h4id/heart_stroke_32x28.png" width="10" onMouseover="ddrivetip('permalink')"; onMouseout="hideddrivetip()"></a> | <a target="_blank" href="{ReblogURL}"><img src="http://static.tumblr.com/o286adx/v3Im2h4lg/loop_32x32.png" width="10" onMouseover="ddrivetip('reblog this !')"; onMouseout="hideddrivetip()"></a> | {block:Date}{DayOfMonth}/{ShortMonth}{/block:Date}{/block:Date}</div></div>

Então procure pelas outras tags de post, como “{block:Answer}”, “{block:Link}”, “{block:Photo}” e etc e coloque o mesmo código acima (também abaixo do código da caixa de posts).

Bem, essas notes são fáceis, mais complicadinhas se você não souber html. Enfim, espero que tenham conseguido entender.

Tutorial por Giovanna C.;

Dê like no post se o tutorial foi útil;