⇐ Clique aqui para expandir o post. ⇒

domingo, novembro 17, 2013

[Blogger] Link permanente do post na primeira imagem

Como muitos já notaram, a primeira imagem de cada post deste blog é linkada para o link permanente do próprio artigo. Mas isso não é nenhum recurso especial ou script. Eu linko manualmente a cada postagem.

Quem sabe HTML já deduziu qual é o procedimento, mas para os iniciantes vou mostrar aqui como é.

É bom esclarecer que esse recurso faz mais sentido nos blogs que exibem apenas os resumos na home. Gosto bastante disso porque a pessoa pode escolher exatamente o que vai ler, já que dificilmente alguém está interessado em todos os assuntos que trato aqui.

Linkando a imagem, o visitante passa a ter quatro opções para ler o post inteiro:

  1. Pode clicar no título do post.
  2. Pode clicar na imagem.
  3. Pode clicar no link Leia todo o post que aparece após o resumo.
  4. Pode clicar no horário do post. É bastante raro isso acontecer, mas esse recurso ainda é usado por quem estava acostumado a ler blogs antigos do Uol que só tinham essa opção de link permanente.

Então vamos à prática.

Escreva o título do seu post.

Clique no botão HTML do editor de postagem do blog.

Mantenha o cursor do mouse no início da postagem, como mostra a imagem acima.

Usando o botão Inserir imagem, adicione a figura desejada, como de costume.

Observe que o código fonte da imagem adicionada aparece no editor do blog:

Para ficar mais didático, destaquei no código a parte que se refere à imagem de fato (amarelo) e a parte que se refere ao link para onde a imagem leva (azul ciano):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEq39nKlYkanSB-tgkgFCCWeeDqGqOSzKUbpA4_Ft4Tuu4kGUJvKVN3cjokLXTFuUFOvs3O2H33uH3lX57VRfF1fIG0DstDaTtxmR6LvMevV6rH_OG5Oye-EC2HAhUGSgFAFGDFXL6WZK/s1600/tecla-blog-teclado.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEq39nKlYkanSB-tgkgFCCWeeDqGqOSzKUbpA4_Ft4Tuu4kGUJvKVN3cjokLXTFuUFOvs3O2H33uH3lX57VRfF1fIG0DstDaTtxmR6LvMevV6rH_OG5Oye-EC2HAhUGSgFAFGDFXL6WZK/s600/tecla-blog-teclado.jpg" /></a>

Por padrão, o Blogger cria um link para a mesma imagem em tamanho real, desde que não ultrapasse 1600 pixels. É útil quando só cabe uma miniatura no post e você quer dar ao visitante a oportunidade de ver o original. Quando você já consegue mostrar a imagem inteira no artigo, esse recurso é totalmente dispensável e você pode remover o link sem medo, que é a parte em azul.

Neste caso não vamos remover o link, apenas substituir.

Segue novamente o código, mas agora sublinhei apenas a parte que vamos alterar:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEq39nKlYkanSB-tgkgFCCWeeDqGqOSzKUbpA4_Ft4Tuu4kGUJvKVN3cjokLXTFuUFOvs3O2H33uH3lX57VRfF1fIG0DstDaTtxmR6LvMevV6rH_OG5Oye-EC2HAhUGSgFAFGDFXL6WZK/s1600/tecla-blog-teclado.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEq39nKlYkanSB-tgkgFCCWeeDqGqOSzKUbpA4_Ft4Tuu4kGUJvKVN3cjokLXTFuUFOvs3O2H33uH3lX57VRfF1fIG0DstDaTtxmR6LvMevV6rH_OG5Oye-EC2HAhUGSgFAFGDFXL6WZK/s600/tecla-blog-teclado.jpg" /></a>

Vá até a lateral direita do painel de postagem e clique na opção Links. Vai aparecer o link permanente do post, já baseado no título que você escolheu:

Se o endereço ficou estranho, sem sentido ou faltando alguma coisa, use a opção link permanente personalizado e digite o link desejado separando as palavras com hífens. Não precisa colocar .html nem o domínio do blog. Exemplo: receita-de-bananada-com-chocolate.

O link permanente completo deste post, por exemplo, é: http://www.helenfernanda.com.br/2013/11/blogger-link-permanente-na-1a-imagem.html.

Agora que você já definiu o link permanente, copie esse endereço inteiro (do http até o html) e substitua a parte sublinhada do link da primeira imagem.

Após .html, acrescente #more.

Depois da mudança, meu código ficou assim:

<a href="http://www.helenfernanda.com.br/2013/11/blogger-link-permanente-na-1a-imagem.html#more"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEq39nKlYkanSB-tgkgFCCWeeDqGqOSzKUbpA4_Ft4Tuu4kGUJvKVN3cjokLXTFuUFOvs3O2H33uH3lX57VRfF1fIG0DstDaTtxmR6LvMevV6rH_OG5Oye-EC2HAhUGSgFAFGDFXL6WZK/s600/tecla-blog-teclado.jpg" /></a>

Para que serve o #more? Ele rola a barra de rolagem direto para a parte que o leitor não viu ainda, abaixo do link Leia mais (ou similar). Mas esse recurso é ainda mais útil se o leitor já estiver na página do post e clicar por engano: ao invés de carregar a página inteira novamente, apenas rolará a barra de rolagem. Para compreender melhor esse assunto, visite o post Como criar links de rolagem (âncoras) dentro de um blog.

Garanto que quando você cria o hábito de fazer isso a cada postagem, fica bem menos complicado do que parece neste tutorial.

Até mais!

Pix meutedio arroba mail ponto com

Nenhum comentário:

Postar um comentário

Todos os comentários são moderados pela autora do blog.