Cabeçalho sempre como link

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:

1. Salve seu template atual. Qualquer pequeno erro ao fazer essas mudanças poderá avacalhar todo o leiaute do seu blog.
2. 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.

1. Procure o seguinte código:
   <div id='header-wrapper'>

   Substitua por:

   <a expr:href='data:blog.homepageUrl'><div id='header-wrapper'>
2. Procure por:
   </div><div id='content-wrapper'>

   Substitua por:

   </div></a><div id='content-wrapper'>
3. 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.

4. 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