#noteshover

Preview

Cole isso na sua css:

/*Notes por conservos*/ .notes {margin-top:-10px; opacity:0; font-size:11px; text-align:center; color:{color:text};border-top:1px dashed {color:text}; -webkit-transition: all 0.8s ease-in-out; -moz-transition-duration:0.8s; -webkit-transition-duration:0.8s; -o-transition-duration:0.8s;  margin-bottom:0px;  } .SUADIV:hover .notes {-webkit-transition: all 0.8s ease-in-out; -moz-transition-duration:0.8s; opacity:1; font-size:11px; -webkit-transition-duration:0.8s; -o-transition-duration:0.8s; margin-top:-10px;} /*Fim de código*/

E isso antes de {/block:posts}

<!---Notes por : conservos ---> {block:IndexPage}<div class="notes"><a href="{Permalink}">{TimeAgo} . <a href="{Permalink}" {block:NoteCount}{/block:NoteCount} </a> {NoteCount}</a><a href="{ReblogUrl}" target="_blank">. compartilhe</a> </div>{/block:IndexPage} <!--- Fim de código--->

Preview

Cole isso na sua css:

/*Notes por conservos*/ .notes {font-family: 'Armata', sans-serif;font-size:9px;color:#CORDOCARAÇAO;width:auto; height:;margin-top:-10px; z-index:100px; opacity:0; -webkit-transition: 1s linear; -moz-transition: 3s linear; -o-transition: 1s linear; -ms-transition: 1s linear; transition: 1s linear;margin-bottom:-8px;-webkit-transition-duration: .5s;-webkit-animation: flash 0.5s;-moz-animation: flash 0.5s;-ms-animation: flash 0.1s;padding: -3px -5px -3px -5px; display: inline-block;text-transform:lowercase;} .SUADIV:hover .notes {opacity:1;margin-left:1px;-moz-transition: all 0.1s ease-out; -webkit-transition: all 0.8s ease-out; -o-transition: all 0.1s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.1s ease-out; margin-right: 1px;-webkit-transition-duration: .5s;-webkit-transform: rotate(360deg);} .notes a{color:#CORDOLINK; /*Fim de código*/}

E isso antes de {/block:posts}

<!---Notes por : conservos ---> <div class="notes"><a href="{Permalink}">{NoteCountWithLabel}</a> ♥ <a href="{ReblogURL}" target="_blank">reblogar</div> <!--- Fim de código--->

Olá! Bom, devido a vários pedidos hoje estou postando o tutorial de Notes Hover, esse é bem simples, não tem nada demais nele, é só a imagem de like e reblog e a opacidade, clique aqui para visualizar o efeito.

Espero que gostem e usem. Conforme eu for encontrando e/ou fazendo icons de like e reblog faço novos tutos, ok? Vamos lá.

O código que irá ficar no seu css (entre <style> e </style>) é esse:

.htnotes {margin-left: 80px; margin-top: -5px; padding: 5px; position: absolute; opacity:0; -webkit-transition-duration: .40s; -webkit-transition-duration: .60s; z-index: 1; width:150px;} .box:hover .htnotes {margin-left: 80px; margin-top: 10px; opacity:0.4; width:150px;} 

Observe que ali tem ".box:hover", essa é a div da sua box/caixa, se no seu theme não for essa a div mude pela que é, caso contrario o hover dos notes não irá funcionar.

Depois, nos blocks de posts coloque isso:

<div class="htnotes"> <a href="{Permalink}"><img src="http://static.tumblr.com/hqb6dzr/oIlmpvxpm/like_1.png"></a> <a  href="{ReblogURL}" target="_blank"><img src="http://static.tumblr.com/hqb6dzr/mD6mpvxq4/reblog.png"></a> </div>

Veja se está tudo pegando normalmente e salve. 

Não esqueça de dá like no tutorial e creditar. Qualquer dúvida » Ask.

Por pedidos, vou fazer os notes hover desse theme, não tem nada de tão especial, é apenas um outline, vamos aprender?

Vou ensinar a fazer o Hover que eu fiz aqui no Theme do HT.  Clique e veja o  preview

Notes Hover Having Themes 

Certo, vamos colocar isso em um dos seus themes, você precisa saber qual o nome da caixa dos posts do seu theme. 

Nesse caso o nome é BOX. ( se o seu for outro nome, basta trocar o nome BOX pelo seu, e o efeito vai funcionar )  

Vamos fazer logo o efeito passe o mouse, colocando isso no seu CSS : 

.reblog {margin: -20px 00px 00px 180px;  padding: 5px ; position: absolute; opacity:0;-webkit-transition-duration: .40s; -webkit-transition-duration: .50s;z-index: 6; } .box:hover .reblog {margin: 60px 0px 0px 180px; width:auto; opacity:99;} 

.notx{margin: 150px 00px 00px 180px;  padding: 5px ; position: absolute; opacity:0;-webkit-transition-duration: .40s; -webkit-transition-duration: .50s;z-index: 6; padding: 5px } .box:hover .notx {margin: 110px 0px 0px 180px; width:auto; opacity:99;padding: 5px }

.tag{margin: 100px 00px 00px 00px;  padding: 5px ; position: absolute; opacity:0; text-align:center;-webkit-transition-duration: .40s; -webkit-transition-duration: .50s;z-index: 6;width:495px;font-family:'Yanone Kaffeesatz', georgia; font-size:16px;line-height:20px; color: #363448;} .box:hover .tag {margin: 140px 0px 0px 00px; width:auto; opacity:99; background: url('http://static.tumblr.com/8buytvw/kzLmh0aqk/bg.png'); width:495px; }

.img{filter: alpha(opacity=90);moz-opacity:0.90;opacity:0.90 ;-webkit-transition-duration: .60s;} .box:hover .img{filter: alpha(opacity=99);moz-opacity:0.99;opacity:0.99; }

Nesse exemplo a box é de 500px. Quando você colocar esse efeito no seu theme, provavelmente sera de 500px o tamanho do box.  Se for um theme em grade, ou se for menor basta trocar os valores que estão em negrito. :D 

Ps I : Na minha humilde opinião esse efeito so ficar legal no hover das fotos,eu acho que fica mais bonito! :D

Ps II : Quando você colocar o efeito nas tags, ai você coloca as imgs do reblog e permalink. 

Agora, vem a parte mais chatinha, que é colocar esse efeito nas tags, vai ficar assim:

{block:Photo}<div class="box"><div class="reblog"><a  href="{ReblogURL}" target="_blank"><img src="http://static.tumblr.com/8buytvw/zNimh7huh/re.png" ></a> </div>

<div class="notx"><a href="{Permalink}"><img src="http://static.tumblr.com/8buytvw/oZdmh0by0/note.png"></a></div>

<div class="tag">Tags: {block:HasTags} {block:Tags} <a href="{TagURL}"> <b>#</b> {Tag}</a> {/block:Tags}{/block:HasTags}</div>

<center><img src="{PhotoURL-500}"title="{PhotoAlt}" width=505px;/></center>{block:Caption}{Caption}{/block:Caption}</div>{/block:Photo}

Pronto, é isso, espero que vocês gostem, as imagens que estão ai no efeito eu fiz no PS. Usou? Credite por favor, não custa nada! 

Beijo grande!

Live Preview —> aqui.

Primeiro, cole isso no seu css, que fica entre <style> e </style>.

/** NOTES HOVER **/ . noteshover  {width: 50px; height: 20px;position: absolute; margin-top: 02px;margin-left: 450px; opacity: 0; -webkit-transition-duration: 1s; z-index: 100;} .DIV DA SUA CAIXA:hover .noteshover {height: 20px; opacity:99;webkit-transition-duration: 1s;}

Agora adicione isso aonde quer que ela apareça:

<div class="noteshover"> <a href="{ReblogURL}"><img src="http://www.themecloud.co/themes/infinitev3/reblog.png"></a> <a href="{Permalink}"><img src="http://www.themecloud.co/themes/infinitev3/like.png"></a></div>

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;

Vou ensinar vocês a fazerem esse efeito no permalink de foto de vocês.

Demo aqui.

Primeiro cole isso no seu css (entre <style> e </style>):

/***BOXNOTES Simone (cerejadosundae)***/

.DIVDOSPOSTS .boxnotes {z-index: 11;

margin-left:15px; width:auto;padding:1px;

text-align: left; height:auto;border-radius:4px;

position: absolute; margin-top: 5px; text-transform:uppercase;

 line-height: 25px; font-family:verdana;font-size:18px;opacity: 0; 

-webkit-transition: all 0.4s ease;-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.DIVDOSPOSTS .boxnotes img{width:18px;margin-top:5px;}

.DIVDOSPOSTS .boxnotes a{color:#333;}

.DIVDOSPOSTS:hover .boxnotes {opacity: 1;  }

.bor{margin:1px;}

/***Class do primeiro note***/ 

.DIVDOSPOSTS .boxnotess {z-index: 11;display: inline-block;height:30px; width:30px; background: rgba(0,0,0,0.5);border-radius:30px;margin-left:-5px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.DIVDOSPOSTS:hover .boxnotesss {margin-left:2px;  }

 /***Class do segundo note***/

.DIVDOSPOSTS .boxnotesss {z-index: 11;display: inline-block;height:30px; width:30px; background: rgba(255,255,255,0.8);border-radius:30px;margin-left:-50px;-webkit-transition: all 0.4s ease;-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.DIVDOSPOSTS:hover .boxnotesss { margin-left:-2px; }

Altere apenas o que esta em letra maiúscula e se souber mexer pode alterar o resto também.

Depois de colocar o código no seu css e substituir.

Cole esse abaixo da div dos posts exemplo <div class="DiVPOSTS">, esse div é a mesma div mencionada acima entendeu? Cole isso aqui abaixo dela:

{block:IndexPage}<div class="boxnotes"><center><div class="boxnotess"><a href="{ReblogURL}" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/64/arrow_circle_left.png"class="bor"></a></div>

<div class="boxnotesss"><a class="notes" href="{Permalink}"><img src="http://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/like_outline.png"class="bor"></a></center></div>{/block:IndexPage}

Você pode mudar os icones que aparecerem em seus notes hover, isso fica a seu critério, mas certifique-se de alterar o tamanho da div "bor", se a imagem tiver um tamanho diferente. Espero que tenha ficado claro.