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

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.