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.
<!---ESTILOS NOTES BASE POR DAI (ARCAICAS.TUMBLR.COM) --->
{block:IndexPage} <!----- O BLOCK:INDEX SERVE PARA QUE OS NOTES NÃO APAREÇA NA PAGINA DO PERMALINK ---------->
<div id="azuis"> <!--------- AQUI VC COLOCA A SUA DIV --------->
<a href="{Permalink}" target="_blank"> {NoteCount} NOTES</a> <!----- AQUI É ONDE VAI APARECER OS NUMEROS ------>
|
<a href="{ReblogURL}" target="_blank"> Reblog</a> <!--------- E AQUI É O LINK PRA REBLOG ------>
|
<a > {TimeAgo}</a> <!------- VC TBM PODE ACRESCENTAR O TIMEAGO QUE É PRA SABER QUANDO FOI POSTADO ---------->
</div> <!------- E AQUI FECHAMOS A DIV ---------> {/block:IndexPage} <!------- E FECHAMOS O BLOCK:INDEX -------->
QUALQUER DÚVIDA SÓ PERGUNTAREM.
/Dai.
