Tutorial - Perfil do autor abaixo da postagem - Cantinho Geek

16 abril, 2015

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!


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. Este comentário foi removido pelo autor.

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