ttnovo: Perfil do Autor abaixo da postagem
Mostrando postagens com marcador Perfil do Autor abaixo da postagem. Mostrar todas as postagens
Mostrando postagens com marcador Perfil do Autor abaixo da postagem. Mostrar todas as postagens

16 de abril de 2015

Tutorial - Perfil do autor abaixo da postagem
abril 16, 2015 14 Comentários


Olá pessoal! Depois de um bom tempo sem trazer tutoriais cá estou! Não sei repararam, mas antes todos os meus posts tinham o meu perfil abaixo da postagem, mas agora não tem como para vocês verem, pois eu retirei, mas ficará assim:


Caso queira aprender a colocar isso no seu blog continue lendo.
E todos os créditos vão para o blog Reino Kawaii! 


Primeiramente, aperte Ctrl+F e procure pela seguinte tag:  ]]></b:skin>

Antes dela cole o seguinte código:

/**************perfil do autor*******/
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
.aboutme{
float: left;
padding: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff; /** cor do texto**/
width: 670px;
background: rgb(255, 210, 210);
margin: 0 10px 5px 0;
border: 1px solid #FFABAB;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px #FFABAB;
position: relative;
}
.aboutme:before {
content: "";
position: absolute;
bottom: -5px;
left: -1px;
width: 6px;
height: 5px;
background: #FFABAB; /**** cor do fundo***/
border-left: 1px solid #FFABAB;
border-right: 1px solid #FFABAB;
box-shadow: 0px 1px 1px #FFABAB;
}
.afoto{
width: 100px;
float: left;
padding: 0;
border-radius: 100%;
border: 1px solid;
margin: 0px 5px -5px 0px;
}
.tituloo{
font-family: 'Lobster Two', cursive; /**fonte**/
font-size: 28px; /**tamanho da fonte**/
margin: -140px 140px 0px 0px;
text-align: center; /***alinhamento do texto**/
}
/*********fim do perfil do autor******/

Após isso procure pelas seguintes tags:

<div class='post-footer'> 
ou

<div class='post-footer-line post-footer-line-3'/>

E antes, cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'>
<div class="aboutme">
<p><img class='afoto' src="URL-DA-SUA-FOTO"/><span class='tituloo'>Postado por vc</span> Escreve, escreve, escreve.</p>
<p>Escreve, escreve, escreve.</p>
</div></b:if>

Prontinho!! Agora é só salvar e ver se está tudo certo! Qualquer dúvida, comente!!
Até a próxima! E caso queiram ver algum tutorial aqui é só comentar que tentarei trazer!


Instagram