Nível: intermediário
É questão de usabilidade presumir que o cabeçalho de qualquer site aponte para a home do mesmo, ainda quando o usuário já esteja na página inicial, porque ele pode precisar recarregar a página para atualizar ou para que o navegador carregue algum recurso que não apareceu na primeira tentativa.
No Blogger, quando inserimos no cabeçalho uma imagem que vai substituir o texto, essa imagem sempre vai ser um link para a página inicial do blog, como ocorre aqui no HTMHelen.
Ao contrário, quando não inserimos imagem no cabeçalho ou quando essa imagem vai ser apenas o background, com texto em primeiro plano, é diferente: o cabeçalho só é link quando o visitante não está na home.
Para mudar isso, bastam algumas modificações. Antes de fazer qualquer alteração, siga esses passos:
- Salve seu template atual. Qualquer pequeno erro ao fazer essas mudanças poderá avacalhar todo o leiaute do seu blog.
- Marque Expandir modelos de widgets.
Há três formas de fazer isso, leia cada uma delas antes de escolher a sua e executar.
1. Cabeçalhos sem imagem de fundo
Estes passos fazem com que títulos de cabeçalhos sem imagem de fundo sempre apontem para a home.
Procure pelo código:
<h1 class='title'><b:include name='title'/></h1>
Substitua por:
<h1 class='title'><a expr:href='data:blog.homepageUrl'><b:include name='title'/></a></h1>
2. Cabeçalhos com imagem de fundo
Estes passos fazem com que títulos de cabeçalhos com imagem de fundo sempre apontem para a home.
Procure pelo código:
<h1 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h1>
Substitua por:
<h1 class='title' style='background: transparent; border-width: 0px'><a expr:href='data:blog.homepageUrl'><b:include name='title'/></a></h1>
3. Transformando todo o cabeçalho em link
Fazer isto transforma todo o cabeçalho (incluindo o background) em um link para a página inicial, mas só funciona se o <header> de seu blog não tiver nem um outro elemento que não seja o título do cabeçalho e seu background.
- Procure o seguinte código:
<div id='header-wrapper'>
Substitua por:
<a expr:href='data:blog.homepageUrl'><div id='header-wrapper'>
- Procure por:
</div><div id='content-wrapper'>
Substitua por:
</div></a><div id='content-wrapper'>
- Procure por todas as ocorrências de:
<a expr:href='data:blog.homepageUrl'><data:title/></a>
Substitua cada uma delas por apenas:
<data:title/>
Nos templates originais do Blogger esse código aparece três vezes, substitua todas eles.
- Antes de salvar, visualize. Se seu leiaute estiver deformado, desfaça tudo e comece outra vez. Se estiver tudo no lugar, salve e teste seu blog nos navegadores.
No Helen Fernanda Portfólio eu fiz essa terceira modificação.
Imagem do site AODesign