#estilo de notes

Preparei alguns tipos de Via bastante úteis e inovadores, espero que gostem.

Antes de mais nada, colem o código a seguir antes de </head>

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> 

01. 

Cole o seguinte código antes de </style>

/** Via Style by @reptilha in @passo-html**/

reb{    display:block; }

reb img{    display:inline-block;    border-radius:100%;    width:20px; }

reb span{    vertical-align:5px;    margin-left:10px;     margin-right:10px;    display:inline-block; }

/** Via Style by @reptilha in @passo-html**/

Cole o código a seguir após a abertura da div da sua caixinha de post:

{block:RebloggedFrom} <reb><img src="{PortraitURL-24}"> <span class="sf sf-refresh"></span> <a href="{ReblogParentURL}" title="Via {ReblogParentName}"><img src="{ReblogParentPortraitURL-24}"></a></reb> {/block:RebloggedFrom}

02.

Cole o seguinte código antes de </style>

/** Via Style by @reptilha in @passo-html**/

reb{    display:block; }

reb a{    text-decoration:none;    vertical-align:6px; }

reb span{    vertical-align:5px;    margin-left:10px;    font-size:10px;     margin-right:5px;    display:inline-block; }

/** Via Style by @reptilha in @passo-html**/

Cole o código a seguir após a abertura da div da sua caixinha de post:

{block:RebloggedFrom} <reb> <span class="sf sf-refresh"></span> <a href="{ReblogParentURL}"> {ReblogParentName}</a></reb> {/block:RebloggedFrom}

03.

Cole o seguinte código antes de </style>

/** Via Style by @reptilha in @passo-html**/

reb{   display:block;   font-size:10px;   font-family:consolas;   text-transform:uppercase;   margin-bottom:10px; }

reb img{   display:inline-block;   border-radius:100%;   width:20px;   vertical-align:-7px; }

em{    display:inline-block;    background:#fafafa;    padding:2px 7px 2px 5px;    border-radius:15px;    height:25px; }

reb span{   vertical-align:5px;   margin-left:10px;    margin-right:10px;   display:inline-block;   font-size:13px; }

reb a{   text-decoration:none;   vertical-align:0px;   color:gray;   line-height:25px; }

/** Via Style by @reptilha in @passo-html**/

Cole o código a seguir após a abertura da div da sua caixinha de post:

{block:RebloggedFrom} <reb><em><img src="{PortraitURL-24}"> <a>{Name}</a></em> <span class="sf sf-refresh"></span> <em><img src="{ReblogParentPortraitURL-24}"><a href="{ReblogParentURL}" title="Via {ReblogParentName}"> {ReblogParentName}</a></em></reb> {/block:RebloggedFrom}

OBS: Se não funcionar, tentem colocar o código dentro de cada Block Post.

Estilo de notes 

Visualize: (xx)

Cole isso antes de </style>:

/*Feito por @clamam disponível em @passo-html insp: instagram & rhaegara. NUNCA remova os meus créditos e dê like no post se usar.*/ #ph-top{width:278px; background:#fafafa; padding:7px; margin-left:-16px; margin-top:-16px; margin-bottom:15px; text-transform:uppercase; letter-spacing:1px; color:#555; font-size:10px; font-family:PT Sans; text-align:left;} #ph-top a{color:#555; display:inline-block;} #ph-top img{border-radius:100%; margin-top:10px;}#ph-bottom{position:absolute; width:268px; background:#fafafa; padding:12px; margin-left:-16px; margin-bottom:-40px; bottom:0px; text-transform:uppercase; letter-spacing:1px; color:#555; font-size:10px; font-family:PT Sans; text-align:left;} #ph-bottom a{color:#555;} #ph-bottom i{font-size:11px; margin:2px; font-weight:bold;}.custom-like-button{position:relative; height:13px; display:inline-block; width:13px; padding-left:5px; left:-5px; color:{color:texto};} .like_button{position:absolute; width:100%; opacity:0; height:100%; z-index:50;} .like_button iframe{width:100%!important; height:100%!important;} .our_toggle{position:absolute; width:100%; height:100%; z-index:1;} .like_button.liked + .our_toggle{color:red!important; opacity:1;} .like_button.liked i + .our_toggle i{color:red!important; opacity:1;}

Cole isso depois de <div class="posts">:

{block:IndexPage} <!--PARTE DO TOPO--> <div id="ph-top"> {block:RebloggedFrom} <a href="{permalink}"><img src="{ReblogRootPortraitURL-24}"/><div style="margin-top:-25px; margin-left:35px; margin-bottom:12px">{ReblogRootName}</div></a> {/block:RebloggedFrom} <div style="float:right; margin-top:15px; padding-right:2px"> <a href="{permalink}">{timeago}</a> </div> </div> <!--PARTE DE BAIXO--> <div id="ph-bottom"> <a href="{permalink}">{notecountwithlabel}</a> <div style="float:right; padding-right:2px"> {block:HasTags} <a href="#" title="{block:Tags}#{Tag} {block:Tags}"><i class="uniicons-bookmarks10"></i></a> {/block:HasTags} <a><div class="custom-like-button">{LikeButton}<span class="our_toggle"><i class="uniicons-loving40" style="font-size:12px"></i></span></div></a> <a href="{reblogURL}"><i class="uniicons-reload22"></i></a> </div> </div> {/block:IndexPage}

Cole isso antes de </head>:

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/33sakshawgsp033/UNIICONS-ADJ.css?dl=0">

Preview

1° Cole isso antes de </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

2° Cole isso antes de </style>

/******* NOTES, REBLOG E AFINS POR ARCAICAS EM PASSO-HTML ********/ #babys {text-align:left;padding-top:5px;padding-bottom:5px;padding-left:10px; background:#eee;} #babys a {display:inline-block;margin:0px 4px;font-size:8px;letter-spacing:1px;text-transform:uppercase;} .custom-like-button *{cursor:pointer!important;} .custom-like-button {position:relative;display:inline-block;vertical-align:top;width:10px;color:#aaa;margin-top:.2px;height:10px;cursor:pointer;} .fa-heart {font-size:9px;} .like_button:hover + .our_button {color:#ff002f;} .like_button.liked + .our_button {color:#ff002f;} .like_button iframe {width:100%!important;height:100%!important;} .like_button {z-index:10;opacity:0;} .our_button {z-index:1;} .our_button,.like_button {position:absolute;top:0;left:0;width:100%;height:100%;}

3° Por fim, cole isso depois de ter colocado todos blocks dos posts.

{block:IndexPage} <div id="babys"> <a href="{Permalink}">{NoteCountWithLabel}</a> <a href="{ReblogURL}">reblog</a> <div class="custom-like-button" style="float:right;margin-right:20px;">{LikeButton}<span class="our_button"><i class="fa fa-heart"></i></span> </div> </div> {/block:IndexPage}

Disponibilizado por: Dai Dê Like se usar, pls!

Tem meu anjo! Eu fazia muito isso nos meus themes, hehe

Veja online

Coloque isso no seu CSS (antes de ):

/** Criado por @clamam disponível em @passo-html. Por favor, não remova os créditos ***/.ph-notes{margin:0; left:0px; bottom:0px; padding:70px 70px 70px 70px; width:250px; position:absolute; opacity:0; z-index:99999; list-style:none; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;-webkit-flex-flow:row wrap; flex-flow:row nowrap; -webkit-justify-content:flex-start; justify-content:flex-start; box-sizing:border-box;  background:-moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.65)), color-stop(100%, rgba(0,0,0,0))); background:-webkit-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); background:-o-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); background:-ms-linear-gradient(bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a6000000’, endColorstr=’#000000’, GradientType=0); transition:1s .3s; -webkit-transition:1s .3s;}.posts:hover .ph-notes{opacity:1; transition:1s; -webkit-transition:1s;}

#ph-permalink{position:absolute; text-align:center; height:20px; line-height:20px; bottom:47px; left:10px; position:left; opacity:0; transition:1s 1s; -webkit-transition:1s 0s;}#ph-permalink a{font-family: ‘Fjalla One’, sans-serif; text-transform:uppercase; color:#fff; letter-spacing:1.5px; text-shadow:1px 1px 1px #000; font-size:23px; border-bottom:1px solid #333; padding:7px; transition:1s 0s; -webkit-transition:1s 0s;}.posts:hover #ph-permalink{opacity:1; position:left; transition:1s 1s; -webkit-transition:1s 1s;}

#ph-reblog{position:absolute; text-align:left; height:20px; line-height:20px; bottom:10px; left:20px; position:left; opacity:0; z-index:999; transition:1s 0s; -webkit-transition:1s 0s;}#ph-reblog a{font-family:PT Sans; color:#fff; padding-bottom:15px; text-shadow:1px 1px 1px #000; font-size:10px; text-transform:uppercase; letter-spacing:1px; transition:1s 0s; -webkit-transition:1s 0s;}.posts:hover #ph-reblog{opacity:1; transition:1s 2s; -webkit-transition:1s 2s;}

Coloque isso no seu HTML (na sua {Block:Photo}):

Reblog

{timeago}

Visualize: (xx)

Coloque isso aqui no seu css (antes de </style>):

/*Disponível em passo-html por Gabi (clamam). Não remova os créditos.*/

#ph-perma{opacity:0; position:absolute; text-align:center; height:20px; line-height:20px; left:0px; bottom:10px; z-index:99; background:#fff; width:400px; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear;}

#ph-perma a{color:#666666; font-family:calibri; text-transform:uppercase; font-size:10px; padding:5px; letter-spacing:1px;}

.posts:hover #ph-perma{opacity:1; bottom:23px;}

Coloque isso aqui depois de <div class="posts"> (div das postagens. Pode tá como post ou posts, depende do designer.)

<div id="ph-perma">

<a href="{Permalink}">com {NoteCount} notificações</a> 

<font color="#ADD8E6 ">•</font>

<a href="{ReblogURL}">compartilhe</a>

</div>

PRIMEIRO MODELO (preview). Lembrando que esse modelo é um pedido feito pra gente (xx) e (xx), mas é o código e inspiração de um theme meu que fiz em 2014 (xx). Enfim, siga os passos com atenção:

Passo 1: Cole esse código depois de <head>:

<link rel="stylesheet" type="text/css" href="http://goo.gl/F6c7pZ">

Passo 2: Cole esse código entre <style> e </style>: (código) ps: esse .post é o nome da div que eu uso para os posts nos meus themes, geralmente se usam essa nos themes, mas se a sua for outra tem que trocar. Passo 3: Cole esse código no block de fotos. Pesquise por {Block:Photo}, apague o que tiver até {/Block:Photo} e substitua pelo código ~>: (código) ps: ah, mas não quero usar só nas fotos! Não tem problema, use o código no block de postagens que preferir: (código)

SEGUNDO MODELO (preview) Lembrando que esse modelo apesar de ser um pedido feito pra gente (xx) e (xx), é o código e inspiração de um theme meu que fiz anos atrás (xx). Enfim, siga os passos com atenção:

Passo 1: Cole esse código depois de <head>:

<link rel="stylesheet" type="text/css" href="http://goo.gl/F6c7pZ">

Passo 2: Cole esse código entre <style> e </style>: (código) ps: esse .post é o nome da div que eu uso para os posts nos meus themes, geralmente se usam essa nos themes, mas se a sua for outra tem que trocar.

Passo 3: Cole esse código dentro do block que desejar: (código)

Se gostarem, deem like. POR FAVOR, creditem.

Então gente, hoje trouxe o estilo de post header (notes) do meu theme sorrow, que foi muito pedido a um tempinho atrás.

Visualize: (xx).

Cole isso antes de </head>

<link rel="stylesheet" type="text/css" href="http://goo.gl/F6c7pZ">

Cole isso no seu css (antes de </style>)

/*Post header por Gabriele (clamam.tumblr.com), dísponível em passo-html (passo-html.tumblr.com). Jamais retire os créditos!!!*/ .cl-perma{width:25px; left:333px; top:0px; position:absolute; z-index:9999;} .cl-perma a{width:25px; opacity:0; margin-bottom:3px; line-height:23px; height:23px; text-align:center; font-weight:bold; color:#000; background:#eee; margin-left:0px;  vertical-align:middle; border:1px solid #ccc; display:block; transition:all .5s ease; -webkit-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; transition: all 1.5s linear;} .posts:hover .cl-perma a{opacity:1;}

Cole isso após <div class="posts">

{block:IndexPage} <div class="cl-perma"> <a href="{Permalink}" target="_blank" title="{timeago}"><i class="fa fa-link"></i></a> <a href="{Permalink}" target="_blank" title="{notecountwithlabel}"><i class="fa fa-heart"></i></a> <a href="{ReblogURL}" target="_blank" title="reblogar"><i class="fa fa-refresh"></i></a></div> {/block:IndexPage}

Para mudar os ícones vá nesse site aqui.  

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>