Tutorial: Como criar uma página de livros lidos no blog

Como criar uma página de livros lidos

Muitas pessoas me perguntam, tanto por e-mail quanto pelo Facebook, como eu fiz a minha página de livros lidos. A verdade é que é uma codificação tão simples que e eu sempre respondia aos leitores e não me passou pela cabeça que talvez outros blogueiros tivessem a mesma dúvida, mas não perguntavam. Então, resolvi ensinar a todos aqui no blog como criar uma página de livros lidos como a minha.

O código é bem simples, como eu disse, e a primeira parte funciona tanto pra Blogger quanto pra WordPress. É puro CSS e HTML manual. A parte da “paginação” dos anos é feita em Javascript, mas não é difícil de configurar, só não tenho certeza se funciona pra Blogger (se alguém tentar, depois me informa!). Eu sei que existem formas mais práticas e “automatizadas” de criar esse modelo no WordPress, mas não pesquisei sobre isso, portanto continuo no modo manual. Vamos lá:


1. CSS: Customizando imagem e textos

Primeiro de tudo, vamos colocar dentro do style.css (ou dentro da parte CSS no Blogger) o código abaixo. O que ele faz? A primeira parte, nomeada como capa, define tamanho para a capa do livro, alinhamento, etc. Nesse tutorial, deixei o tamanho de capa que eu uso, que é 65x95px, mas você pode mudar para o tamanho desejado. Aqui também dá pra inserir efeitos como sombras, onmouseover e outros que você conheça. A segunda parte é o estilo nomeado como livros, que é a parte do texto localizado ao lado direito, onde a gente coloca as informações da obra, como título, autor, etc.

.capa {
margin: 0 10px 0 0;
float: left;
width: 65px; /* largura da imagem */
height: 95px; /* altura da imagem */}

.livros {
display: block;
float: left;
text-align:left;
margin: 0 20px 25px 0;
width: 200px; /* largura do espaço para texto */
font-size: 11px;
color: #000000;}

Se você quiser, pode alterar os nomes dos estilos (principalmente se você já tiver outro estilo com o mesmo nome), mas é necessário mudar na etapa 2 também.


2. HTML: Adicionando na página

Agora que definimos como queremos que tudo se comporte no CSS, vamos adicionar a estrutura na nossa página. MUITO IMPORTANTE: esse código precisa ser colocado na parte HTML do post, e não na parte visual.

Este código irá estruturar o box do livro. Para cada livro que você colocar, tem que adicionar todo esse código de novo. Não esqueça de trocar onde diz “ENDEREÇO DA IMAGEM DA CAPA” pelo url da sua imagem no tamanho pré-definido.


TÍTULO DO LIVRO
Nome do autor
Classificação
Link da resenha

Dica: se você aumentar o tamanho da fonte ou colocar texto demais, o box pode desconfigurar (a não ser que o tamanho da imagem também seja maior do que coloquei aqui no tutorial). O ideal é ir ajustando conforme a sua necessidade e cuidar pra ficar direitinho. 😉

Pra colocar as estrelinhas de classificação, dá pra inserir em texto ou fazer imagens em PNG transparente e upar em algum servidor. Eu uso imagem e subo para o meu servidor para usar sempre o mesmo URL, só mudando o nome da imagem para 1.png, 2.png, dependendo da nota. Se você tem hospedagem, recomendo que faça dessa forma para não upar mil imagenzinhas iguais (isso ocupa espaço, viu? É pouco, mas vai somando com o tempo). Se você usa Blogger, recomendo que hospede as imagens em algum servidor de sua confiança e guarde as URLs para mudar de acordo com a nota.

Como eu sou muito legal (HAHA!), fiz algumas estrelinhas pra vocês, no mesmo padrão que eu uso aqui no blog! Eeeeee! Só que não utilizem esse url, ok? Salvem a imagem no computador e façam upload para algum servidor.

















3. Javascript: Adicionando as abas

Para separar os livros lidos por ano, eu utilizo um script bem simples chamado Javascript Tabifier. A primeira vez que o vi foi no blog da Tamara, o True Luv. Ela simplificou muito a nossa vida traduzindo a instalação e customização desse script, tanto que nunca mudei – e sim, existem várias opções bem dinâmicas pra WordPress. Mas às vezes menos é mais.

Portanto, não adianta transcrever aqui todo o tutorial de novo, já que está bem explicadinho lá. Para saber como fazer, é só acessar esse link.


Pessoal, espero que tenham gostado do tutorial! Quem for criar uma página de livros lidos no blog, depois me mande o link pra eu ver, tá bom? Lembrando que dá pra fazer também para filmes assistidos, séries, e tudo o mais que você quiser!

Qualquer dúvida, deixem nos comentários – juro que vou tentar ajudar! 🙂

Atualização 12/06/2015: Alguns temas possuem configuração de altura para as imagens do blog (height: auto, por exemplo). Por isso, este tutorial pode não funcionar. Recomendo que, após fazer o backup do seu tema, você tente remover essa linha de programação da classe de imagem e veja se não desconfigura nada no seu layout. Normalmente, não acontece nada e a configuração da página de livros lidos funciona.

POSTS RELACIONADOS

72 comentários

  1. Responder

    Camila

    23/03/2015

    Eu acho muito lindo esse jeito de organizar os livros Gabi!
    Acho que só seu blog tem isso :))
    Gostei demais desse tutorial, parabens !!

    http://www.chaeamor.com

  2. Responder

    Amanda

    23/03/2015

    As estrelinhas! Que amor! Vou usar n.n Gostei do tutorial, Gabi! (mas achei ele um pouco trabalhoso). Parabéns pela iniciativa e paciência!

    Beijo [heart]

    • Responder

      Gabi Orlandin

      23/03/2015

      Haha, sim as estrelinhas são fofas! [love] Que bom que gostou do tutorial. Ele é meio trabalhoso de atualizar mesmo, pois cada vez que vamos adicionar um livro, tem que colocar o passo dois mais uma vez. Mas fica legal 🙂
      Beijos.

  3. Responder

    Juh Claro

    23/03/2015

    Você leu meus pensamentos, Gabi?
    Estava querendo te perguntar exatamente sobre essa página há alguns dias e, olha só, tudo explicadinho aqui haha Sua linda <3
    Vou tentar colocar no blog, apesar de já estar acostuma só com os links, imagens deixam a página bem mais bonita, né?

    Obrigada!
    Beijinhos.

    • Responder

      Gabi Orlandin

      23/03/2015

      Meu novo poder: ler pensamentos. HAHA!
      Eu acho muito mais legal com imagens. Chama mais atenção, sabe? Geralmente o pessoal não olha quando é muito texto. 😉
      Quando você fizer eu quero ver! o/
      Beijo.

  4. Responder

    Luanna

    23/03/2015

    AAAAh, já agradeci pelo twitter mas não custa nada agradecer outra vez né? Terminei de colocar no meu blog e adoreeei, fica muito fofo e organizado hahah. Além de que se mantermos sempre atualizado é muito bom para a regulagem dos livros que já lemos, vai que é sempre muitos por mês, dependendo da pessoa dá pra se perder (eu aqui hsuahs). Então Gabi, pelo primeiro tutorial já está muito bem explicadinho, parabéns! ♥

    • Responder

      Gabi Orlandin

      24/03/2015

      Obrigada por ser a cobaia do tutorial, Lu! Hahahah!
      Sério mesmo, fico muito feliz com o teu resultado. Que coisa boa que deu certo. Acho que vou fazer mais tutoriais por aqui [love]
      Beijos.

  5. Responder

    Camila Loricchio

    23/03/2015

    Ahhhh, que coisa mais lindeza!
    Adorei a ideia da aba 😀 (admito que não tinha visto ainda no seu blog essa aba dos livros lidos 😛 )
    Vou ver se faço e aí te envio pra ver como ficou! Não manjo realmente nada de css…

    Bjbj e obrigada 😀

    • Responder

      Gabi Orlandin

      24/03/2015

      Oi Cami! Que bom que gostou! o/ A parte do CSS é bem tranquila, mais complicadinho é a parte de separar os anos em abas. Mas não é o bicho. Se precisar de ajuda, dá um grito! o/
      Beijo.

  6. Responder

    Andréa Rangel

    23/03/2015

    Ah, Gabi você nem faz ideia do quanto me ajudou. Estou tentando retomar o blog e queria colocar um “catálogo” como esse reunindo todos os filmes assistidos no ano e olha, só… você postou!!! Dessa forma as informações ficam mais organizadas.

    Sempre achei essa página do seu blog muito amorzinho.
    O tutorial ficou ótimo, super bem explicadinho.
    Beijos!!

    • Responder

      Gabi Orlandin

      24/03/2015

      Oi, Andréa!
      É uma honra ver que te ajudei! 😀 E obrigada pelos elogios.
      Acho que, pela aceitação desde, vou postar mais tutoriais por aqui, hehe 🙂
      Beijos.

  7. Responder

    Ju Oliveira

    24/03/2015

    Muito útil essa dica.
    Admiro muito a organização do seu blog, tudo lindo e fofo demais, um exemplo!
    Obrigada por compartilhar, vou tentar fazer no meu.
    Beijos!

    • Responder

      Gabi Orlandin

      24/03/2015

      Oi Ju! Obrigada pelos elogios :3
      Espero que consiga fazer. Qualquer coisa é só chamar! o/
      Beijo.

  8. Responder

    Cássia

    24/03/2015

    Oi Gabi, tudo bem?

    Utilizei seu tutorial para dar um upgrade no índice de resenhas do meu blog ♥ Estava doida por uma personalização assim, então nem preciso dizer que amei sua atitude, né? [love]

    Se você quiser conferir: http://www.procurei-em-sonhos.com/p/resenhas.html

    Beijinhos :*

    • Responder

      Gabi Orlandin

      25/03/2015

      Oi, Cássia! Tudo bem.
      Que bom que gostou do tutorial. Adorei a sua página, ficou super bacana! [smile]
      Beijos.

  9. Responder

    Djenifer

    24/03/2015

    Irei te amar eternamente por isso.
    Sério.
    Faz tempo que eu sou louca pra fazer isso hahaha

    obg obg obg obg o Acidamente Sensível vai usar e vai creditar você. claro!

    http://www.acidamentesensivel.com
    Beijinhos

    • Responder

      Gabi Orlandin

      25/03/2015

      Hahaha, que querida, Djeni! Fico feliz que tenha gostado do tutorial. E obrigada pelo crédito [love]
      Beijo.

  10. Responder

    Ray

    24/03/2015

    Ahh que bacana Gabi!
    Adorei você dividir os códigos com a gente 🙂
    Quando tiver feito uma lista de livros que já li, vou tentar acrescentar no meu também, já que é blogger, te digo se funcionou depois que postar 😉
    Adoro passear por aqui, cada dia tem sido mais fofo e com mais conteúdo.
    Obrigada pelo entretenimento hehe
    Sucesso e bjão! <3

    • Responder

      Gabi Orlandin

      25/03/2015

      Oi, Ray!
      Quando você fizer eu quero ver, sim!
      E que bom que está gostando do conteúdo postado aqui. Fico MUITO feliz em saber isso! <3
      Beijos.

  11. Responder

    Nataly

    25/03/2015

    Salvei nos favoritos! Vou tentar fazer no meu depois.
    Obrigada! <3

  12. Responder

    Giovana Teotonio

    25/03/2015

    Gente que tutorial perfeito!! Parabéns Gabi!!

  13. Responder

    Giovana Teotonio

    25/03/2015

    Olhe como ficou Gabi! [love] [love] [love]

    http://quetal-blog.blogspot.com.br/p/jogos-jogados.html

  14. Responder

    Bia Medeiros

    26/03/2015

    Adorei o tutorial, Gabi. Desde que comecei na blogosfera eu tive interesse em customização de layouts, eu baixava um layout disponível e aí fazia as minhas modificações (coisa pouca, básica) e foi por causa desse interesse que entrei no curso de Ciência da Computação (apesar de que não vou estudar HTML e CSS no curso). Pretendo aprender um dia, ficar fera no assunto e personalizar meu próprio blog. Ótimo post! :*

    • Responder

      Gabi Orlandin

      27/03/2015

      Foi assim que aprendi quase tudo o que sei, Bia: fuçando, errado e acertando. [wink] E também foi por causa dos blogs que eu resolvi cursar Design Gráfico. Que demais isso, né? Dona Bia, estude muito e fique super craque, que aí você vai programar um futuro layout meu hahaha!

  15. Responder

    Isa

    26/03/2015

    Nossa Gabi você não sabe o quanto eu procurei por essas estrelinhas de rating. Eu super vou usar com certeza! AMEI <3

  16. Responder

    Mari Cruz

    29/03/2015

    amei! amei! amei! amei! amei! amei! vc arrasa!
    vou tentar fazer aqui em casa [love] [love] [love]
    bjos

    • Responder

      Gabi Orlandin

      30/03/2015

      Eeeee! Oba! Que bom que você gostou!
      Depois quero ver a página. 😉
      Beijos.

  17. Responder

    Fernanda Rocha

    30/03/2015

    Ameiii a dica, vou implantar no meu blog assim que eu encontrar alguém para fazer um layout legal. 🙂

    • Responder

      Gabi Orlandin

      30/03/2015

      Eba, depois quero ver, tá? Tanto a página como o layout, claro! <3
      Beijos.

  18. Responder

    Beatriz Cavalcante

    03/04/2015

    Eu amei muito esse tutorial porque eu pensava que fosse uma coisa mega difícil! Pelo jeito é bem fácil e fica muito bonito o resultado. Eu já to na doença de querer trocar de layout e acho que vou aderir a essa página de livros porque eu acho super lindinha! <333

    Beijos!

    • Responder

      Gabi Orlandin

      04/04/2015

      Bia, eu já passei pela doença de querer trocar o layout muitas vezes, HAHA! Vira e mexe me dá uma coceirinha pra fazer isso, e como não quero mudar por enquanto, acabo fazendo atualizações no tema atual. Que bom que gostou do tutorial! <3
      Beijos.

  19. Responder

    Emmy

    12/04/2015

    Gabi, adorei isso *.* Vou fazer uma página de “Materiais testados” XD
    Esse teu blog tá cada vez melhor *.* Bjs!

    • Responder

      Gabi Orlandin

      13/04/2015

      Ahh, que ótima ideia! Se precisar de qualquer coisa, dá um grito!
      Que bom que tu gosta daqui. *-*
      Beijos.

      • Responder

        Emmy

        14/04/2015

        Claro que gosto, Gabi, o Fluffy é uma inspiração/referência web pra mim!
        Vou fazer mesmo *-* Depois te mostro/peço ajuda xD
        Beijos!

  20. Responder

    Joi Cardoso

    16/04/2015

    Gabi finalizei! Muito obrigada por responder minhas dúvidas! Deu trabalho mas no final vale a pena!
    http://www.estantediagonal.com.br/p/estante-diagonal.html

    Beijos Joi Cardoso

    • Responder

      Gabi Orlandin

      19/04/2015

      Legal, Joi! Ficou ótimo!
      E pela ajuda, de nada. Quando precisar é só chamar. 🙂
      Beijos.

  21. Responder

    Nizete Ribeiro

    17/04/2015

    Boa Noite, acho que a configurações de resenhas não funcionam no Blogger. Coloquei o 1ºcódigo no CSS, copiei e colei o código na página em html e substitui pelos dados do livro e autor, e quando volto pra visualizar em imagem, nada muda, fica tudo desconfigurado, fora de ordem, a imagem grande e não nas medidas pré-determinadas.
    É uma pena pq gostei muito da organização e do visual.
    Bjos
    Ni
    Cia do Leitor

    • Responder

      Gabi Orlandin

      21/04/2015

      Oi, Ni!
      Alguns leitores do blog que usam o blogspot fizeram o tutorial e ele funcionou normalmente. O que pode não funcionar é aquela segunda parte das “abinhas”, mas a parte do CSS e HTML funciona. Talvez é alguma configuração das imagens do seu layout que está deixando desalinhado, porque aconteceu coisas assim com algumas pessoas. 😉
      Beijos.

  22. Responder

    Anna Gabriella

    02/05/2015

    Oie, Gabi!
    Você sabe de algum tutorial nesse estilo que posso aplicar no blogger?

    • Responder

      Gabi Orlandin

      03/05/2015

      Oi, Anna!
      Esse tutorial serve para blogger, só o que eu acho que não funciona é a parte do Javascript, onde se adicionam as abinhas. Mas as etapas 1 e 2 funcionam sim, alguns leitores fizeram e deu certo.
      Beijos.

      • Responder

        Anna Gabriella

        04/05/2015

        Oie, realmente, só a parte das abas não funcionou. Mas acabei voltando com outra dúvida, eu queria colocar todos os livros em um único post, mas subdivididos por gênero. Tipo assim, o titulo “Aventura” e logo após os livros, depois “Fantasia”… Mas não consegui colocar os titulos assim, eles são todos deslocados para uma espécie de quarta coluna :/ Sabe o que posso fazer? Já tentei aumentar o espaço ocupado pelos livros, mas não deu certo.
        Beijinhos

        • Responder

          Gabi Orlandin

          05/05/2015

          Oi Anna!
          Desculpa pela demora em te responder.
          Eu acho que eles ficam como se fossem colunas porque os livros são assim. Então não adianta dar enter, tem que colocar um separador antes desse subtítulo. Não sei como é a programação do seu blog, mas aqui normalmente eu uso o código < hr > (sem os espaços) pra separar – ele faz uma linha na página. Aí o que tem embaixo começa do início. Tenta e depois me fala se conseguiu, tá? Qualquer coisa, dá um grito!
          Beijos.

  23. Responder

    Mari Abramo

    06/06/2015

    gabi… ele deveria redimensionar a capa dos livros pra esse 65×95? eu tenho algumas capas que são mais compridas, ele redimensiona mas parece que somente a largura, aí desconfigura… sei lá…

    • Responder

      Mari Abramo

      06/06/2015

      gabi… não sei o q houve… tive que redimensionar tudo na mão… rsrs… mas ficou lindo! olha: http://butterflysoul.com.br/resenhas-2/
      obrigadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <3
      bjos

      • Responder

        Gabi Orlandin

        06/06/2015

        Oi Mari! Provavelmente é alguma configuração das imagens do layout, alguma classe geral de imagens que não está deixando redimensionar a altura. Mas que bom que no fim deu certo heheh! Ficou lindo! <3
        De nadaaaaa! :*

  24. Responder

    Bruno Marukesu

    23/09/2015

    Oi Gabi
    Então, quando coloco o código na postagem e visualizo o nome do livro, autor e classificação fica tudo um ao lado do outro e não abaixo. O que faço??????
    Ah, e como colocar a imagem das classificações?
    Meu blog é blogger.

    • Responder

      Gabi Orlandin

      27/09/2015

      Olá, Bruno.
      Não sei o que pode estar acontecendo, mas tente adicionar o código < br > (sem os espaços) depois de cada linha, pra ver se funciona.
      E para upar as imagens, você pode fazer pelo blogger mesmo e guardar as URLs em um bloco de texto, pra copiar e colar no local onde ficam as estrelas. Ou pode upar em um site tipo o http://tinypic.com/ e fazer o mesmo.
      Espero ter ajudado.

      • Responder

        Bruno Marukesu

        29/09/2015

        Oi Gabi
        Obrigado pela ajuda.
        Só precisava ser acrescentado na fente das linhas o código
        Sucesso ao blog.
        Quando estiver pronto minha página de livros lidos vou mandar o link. ^_^
        Obrigado por esse lindo tutorial.

        • Responder

          Gabi Orlandin

          30/09/2015

          Ah, que bom saber que deu certo! Manda o link sim, que vou querer ver! 😉
          Abraços.

  25. Responder

    Divana

    29/10/2015

    Oi Gabi!
    Eu coloquei tudo passo a passo no blogger, que estou usando, e a parte das abas funcionaram, acredita? Só que eu tive um probleminha pra finalizar: a primeira parte do script do tabber, a document.writer, estava desconfigurando todo o meu css do layout, puxando todo o meu header principal pra baixo.
    Por enquanto vou arrumar do jeito estático normal… Mas se souber como arruma você me ajuda? [think] [confused]
    Obrigada sua linda!

    • Responder

      Gabi Orlandin

      03/11/2015

      Oi, Divana!
      Essa parte do tabber eu não conheço, peguei pronto do tutorial do TrueLuv, que indiquei no post. Então não posso te ajudar, infelizmente 🙁
      Espero que você consiga – ou que alguém saiba, hehe.
      Beijos.

  26. Responder

    Thaísa Tavares

    04/01/2016

    Gabi, no meu html (blogger) não achei o pedaço escrito “Style.css” por isso não ficou claro pra mim como colocar o primeiro código. E se eu tivesse achado, também não entendi, é só colocar ele ali e pronto? não precisa mexer em nada?

    • Responder

      Gabi Orlandin

      04/01/2016

      Olá, Thaísa!
      No blogger, você vai inserir o primeiro código entre as tags

      . Só colocar, se você não quiser personalizar nada.

    • Responder

      Gabi Orlandin

      04/01/2016

      Desculpa, o comentário foi errado por causa do uso dos códigos nele.

      É entre as tags < style > e < /style > (sem os espaços em branco).

  27. Responder

    Juliana

    08/01/2016

    Gabi, muito muito obrigada por esse tutorial *-*
    Antes era uma luta pra organizar as imagens na página das resenhas e sempre que eu ia colocar uma nova bagunçava tudo. Agora ficou tão bonitinho!
    Muito obrigada mesmo <3

    • Responder

      Gabi Orlandin

      12/01/2016

      Oi, Juli!
      Olhei lá no seu blog e a página ficou linda mesmo! Muito boa a ideia de montar a página de resenhas nesse estilo. Fiquei bem feliz que você gostou do tutorial <3

  28. Responder

    Raquel

    13/04/2016

    Oi, eu adorei seu tutorial e estou tentando fazer aqui. hahahah
    Só tenho uma pergunta, como eu faço para diminuir o espaçamento entre as linhas das informações sobre o livro? Porque no meu fica muito longe e eu queria que ficasse mais grudadinho. 🙂

    • Responder

      Gabi Orlandin

      13/04/2016

      Oi, Raquel!
      Que bom, hehe! Pra diminuir o espaçamento entre as linhas, use o comando line-height dentro de .livros, com a medida em px. Por exemplo, 10px, 12px, etc. 😉
      Qualquer dúvida, é só pedir!
      Beijos.

      • Responder

        Raquel

        14/04/2016

        Funcionou direitinho! Obrigada! 🙂

  29. Responder

    Raquel

    16/04/2016

    Oi, sou eu de novo! hahahaha
    Então, eu não sei como colocar em colunas.
    Fica tudo um embaixo do outro. Já tentei usar uns códigos de html que vi por ai, usando <div e tudo o mais, mas não fica certinho.
    Como que eu faço?
    Obrigada novamente.

    • Responder

      Gabi Orlandin

      29/04/2016

      Oi, Raquel!
      Me desculpa pela demora em te responder. Percebi que tem um código de linha ( < br >, sem os espaços) antes do início do código. Você colocou os códigos na parte HTML do post/página? Se não for isso, não sei o que pode ser. 🙁

  30. Responder

    Késsia Aparecida de Oliveira

    20/07/2016

    Olá, tudo bem?
    Encontrei seu blog por acaso, estava procurando como acrescentar uma página de leituras e encontrei o seu, suuuperrr fofoooo!!
    Vou tentar fazer no meu, se der certo te falo!
    Vou te seguir!
    Bjs e obrigada!

    • Responder

      Gabi Orlandin

      22/07/2016

      Oi Késsia!
      Fico feliz que você tenha gostado do blog! Se você fizer a página de livros no seu blog, depois me manda pra eu ver! 😉
      Beijos.

  31. Responder

    Caroline Sant

    18/01/2017

    Oi, achei o máximo esse tutorial <3
    Queria saber como você coloca a fotinha da classificação no código do HTML, por que eu não to conseguindo!
    Se puder me ajudar, eu ficaria mega feliz, ah e seu blog é lindão, parabéns!
    Bjão *-*

  32. Responder

    Caroline Sant

    18/01/2017

    Infelizmente no meu não está dando certo, poxa, queria tanto D: D: D:

    • Responder

      Gabi Orlandin

      21/01/2017

      Olá, Caroline!
      Às vezes, dependendo da programação do layout, é preciso inserir alguns códigos um pouco diferentes. Mas lembrando que tudo é feito no modo HTML, inteiramente com códigos.
      Você me questionou no comentário anterior sobre como inserir a imagem das classificações, as estrelinhas. Também é o código da imagem. Você upa as imagenzinhas e guarda a URL delas. Depois cola onde elas precisam estar, com aquele código que começa com img src.

  33. Responder

    Panda

    21/03/2017

    Amei o post, muito util e é muito bom ter pessoas que compartilham o conhecimento. Bacana a iniciativa! *-*

  34. Responder

    Júlia

    16/05/2017

    Oi Gabi, tudo bem? Estava louca por uma postagem que me ensinasse a criar esta aba no blog. Adorei o jeito como você abordou, muito simples e didático. Confesso que tive dificuldades para colocar o texto ao lado das fotografias, não consegui de jeito nenhum. Porém, como está já me agradou bastante. Muito obrigada por compartilhar isto com seus leitores.

    Grande beijo,
    http://www.paginasincriveis.blogspot.com.br

    • Responder

      Gabi Orlandin

      17/05/2017

      Oi Júlia! Tudo bem, e com você?
      Que bom que gostou do tutorial! Fico feliz com isso 🙂
      Sobre o texto ao lado, dei uma olhada no seu blog e percebi que o “problema” deve estar na sua classe de css relacionada às imagens, que já é do próprio tema. Tem uma classe chamada post-body que tem uma linha chamando float none. Provavelmente o probleminha está ali, tenta dar uma olhada! Espero que consiga.
      Depois me conta se deu certo!
      Beijos.

ESCREVA UM COMENTÁRIO