Tutorial - Perfil do autor abaixo da postagem

quinta-feira, abril 16, 2015 14 Comentários A+ a-



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!


Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




14 comentários

Escreva um comentários
18 abril, 2015 Deletar

Surpresaa, para você no seu e-mail, parabéns minha flor <3
Espero que goste, beijoos

Responder
avatar
Géssica Marques
EQUIPE GEEK
18 abril, 2015 Deletar

Ownt vi aqui!
Super feliz!!!

Responder
avatar
Géssica Marques
EQUIPE GEEK
25 dezembro, 2015 Deletar

Sério? Que estranho...
Eu testei ele já e funcionou. =/

Responder
avatar
EAD Cursos Grátis
EQUIPE GEEK
23 junho, 2016 Deletar

Parabéns Géssica! O seu tutorial foi o único que deu certo no meu blog. Muito Obrigado!

Responder
avatar
Géssica Marques
EQUIPE GEEK
24 junho, 2016 Deletar

Aee!
Que bom hehe!

Responder
avatar
Vivi Lima
EQUIPE GEEK
02 agosto, 2016 Deletar

Oiii, obrigada pelo tutorial, mas tenho uma dúvida.
Quando o blog tem mais de autor, como fazer essa edição?

Obrigada mais uma vez, beijo!

http://flertandocomlivros.blogspot.com.br/

Responder
avatar
Géssica Marques
EQUIPE GEEK
02 agosto, 2016 Deletar

Oie!
Acho que para mais de um autor tem que ser outro código.
Infelizmente não tenho.

Beijinhos.

Responder
avatar
02 outubro, 2016 Deletar

Que pena .. Não consegui justar o lado esquerdo ..

Responder
avatar
03 novembro, 2016 Deletar

Conseguiiiiiiiiiiiiiiiiiiiiii Amiga !!!!!!!!!!!!!!!
Na verdade não tinha dado problema , é que o template que eu uso , tem margem padrão no lado esquerdo , e todos os gadgets adicionados seguem essa margem , e como no lado direito ele permite os gadgets ultrapassar a margem , eu não percebi esse detalhe . Mas recentemente eu tentei novamente , decidido que colocaria mesmo se não conseguisse ajustar , mas aí eu notei essa margem ...
Obrigado !!!!!!!!

Responder
avatar
Géssica Marques
EQUIPE GEEK
03 novembro, 2016 Deletar

AEEEEE!!
Que bom que conseguiu!!
De nada ;D

Responder
avatar
Gabriela Pantoja
EQUIPE GEEK
08 fevereiro, 2017 Deletar

Depois de visitar um milhão de blogs atrás de tutoriais ensinando isso, o seu foi o único simples e fácil de botar pra funcionar! Amei e já editei o meu do meu jeitinho! :*

Responder
avatar
Géssica Marques
EQUIPE GEEK
08 fevereiro, 2017 Deletar

Oieee!!
Que booom que o tutorial te ajudou!!
*-*

Responder
avatar

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.