Top Posts Tagged with #estilos notes hover

Estilo Notes #05

VISUALIZE

1° Passo: Cole esse código antes de </style> (CSS)

2° Passo: Cole esse código depois de <div class="post"> ( Ou no bloco do posts que você quer )

PS: Coloquem overflow:hidden na div dos seus posts no css pra dar um efeito mais legal.

Dê Like ou Avise se usar, obg.

/Dai

#estilos notes #estilos notes hover #posts header #posts header hover #estilos de reblog #estilos de like #codes #html #css

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions

Free to watch • No registration required • HD streaming

Estilo Notes #03

[ VISUALIZE ]

1° Passo: Cole esse código antes de </style> (CSS)

2° Passo: Cole esse código depois da div dos seus posts no <body>, em alguns themes está <div id=“posts”> em outros <div class=“entry”>, ou apenas cole ele no Block do post que você quer.

Dê Like ou Avise se usar, obg.

/Dai

#notes #notes hover #estilos notes #estilos notes hover #post header hover #posts header #html #css #javascript #tumblr of html #tumblr de html #blog of html #blog html

Como fazer Estilo de Notes sem base. #1

Bom, vamos lá, é bem fácil... EU UTILIZEI UMA BASE MINHA PARA PODER ENSINAR CADA COISA PRA VCS, SE USAREM A MINHA BASE COMO BASE PRA VCS, CREDITEM.

ESSA É A PARTE DO CSS.

Primeiro vc terá de criar uma div no CSS, vou chamar a minha de “AZUIS”.

Essa div aqui é onde vai ficar todo o custome do seu notes.

/* ESTILOS NOTES BASE POR DAI (ARCAICAS.TUMBLR.COM) */

#azuis{ bottom:0px; /* AQUI VC AJUSTA A ALTURA EM QUE ELE VAI FICAR, QUANTO MAIS ALTO O NUMERO MAIS ALTO ELE FICA. */

position:absolute; /* A POSICAO DELE É ABSOLUTE, SE COLOCAR FIXED ELE BUGA */

opacity:0; /* O OPACITY É PRA QUE ELE FIQUE TRANSPARENT E SÓ QUANDO PASSAR O MOUSE NO POST ELE APARECE, VC PODE DEIXAR ELE APARECENDO SE QUISER, É SÓ TROCAR O 0 POR 1. */

transition:all .5s ease; /* A TRANSITION É A VELOCIDADE EM QUE VAI APARECER QUANDO PASSARMOS O MOUSE, .5s É RÁPIDO 1s É MAIS LENTO E AÍ VC VAI ESCOLHE */

left:0px; /*LEFT É QUE ELE VAI ESTA MAIS PRA ESQUERDA, SE QUISER ELE NA DIREITA É SÓ TROCAR POR "RIGHT", E AÍ É SÓ TROCAR OS NUMEROS ATÉ FICAR NA POSICAO QUE VC QUER */

width:290px; /* O WIDTH É O TAMANHO DA LARGURA DO HEADER VC PODE DEIXAR ELE DO TAMANHO DAS POSTAGEM OU MENOR */

text-align:left; /* TEXT-ALIGN É O ALINHAMENTO DOS NOTES, LEFT É PRA ESQUERDA, CENTER É PRO CENTRO E RIGHT É PRA DIREITA */

background-color:#000; /* O BACKGROUND É PRA DAR A COR AO HEADER DOS NOTES, PRETO É "#000" E BRANCO É "#FFF", VC TAMBÉM PODE DEIXAR ELE TRANSPARENTE É SÓ TROCAR O #000 POR "TRANSPARENT". */

padding:5px; /* PADDING É PRA DEIXAR UM ESPAÇO ENTRE O HEADER E OS NOTES */

padding-left:5px; /* PADDING É PRA DEIXAR UM ESPAÇO ENTRE O HEADER E OS NOTES */ }

/* ESTILOS NOTES BASE POR DAI (ARCAICAS.TUMBLR.COM) */

Essa div é pra dar o hover nos seus notes ou seja pra quando passarmos o mouse no post ele apareça.

/* ESTILOS NOTES BASE POR DAI (ARCAICAS.TUMBLR.COM) */

.post:hover #azuis{opacity:1; /* O OPACITY É PRA QUE OS NOTES APAREÇAM */ padding-left:10px; /* O PADDING-LEFT É PRA QUE OS NOTES FIQUEM MAIS AFASTADO DA ESQUERDA.*/}

/* ESTILOS NOTES BASE POR DAI (ARCAICAS.TUMBLR.COM) */

AGORA VAMOS A PARTE DO BODY.

Vc irá procurar no seu html por <div class="post"> (obs: depende também do seu theme em alguns themes em vez de esta escrito “POSTS” esta escrito “ENTRY’”), enfim vc irá procurar por <div class="post"> e logo após isso vc coloca sua div.

QUE VAI FICAR ASSIM, E ENTÃO VCS AJEITAM COM OS NOMES QUE DESEJAREM.

{block:IndexPage}

<a href="{Permalink}" target="_blank"> {NoteCount} NOTES</a>

<a href="{ReblogURL}" target="_blank"> Reblog</a>

<a > {TimeAgo}</a>

</div>  {/block:IndexPage}

QUALQUER DÚVIDA SÓ PERGUNTAREM.

/Dai.

#TUTORIAIS #ESTILOS BASE NOTES #ESTILOS NOTES HOVER #TUTO DE NOTES #TUTORIAL NOTES #dai