Tutorial - Perfil do autor abaixo da postagem



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!


Compartilhe este post:

Comentários
15 Comentários

15 comentários :

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

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

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

    ResponderExcluir
  4. 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/

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

      Beijinhos.

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

    ResponderExcluir
    Respostas
    1. 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 !!!!!!!!

      Excluir
    2. AEEEEE!!
      Que bom que conseguiu!!
      De nada ;D

      Excluir
  6. 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! :*

    ResponderExcluir
    Respostas
    1. Oieee!!
      Que booom que o tutorial te ajudou!!
      *-*

      Excluir
  7. Não funcionou, testei aqui, mas sou muito desajeitada com HTML. :/

    https://overpower2.blogspot.com.br/

    ResponderExcluir

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.

 
Copyright © Cantinho Geek. Designed by OddThemes