Duas Dicas de CSS Que Vieram Bem a Calhar

Já faz bem uns 7 anos que eu não mexo com HTML nem com CSS, por isso às vezes me enrolo na hora de editar o código do blog. Felizmente, aí está o Google para me ajudar a encontrar outros blogueiros e programadores mais competentes e que já encontraram (e resolveram) os problemas nos quais eu empaco.

E assim, como aquilo que se recebe de graça deve ser aceito com gratidão e redistribuído com igual generosidade, seguem duas dicas de CSS que vieram bem a calhar depois que eu já tinha desistido de encontrar uma solução simples.

A primeira vem do blog Helpblogger, a cujo autor, mesmo não identificado, agradeço por ter me ajudado a dar sumiço na praga dessas bordas e no fundo branco que assombravam as imagens nos meus posts, arruinando o layout na época em que este blog tinha fundo colorido. Mesmo agora que o blog tem um fundo branco, a borda ficava muito feia, porque envolvia a legenda da imagem também e, como a legenda muitas vezes fica maior do que a imagem, ficava super esquisito. Bordas sempre foi uma coisa complicada pra mim e eu já tinha feito várias tentativas mal-sucedidas de me livrar destas, até desistir e apelar o pro Google, que me levou para o Helpblogger:

http://helplogger.blogspot.com.br/2012/04/how-to-remove-blogger-pictureimage.html

Como o blog é em inglês, ele se refere à interface do blogger com os nomes todos em inglês também, por isso vou colocar aqui os nomes em português pra quem precisar:

1. Clicando no item "Modelo" do menu lateral esquerdo do Blogger, aparece a seção "Agora no blog" com o botão "Personalizar".
2. Clicando no botão "Personalizar", vamos para a tela "Designer de modelo do Blogger". Lá, é só clicar em "Avançado" e, dentro das opções avançadas, em "Adicionar CSS".
3. Finalmente, no campo "Adicionar CSS personalizado", colar o seguinte trecho de código:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Se existem formas mais simples e/ou mais elegantes de fazer isso, não sei, mas a solução do Helpblogger é simples e elegante o suficiente pra mim, e funcionou perfeitamente.

A segunda dica vem do Adrian Roselli, do excelente artigo "I Don't Care What Google Did, Just Keep Underlining Links" no seu blog:

http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html?showComment=1404224813793#c3703056205160121625

Concordo totalmente com o Adrian no seu artigo e recomendo a leitura deste e dos demais artigos no site. Quanto à dica em si, como o Blogger, por padrão, não sublinha mais os links, ele ensina como fazer com que os links dentro do seu post fiquem sublinhados.

div#main a:link {text-decoration: underline;}

O detalhe do "div#main" é para garantir que os demais links (no caso do meu blog, as seções "Arquivo do blog", "Marcadores", "Meus links" e "Estou seguindo") não fiquem sublinhados. Como muito bem disse o Adrian, esses são os links intuitivos, que podem realmente abrir mão do sublinhado em favor de um layout menos poluído. Já os links no corpo do post precisam ser destacados de alguma forma, pois não se pode esperar que o leitor fique passando o mouse por cima de todo o texto para descobrir onde há links.

Encerrando, então, fica aqui novamente o meu agradecimento ao Adrian e ao pessoal do Helpblogger, esperando ter conseguido também ajudar a outros blogueiros.