#notes hover

Visualize [xxx]

1) Cole esse código no seu css:

/*** NOTES HOVER 01 BY @AGRIDOCEJA - POR @PASSOHTML ***/ .posts .boxnotes {position:absolute; top:0; top:0; margin-top:10px; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 1100ms; opacity: 0;} .posts{position:relative; -webkit-transition-duration: 1100ms;} .posts:hover .boxnotes{background: #fff; opacity: .8; color: #777; font-family: Consolas; font-size:12px; margin-top:1px; text-align: center; width: 100%; height: 17px; -webkit-transition-duration: 1100ms;} .perma {background:; color: #777777;} .perma a{color: #777777;}img a{width:100%}

2) Agora cole esse código depois de {block:Photo}:

{block:Date}{block:IndexPage} <div class="boxnotes"><div class="perma"> <font color="#777">↻ </font><a href="{reblogurl}"target="_blank">reblog</a>{block:NoteCount} / <a href="{Permalink}" title="permalink"><font color="#777">❤ </font></span>{NoteCount}</a>{/block:NoteCount}</div></div> {/block:IndexPage}{/block:Date}

Para alterar a cor dos ícones de reblog e like, é só alterar onde está em negrito.

Mude todos “.posts” e “.posts:hover” para a div de custome dos seus posts.

Visualize [xxx]

1) Cole esse código no seu css:

/*** NOTES HOVER 01 BY BRIDABRAGA ***/ .posts .boxnotes {position:absolute; top:0; top:0; margin-top:10px; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 1100ms; opacity: 0;} .posts{position:relative; -webkit-transition-duration: 1100ms;} .posts:hover .boxnotes{background: #fff; opacity: .8; color: #eee; font-family: Consolas; font-size:12px; margin-top:1px; text-align: center; width: 100%; height: 17px; -webkit-transition-duration: 1100ms;} .perma {background:; color: #777777;} .perma a{color: #777777;}img a{width:100%}

2) Agora cole esse código depois de {block:Photo}:

{block:Date}{block:IndexPage}<div class="boxnotes"><div class="perma"> <font color="#777">↻ </font><a href="{reblogurl}"target="_blank">reblog</a>{block:NoteCount} / <a href="{Permalink}" title="permalink"><font color="#777">❤ </font></span>{NoteCount}</a>{/block:NoteCount}</div></div> {/block:IndexPage}{/block:Date}

Para alterar a cor dos ícones de reblog e like, é só alterar onde está em negrito.

Mude todos “.posts” e “.posts:hover” para a div de custome dos seus posts.

Visualize

Coloque esse código acima de </style>:

/* Estilo de notes hover #2 por @Chilings Design original, recuse imitações. Não retire os créditos! */ .ch-fnotes-two{position:absolute; display:block; height:60px; transition:.3s; opacity:0; overflow:hidden; transition:1s; /***PRESTEM ATENÇÃO AQUI*** NO LUGAR DE >> 190 << TROQUE PELO VALOR DE WIDTH DA CAIXA DE POSTS DO SEU THEME*/ /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/width:190px; background:-webkit-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0)); background:-o-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0))); background:-moz-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0))); background:linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0)));} .DIV DA SUA CAIXA DE POST:hover .ch-fnotes-two{opacity:1; transition:.3s;} .ch-fnotes-two .ch-date{display:block; margin-top:5px; margin-left:-300px; text-align:left; text-indent:5px; font-size:10px; text-shadow:1px 1px 2px rgba(0,0,0,.8); font-family:'Ubuntu Condensed'; transition:1s;} .ch-date a{color:#fff; text-transform:uppercase;} .DIV DA SUA CAIXA DE POST:hover .ch-date{margin-left:0px; transition:1s;} .ch-fnotes-two .ch-info{display:block; margin-top:1px; margin-left:-500px; text-align:left; font-size:10px; text-shadow:1px 1px 2px rgba(0,0,0,.8); font-family:'Ubuntu Condensed'; text-transform:uppercase; transition:1s;} .ch-fnotes-two .ch-info a{color:PINK; text-transform:uppercase;} .DIV DA SUA CAIXA DE POST:hover .ch-info{margin-left:5px; transition:1s;}

Coloque esse código abaixo de </style>:

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">

Coloque esse código abaixo de {block:Photo} e {block:Photoset}

Clique para pegar o código

Visualize

Coloque esse código acima de </style>:

/* Estilo de notes hover #1 por @Chilings Design original, recuse imitações. Não retire os créditos! */ .ch-fnotes-one{position:absolute; display:block; height:50px; transition:.3s; opacity:0; overflow:hidden; /***PRESTEM ATENÇÃO AQUI*** NO LUGAR DE >> 200 << TROQUE PELO VALOR DE WIDTH DA CAIXA DE POSTS DO SEU THEME*/ /*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/width:200px; background:-webkit-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0)); background:-o-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0))); background:-moz-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0))); background:linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,0)));} .DIV DA SUA CAIXA DE POST:hover .ch-fnotes-one{opacity:1; transition:.3s;} .ch-fnotes-one .ch-date{display:block; margin-top:-20px; text-align:center; text-indent:5px; color:#D9BDA7; font-size:15px; text-shadow:1px 1px 2px rgba(0,0,0,.5); font-family:'Rochester'; letter-spacing:.5px; transition:.8s;} .ch-date a{color:#D9BDA7;} .DIV DA SUA CAIXA DE POST:hover .ch-date{margin-top:5px; transition:.8s;} .ch-fnotes-one .ch-info{display:block; margin-top:-50px; text-align:center; text-indent:5px; color:#D9BDA7; font-size:11px; text-shadow:1px 1px 2px rgba(0,0,0,.5); font-family:'Oswald'; text-transform:uppercase; transition:1s; letter-spacing:.5px;} .ch-fnotes-one .ch-info a{color:#eee; text-transform:uppercase;} .DIV DA SUA CAIXA DE POST:hover .ch-info{margin-top:1px; transition:1s;}

Coloque esse código abaixo de </style>:

<link href="https://fonts.googleapis.com/css?family=Oswald|Rochester" rel="stylesheet">

Coloque esse código abaixo de {block:Photos} e {block:Photoset}:

   <!--Ch.--><div class="ch-fnotes-one">    <div class="ch-date"> <a href="{Permalink}"> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} </a>    </div>    <div class="ch-info"> {NoteCount} <a href="{ReblogURL}">Reblog!</a>    </div>    <!--Ch.--></div>

[ 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.

[VISUALIZE]

Primeiro cole esses dois códigos depois de <head>

[CÓDIGO]

Agora cole esse código antes de </style> (CSS)

/*-- ESTILO NOTES FEITO TOTALMENTE POR DAI (ARCAICAS.TUMBLR.COM) DISPONIVEL EM PASSO-HTML.TUMBLR.COM --*/ #notes-arc1{top:20px;position:absolute;opacity:0;transition:all .5s ease;background:rgba(105, 105, 105, 0.5);z-index:9999999999999999999;padding:5px;left:20px;} .post:hover #notes-arc1{opacity:1;-ms-transform: scale(1.10); -webkit-transform: scale(1.10); transform:scale(1.10);}

#notes-arc2{top:20px;position:absolute;opacity:0;transition:all 1s ease;left:60px;background:rgba(105, 105, 105, 0.5);z-index:9999999999999999999;padding:5px;} .post:hover #notes-arc2{opacity:1;-ms-transform: scale(1.10); -webkit-transform: scale(1.10); transform:scale(1.10);}

#notes-arc3{top:20px;position:absolute;opacity:0;transition:all 1.5s ease;left:100px;background:rgba(105, 105, 105, 0.5);z-index:9999999999999999999;padding:5px;} .post:hover #notes-arc3{opacity:1;-ms-transform: scale(1.10); -webkit-transform: scale(1.10); transform:scale(1.10);}

/*-- ESTILO NOTES FEITO TOTALMENTE POR DAI (ARCAICAS.TUMBLR.COM) DISPONIVEL EM PASSO-HTML.TUMBLR.COM --*/

E esse na div das suas fotos no body

<div id="notes-arc1"> <a href="{Permalink}" target="_blank" title="{NoteCount}" style="color:#000;"> <i class="fa fa-heart fa-1px"></i></a> </div> <div id="notes-arc2"> <a href="{PhotoURL-HighRes}" target="_blank" title="ZOOM" style="color:#000;"><i class="fa fa-search-plus fa-1x"></i></a> </div> <div id="notes-arc3"> <a href="{ReblogURL}" target="_blank" title="REBLOG" style="color:#000;"><i class="fa fa-exchange fa-1x"></i> </i></a> </div>

Visualize ele aqui 

Coloque esse code em seu css:

/* notes blindar-te*/ #notes{line-height:15px;width:450px;font-size: 9px;position: absolute;margin-left:300px;font-family: 'calibri';color:#aaa;padding-top:6px;-webkit-transition-duration: .99s;bottom:1px;text-transform:uppercase;} #notes a {padding:5px;color:#aaa;text-transform:uppercase;font-size: 9px;} .post:hover #notes {margin-left:-170px;opacity: 0.9;-webkit-transition-duration: .99s;} #notes a:hover {color:#222;} #permalink {-webkit-transition-duration: .99s;} .post:hover #permalink {padding:3px;-webkit-transition-duration: .99s;} .nots {font-family: 'cambria';color:#aaa;font-style:italic;font-size:10px;padding-bottom:3px;} .taggeds {font-family: 'cambria';color:#aaa;font-style:italic;font-size:10px;padding:2px;width:auto;} .taggeds {font-family: 'cambria';color:{color:negrito};font-style:italic;font-size:10px;padding:2px;margin:2px;text-align:center;}

E esse antes de {/block:posts}:

<div id="permalink"> {block:Date}<div id="notes"> <center><a target="_blank" href="{Permalink}">Curta <img src="https://cdn0.iconfinder.com/data/icons/bijou/10/Like.png"></a> <a href="{ReblogURL}" target="_blank">Compartilhe <img src="https://cdn0.iconfinder.com/data/icons/bijou/10/Refresh.png"></a></center> </div> {block:permalinkpage}<div class="nots"> {block:Date}Postado em {DayOfMonth} • {Month} • {Year} às {24HourWithZero}:{Minutes}{/block:Date} <div class="taggeds"> {block:HasTags}<br>Tags: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}        </div>

Preview

Cole o código abaixo no seu css:

DIV DOS POSTS .permakau{width:50px;height:50px;font-family:pf arma five; position: absolute; font-size: 6pt;line-height:12px;float:center; text-align: center;z-index: 1000; overflow:hidden; background-color:#fff;letter-spacing:1px; top:20px; margin-left:-20px; padding:5px;border-radius:100%; opacity: 0.0;-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; padding:4px; -webkit-transform:rotate(-360deg); -webkit-filter: blur(10px);}

DIV DOS POSTS:hover .permakau{

-webkit-transition: all 0.5s linear;-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear;overflow:hidden; opacity:1;left: 0px; margin-left:50px; border:1px solid #ddd;-webkit-transform:rotate(0deg); -webkit-filter: blur(0px);}

E agora cole esse código, abaixo da div depois de {block:Posts}

{block:IndexPage} <div class="permakau"> <br> <a href="{permalink}">{NoteCount} notes </a> <br> <a href="{ReblogURL}" target="_blank">Reblog</a></span></div> {/block:IndexPage}

Por Kauana | inspirar-r

Não reblog nem repasse