[Blogger - Customização] - Customizar links externos com seletores CSS no Blogger

Olá querido leitor, no artigo de hoje veremos como customizar os links externos utilizando seletores CSS. Como todos já devem saber, é comum que ao escrevermos algum artigo adicionemos links ao mesmo, seja para exemplificar uma ideia, citar uma fonte, fazer algum tipo de atribuição ou qualquer outro motivo, e grande parte desses links geralmente são externos (links de outros blogs/sites).

Mas explicar como funciona esse tipo de customização é complicado, o melhor mesmo é demonstrá-lo! Visite nosso blog de testes para ver esta customização na prática. Algumas pessoas diferenciam links adicionando classes CSS à eles, o que para os avanços recentes da web é algo um pouco ultrapassado e trabalhoso, uma vez que sempre que você quiser aplicar um determinado estilo a tal link você precisará adicionar a classe à ele. Para conseguir o efeito mostrado no exemplo acima utilizaremos um seletor CSS, que adicionará a imagem a qualquer link externo de maneira automática! Veja o passo a passo logo abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima dele, adicione este outro código.

/* Customização de links externos */
.post-body a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary a[href ^= 'http']:not([href *= 'bloggandonaweb.']) {
    background: transparent url(link-da-imagem) no-repeat right center;
    padding-right: 18px;
}
.post-body div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.post-body table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-content table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary div.separator > a[href ^= 'http']:not([href *= 'bloggandonaweb.']),
.entry-summary table.tr-caption-container td > a[href ^= 'http']:not([href *= 'bloggandonaweb.']) {
    background: none !important;
    padding-right: 0px !important;
}


Substitua a parte que foi destacada em vermelho pelo endereço do seu blog, mas sem o ".com", ".com.br" ou qualquer outro domínio que você possua. Altere também a parte destacada em azul pelo link da imagem que você queira utilizar para indicar que o link é externo (você pode encontrar imagens clicando aqui).

4. Para finalizar clique no botão Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, a partir de agora qualquer link que você adicionar em seu blog que direcione o leitor para outro site aparecerá com a imagem que você escolheu.

NOTA: caso você tenha conhecimentos básicos sobre CSS, poderá adicionar outras propriedades para customizar ainda mais os links, tais quais: alterar as cores, fontes, tamanhos etc.

Espero que tenham gostado da dica e que façam bom uso! :)

Com informações: Vagabundia.

Atualização — 24.03.2012 às 17h00
O código do passo 3 foi atualizado para inclusão de uma "condicional", que evita que imagens que direcionam para sites externos apareçam com a imagem de link externo, o que poderia, em alguns casos, quebrar a diagramação do texto do artigo.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 10 comentários neste artigo!

  1. Nossa Igor, muito legal este código. Já estou utilizando ele em meu blog. Muito legal.

    ResponderExcluir
    Respostas
    1. Olá João, fico feliz que o código tenha sido útil para ti! Faça bom uso.

      Excluir
  2. Nos botões do meu blog que possui um efeito gradiente eles ficaram sem fundo de cor. Isso pode ser resolvido?

    ResponderExcluir
    Respostas
    1. João, os fundos criados com gradientes não permitem que imagens se sobreponham sobre eles. Por isso, você tem duas opções para resolver tal problema.
      Opção 1: Ao invés de criar o gradiente com CSS, você deverá utilizar uma imagem em gradiente como fundo, pois com os novos padrões da web é possível utilizar mais de 1 imagem como plano de fundo de um elemento.
      Opção 2: Provavelmente os links externos que possuem esse fundo gradiente em CSS possuem uma classe, adicione essa classe a segunda parte do código do passo 3 para que tais links não adquiram a imagem de link externo.

      Excluir
  3. Olá, Igor!

    Que ótima dica! Eu já havia visto que a Wikipedia utilizava o destaque dos links externos, mas não imaginava que isso poderia ser feito com a customização do CSS.

    Já apliquei essas alterações no meu blog de testes e funcionaram perfeitamente. Futuramente, avaliarei a viabilidade aplicá-las também no Gerenciando Blog.

    Obrigado por compartilhar!

    Um abraço!

    Adelson Smania

    ResponderExcluir
    Respostas
    1. Olá Adelson, o uso desta técnica ainda não é muito grande, uma vez que existem detalhes um pouco mais importantes para serem pensados em um blog, do que a indicação de os links serem externos ou não, mas é sempre bom saber como fazer alguma customização — ainda mais se combinar tal customização com outras técnicas. Fico feliz que tenha conseguido aplicar em seu blog, e espero que seja útil! Eu que agradeço a visita e o comentário, volte sempre! Abraços. :)

      Excluir
  4. Oi, gostei mto do seu tutorial e gostaria de saber como colocar uma imagem ao lado dos links como vcs fizeram no menu do blog de vcs (as setinhas azuis ao lado dos marcadores), pois gostaria muito de fazer isso no meu site tb. Obrigada!

    ResponderExcluir
    Respostas
    1. Olá Patrese, fico feliz que tenha gostado do artigo. Quando as imagens que você citou, publicarei um artigo ainda hoje mostrando como fazer essa alteração. Agradeço a visita e o comentário, volte sempre!

      Excluir
  5. Eu tinha esquecido o nome novo do Bloggando na Web e fiquei procurando nos meus favoritos, você acredita?? Huahuahua, a loka!

    Acabei de implementar esse recurso no Saga e ficou ótimo.

    Gostaria de ver artigos sobre modelos responsivos de templates para Blogger. =D

    Abraço!

    momentumsaga.com

    ResponderExcluir
    Respostas
    1. Olá Sybylla, rsrs, isso acontece mesmo, eu demorei um pouco pra me a acostumar também. Quanto a sua sugestão, vou pensar em algo para escrever sobre esse assunto, mas parar criar layouts responsivos é extremamente importante ter conhecimentos em HTML e CSS. De qualquer forma, postarei algo! Agradeço a visita e o comentário. Volte sempre!

      Excluir