Para os novatos que fizeram um blog estão cheios de dúvidas, em relação a colocar um link em um texto ou em uma imagem e fazer com que ele abra em uma nova janela ou em uma nova aba do navegador. Algo simples de se fazer e usar, além de manter o seu leitor por mais tempo lendo seus artigos, pois ele irá visualizar este conteúdo em uma outra aba ou guia sem que ele saia da página anterior a qual estava lendo.
Pois bem, há duas maneiras de fazer essa configuração. A primeira é bem simples e é feita diretamente no editor do Blogger, e a segunda é preciso inserir um código no editor HTML da postagem.
Como configurar pelo editor do Blogger
Para configurar pelo editor da postagem vá área de postagem certamente e clique em link (1) na barra de ferramentas do editor. Abrirá uma janela em que você irá inserir o endereço web (2) e o nome do texto que será exibido. Feito isso, assinale logo abaixo a opção abrir este link em uma nova janela (3). Como mostra a figura de exemplo acima.
O mesmo procedimento é realizado para textos e imagens. Em relação às imagens, ela exibe inicialmente um link natural que a faz abrir junto com as demais imagens, mas basta selecioná-la e clicar em link que você poderá facilmente configurar essa funcionalidade.
Esse é o jeito mais fácil de fazer essa configuração.
Como configurar por meio do código HTML da postagem
Se você deseja se aperfeiçoar com os códigos HTML ou quem sabe fazer alguma configuração a mais. Opte por esse caminho.
Abrir link de um texto em nova aba
Ao acessar a área de postagem do Blogger, clique no editor HTML da postagem e insira os códigos abaixo na região onde deseja exibir a imagem.
<a href="URL DO LINK" target="_blank">TEXTO</a> Você precisa substituir URL DO LINK pelo endereço a ser direcionado e TEXTO pela palavra ou frase que irá receber o link. Usei o exemplo desse site Humorada Mente :
<a href="https://www.humoradamente.com/" target="_blank">Humorada Mente</a>
Abrir imagem linkada em nova aba
<a href="URL DO LINK" target="_blank">
<img title="FRASE" alt="NOME" src="URL DA IMAGEM" /></a>
URL DO LINK - substitua pelo endereço do link vinculado à imagem;
FRASE - troque pela frase que irá aparecer quando alguém passar o mouse sobre a imagem;
NOME - substitua pelo título da imagem;
URL DA IMAGEM - substitua pelo endereço da imagem.
Veja um exemplo de imagem linkada pronto. Click na imagem para ser redirecionado a uma nova guia:
Veja como é o código do exemplo que você viu acima:
<a href="http://odneysalestutoriais.blogspot.com.br/p/tabela-de-cores.html" target="_blank"><img
title="Tabela de Cores" alt="Tabela de Cores"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8gsDEum0dVoYeMT-OBcIwHhQuySAmGwn7fV3BeR44Ln0ZMiNHUr40cTjfx242yAJ5zS_zvabiNveURBFPCaDpOLQuKDYzuG2vTC2eee3NrOndKD9QjJYP8yeJQMpbj8j8-Ro1Y-nNNpx/s1600/tabela+de+cores.jpg" /></a>
Depois deste tutorial bem explicado, acredito que você tenha conseguido entender a lógica, caso contrário, comente sua dúvida. Até a próxima.
0 Comments:
Postar um comentário