12/03/2017

avatar do autor ao lado da postagem

| |
Oi! Eu falei que voltava logo e cá estou eu, finalmente de volta e muito feliz. ♡ Eu finalmente contratei uma internet decente e estou conseguindo me organizar com a rotina da faculdade. Ouvi um amém? Eu sei que prometi postar em todos os sábados, mas eu estava tão cansada que resolvi adiar o post por um diazinho. Espero que não se importem. Estou trabalhando nisto, estudando e ainda colocando as séries em dia, se isso não é ser um exemplo de pessoa, eu não sei o que é. Falando em séries, têm alguma para me indicar? Estou na terceira e, até então, última [cries in norwegian] temporada de SKAM e gente, que série amor. Ah! Também terminei recentemente The OA, que não tem nada a ver com o tema da anterior, mas é uma das coisas mais geniais que eu já vi na vida. Recomendo muito. Enfim, hoje atendo a um pedido de leitor de como colocar o avatar do autor ao lado da área de postagem. Eu estava com muita saudade de trazer tutoriais para cá. Espero que ajude a todos com a mesma dúvida e que gostem. Enjoy.

☆ preview:

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por </head> e dê enter. Depois de ter encontrado, cole acima/antes o seguinte código:

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script> 

Em seguida, procure por <b:if cond='data:post.title'>. Haverão dois resultados para esta tag e nós usaremos o segundo. Assim que encontrar, cole o seguinte código acima/antes dele:

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/> 

 Por fim, para personalizar, busque por ]]></b:skin> e acima/antes disto cole o código a seguir:

.avatar-author {
background: #fff;
padding: 1px;
border: 3px solid #515050; /* cor da borda */
margin-right: -40px; /* mude para ajustar */
float: right; /* mude para right ou left */
width: 25px; /* largura do avatar */
height: 25px; /* altura do avatar */
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
}
.avatar-author:hover {
border-radius: 25px;
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-webkit-transform: rotate(360deg);
}

Visualize para ver se está tudo certinho e salve. É bem simples e o resultado fica super fofinho, perfeito para blogs que tenham mais de um autor. Qualquer dúvida, podem comentar e não esqueçam os créditos. Por enquanto vou ficando por aqui, mas logo volto para atender mais pedidos ou postagens aleatórias. Até lá, se cuidem e fiquem bem.

6 comentários

  1. Konnichiwa!
    Amei o tutorial! Eu vou tentar pôr no próximo layout do meu blog.
    Finalmente voltaste, eu estava tão empolgada por ver posts novos no teu blog.
    Aceitas parceria? O meu blog fala de tutoriais, cultura asiática, animes e etc.
    Kissus and Sayonara!
    ice-cream-da-leno.blogspot.com

    ResponderExcluir
    Respostas
    1. Yo!
      Que bom que gostou, fico feliz. ♥ Espero mesmo que use. Ah, que amorzinho, eu também estava louca para voltar com o blog.
      Já respondi quanto à afiliação no seu blog, aguardo resposta. Beijinhos.

      Excluir
  2. Leitora nova (que nunca teve coragem de comentar), como vai? Fico tão feliz que tenha voltado! Não tenho tido muito tempo pra assistir séries, mas por enquanto eu ando assistindo Pretty Little Liars, já assistiu? É muito bom! SKAM tá na minha lista de espera, parece ser ótima também. Sobre o tutorial, adorei. Tão fofo, mal posso esperar para usá-lo em algum lay!

    Até mais ♥

    ResponderExcluir
    Respostas
    1. Seja bem-vinda! <3 Oh, não tinha coragem de comentar? Que bom que resolveu fazê-lo, pois adoro receber os recados de vocês. Também estou muito feliz em voltar. Eu estou esperando a parte final de PLL que sai esse mês, mas particularmente acho que a série se perdeu muito em enredo. Acho que está na hora de acabar, mesmo que ame todos os personagens (principalmente a Hanna ♥). Assista SKAM, é maravilhosa. Que bom que gostou do tuto, na próxima, não esqueça de deixar o link do seu blog para que eu possa visitar, sim?

      Até mais, sweetheart.

      Excluir
  3. Garotaaaa eu assisti The OA, achei mega genial, a história te prende por inteiro, fiquei decepcionada em saber que talvez não tenha continuação... Aff
    Bem, eu indico Luke Cage, Greenleaf, Stranger Things que eu amei até demais!
    Gostei do tutorial, achei super foda!
    Faz faculdade de que? A minha começa segunda estou super empolgada,mesmo não sendo a qual eu queria fazer, mais é uma boa faculdade!
    Que saudade do empire kawaiii!
    Beijoooooooos
    http://onlypoison1.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. AAAAAH, eu estava louca pra encontrar alguém que tivesse visto The OA, porque é simplesmente genial. E para animar seu coraçãozinho, te trago a notícia que a segunda temporada foi confirmada! ~Pausa para o surto.~
      Eu estou ensaiando assistir Stranger Things desde o lançamento. Vou estar começando em breve.
      Que bom que gostou, fico feliz.
      Eu estou cursando Licenciatura em Linguagens (Português, Inglês e Arte) ♥. Desejo toda a sorte do mundo nessa sua nova fase e que você se encontre no curso escolhido, porque fica tudo muito mais leve quando gostamos do que fazemos.
      Que saudades de você, do grupo no whatsapp, de tudo.

      Beijos e abraços apertados.

      Excluir

Não ofenda autores ou leitores.
Deixe o link do seu blog para que eu visite.
Proibido comentários apenas com divulgação.
Comente seu pedido ou sugestão.