Estilos de Via

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. 

image

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.

image

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.

image

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.

Gabriela @reptilha

Notes Hover by Brida #01

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.

Não remova os créditos, se pegar de like e bom uso! Por: Brida Braga ♥

Estilo de ask.

image

se gostar dê like!

  • cole isso antes de </style>

/* passo-html.tumblr.com // arcaicas.tumblr.com  */   .ones {text-transform:lowercase; background-color:#fedada;color:#000; padding:10px 20px;margin-top:20px; width:calc(100% - 100px); margin-left:20px;font-weight:bold;} .ones img{width:25px;  position:absolute;margin-left:20px;border-radius:5%; margin-top:-50px; } .two {padding:0px 0px 0px 0px;} .ones::before { margin-top:-25px; content: ""; position:absolute; margin-left:90px; border: 5px solid transparent; border-left: 1px solid transparent; border-bottom: 15px solid #fedada; border-right: 20px solid transparent; }
  • e isso no {block:Answer} 
{block:Answer}
<div style="margin-left:90px;"> {Asker} asked:</div>
<div class="ones"> <img src="{AskerPortraitURL-128}	" />

{Question}

</div>
<div class="two">{Answer}</div>
{/block:Answer}

disponibilizado por dai.

Topic Chat

image

Cole o código a seguir no seu css.

/** Chat by Passo Html | Cavalhera **/
.person{background:#fafafa;margin:5px;border:1px solid #fefefe;padding:6px; color:#999;font-family:cambria;font-size:12px;}
.person o{width:10px;margin-left:-31px;margin-top:-6px;position:absolute;border:5px solid #fafafa;height:10px;background:#B0C4DE;}
.person .label{color:#666;font-weight:bold;font-family:consolas;text-transform:uppercase;margin-right:-5px;}
chatitle{color:#666;font-weight:bold;font-family:consolas;text-transform:uppercase;margin:10px;display:block;font-size:12px;}

E substitua o conteúdo de {block:Chat} pelo código seguinte.

{block:Chat}
{block:Title}
<chatitle>{Title}</chatitle>
{/block:Title}
{block:Lines}
<div class="person"> <o> </o>
{block:Label}
<span class="label">
{Label}
</span>
{/block:Label}
{Line}
</div>
{/block:Lines}
{/block:Chat}  

Caso use ou goste, dê like.

Gabriela.

Estilo de Áudio.

image

preview online

cole isso antes de </style>

/* ESTILO POR DAI - ARCAICAS.TUMBLR.COM DISPONÍVEL EM PASSO-HTML.TUMBLR */
#caixa-audio {position:relative;left:0px;top:0px;width:;height:100px;text-align:left;outline:1px solid #000; outline-offset:-4px;border:1px solid #ccc; text-align:left; font-style:italic;overflow:hidden;}
#caixa-audio img {width:100%; position:absolute; left:0px;top:-50px;}
#audio {width:100px;background:#fff;height:100px;overflow:hidden;text-align: left;margin-top:0px; opacity:.8;}
shushi {margin:2px 0px;display:block; background:#f4f4f4; border:1px dotted #ccc;padding:5px 2px;font-family:helvetica;font-size:12px;}

e troque o antigo {block:Audio} por esse

{block:Audio}
<div id="caixa-audio" >
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<div id="audio"></br></br>{AudioPlayer}</div> 
</div>

{block:TrackName}<shushi>Track:<i> {TrackName}</i></shushi>{/block:TrackName}
{block:Artist}<shushi>Artist:<i> {Artist}</i></shushi>{/block:Artist}
{block:Album}<shushi>Album: <i> {Album}</i></shushi>{/block:Album}
{/block:Audio}

Like se usar! Jamais retire meus créditos!

Estilo feito por: Dai, @arcaicas

Imagem Zoom ao passar mouse no botão.

Como pediram aqui está

xx Veja xx

Primeiro cole isso antes de </style>:

/********* ZOOM POR ARCAICAS EM PASSO-HTML **********/
/* se mudar aqui terá de mudar todas os widths e height */
junto {position:absolute; margin-top:10px; margin-left:10px; width:300px;}    


/* não mexa */
#image-ph {margin-top:0px;padding:10px; margin-left:2; width:30px; height:30px; margin-top:10px; }
    
/* se mudar o tamanho da imagem também terá de mudar o height e o width do #bunis */    
#botao-ativar-ph  img {width:200px; transition:all 1s ease;}
    
/* se mudar aqui também terá de mudar o height e o width do #bunis */  
#botao-ativar-ph {overflow:hidden; border:2px solid #000; position:relative; margin-left:0px; top:0px; width:200px;}

/* impede que a imagem de zoom ao passar o mouse sobre */
#bunis{position:absolute;width:330px;margin-left:0px;height:160px;opacity:0;background:#000;z-index:99999999999999;transition:all 1s ease;margin-top:-50px;}

#image-ph:hover #botao-ativar-ph img {  -webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);  transition:all 1s ease;}
    

E esse no body ou onde você quer que apareça:

<junto>  
<div id="image-ph"><div id="botao-ativar-ph" >  <!-------------- IMAGEM AQUI --------------->            
<img src="https://static.tumblr.com/kecu8nj/Bu4olc1ur/sasha-lane--american-honey-photocall-at-2016-cannes-film-festival--02.jpg"/> </div></br><!-------------- BOTAO AQUI ----------------->
<div style="background:#000; outline: solid 3px #fff; outline-offset:-5px; width:186px; color:#fff; padding:10px; margin-left:-1px">Passe o mouse</div></div><div id="bunis"></div>
</junto>

IMPORTANTE!: Se vocês forem mudar o tamanho da imagem e botão, prestem atenção na div #bunis sempre coloquem um background:#000 nela, e diminuam/aumentem o height e width, para ela cobrir a foto. Isso é muito importante para que funcione direitinho esse estilo.

Se usar dê like!

/dai

Ribbon fofíneo

Código segue abaixo

Continuar lendo

Estilo de Áudio. #01

image

Cole isso antes de </style>

/* ESTILO POR DAI - ARCAICAS.TUMBLR.COM DISPONÍVEL EM PASSO-HTML.TUMBLR */
#caixa-audio {position:absolute;right:30px;top:20px;width:100px;height:100px;text-align:center;outline:1px solid #eee; outline-offset:-14px;border:1px solid #eee; text-align:left; font-style:italic;}
#caixa-audio img {width:100px; position:absolute; left:0px;top:0px;}
#audio {width:27px;background:#fff;opacity:1;height:27px;overflow:hidden;text-align: center;margin-top:35px; opacity:.8;}

Cole isso no lugar do {block:audio}

{block:Audio}

<div id="caixa-audio" >
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<center><div id="audio">{AudioPlayer}</div></center>    
</div>

<p>Track: {block:TrackName}<i>{TrackName}</i>{/block:TrackName}.</p>
<p>Artist: {block:Artist}<i>{Artist}</i>{/block:Artist}.</p>
<p>Album: {block:Album}<i>{Album}</i>{/block:Album}.</p>

{block:Caption}{Caption}{/block:Caption}

{/block:Audio}

Jamais remova meus créditos!
No primeiro plágio, o passo-html será deletado!

Por: Dai.

ESTILO NAVEGATION

Preview

1° Passo cole isso antes de </style>

/* ESTILO NAV POR PASSO-HTML.TUMBLR.COM */
#sdimg a {display:block; background:#f7f7f7; border:1px solid #eee; padding:10px; text-transform:uppercase; font-style:normal; margin:5px; font-size:11px; font-weight:600; font-family:roboto; letter-spacing:1px;}
#sdimg a:hover{background:{color:faixinha}; color:#fff; letter-spacing:3px;}

2° Passo cole isso dentro da sua sidebar ou onde desejar.


<div id="sdimg">
<a href="/">Um</a>
<a href="/">Um</a> <a href="/">Um</a>
<a href="/">Um</a> <a href="/">Um</a>
<a href="/">Um</a>
</div>

Estilo de Navegation Por: Dai e Gabi. Disponível em Passo-Html.
Dê like ou avise se usar! (regra)

Estilo de notes minimal #02

Se quiserem uma preview desse estilo de notes, é o mesmo desse theme meu. (clica)

Primeiro colem esse código antes de </style>


/***********
ESTILO DE NOTES POR @ARCAICAS DISPONÍVEL EM @PASSO-HTML.
************/
#dai-arcaicas {text-align:center;padding-top:5px;padding-bottom:5px;padding-left:10px;position:absolute;bottom:-70px;left:0px;width:calc(100% - 10px); border-top:1px solid #eaeaea}
#dai-arcaicas a {display:inline-block;margin:0px 4px;letter-spacing:1px;text-transform:uppercase;top:-15px;background:#f7f7f7;padding:5px;font-size:8px;font-style:normal;position:relative;}

Coisas que vocês talvez terão de mudar:

Segundo cole isso depois da div de custome dos seus posts:


{block:IndexPage}
<div id="dai-arcaicas"><a href="{ReblogURL}" target="_blank">reblog</a>
<a href="{Permalink}">{ShortDayOfWeek} às {24HourWithZero} {AmPm}</a>
<a href="{Permalink}">{NoteCount}N</a></div>
{/block:IndexPage}

Se usarem dê like ou avise, por favor!
Disponível por: Dai, @arcaicas

a