Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Header Vanessa S.

Cabeçalho do blog em forma de link

Você já viu aqui Como alterar a imagem no topo do cabeçalho.
Só que, por padrão, no blogger, quando inserimos uma imagem de cabeçalho diretamente no HTML do template, incluindo um Background em ‘Header’,ele fica clicável apenas nas páginas internas.
Por exemplo:
#header {background: url(‘url da imagem’) top center no-repeat;

Em alguns casos a imagem no cabeçalho (Header) não se apresenta de forma “clicável”, aparece apenas a imagem , mas não há link que redirecione para a página inicial.
Atendendo a um pedido, vou explicar aqui como transformar todo o cabeçalho (incluindo a imagem background do header) em um link que redirecione para a página inicial, não apenas quando o leitor está na página interna, mas também quando está na home.
Pode ocorrer também que o seu cabeçalho não possua imagem background, possua apenas texto, e você também pode deixa-lo ‘clicável’ quando o leitor estiver na página inicial.

Atenção:

este recurso só funcionará se o Header de seu blog NÃO ESTIVER dividido com nenhum outro elemento(como feed,busca etc), só poderá estar dividido com o título do cabeçalho.

Antes de mais nada, você já deve saber que é sempre bom fazer um backup do seu Template para evitar transtornos.

Para aplicar o recurso, entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pelo seguinte código:


<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

SUBSTITUA todo ele por:


<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

Cabeçalho apenas com texto, sem imagem como background:

Se o seu cabeçalho não possui imagem background, apenas texto, caso queira deixa-lo ‘clicável’ de forma que sempre redirecione para a home, basta procurar pelo seguinte código abaixo:


<h1 class='title'><b:include name='title'/></h1>

e SUBSTITUIR por:


<h1 class='title'><a expr:href='data:blog.homepageUrl'><b:include name='title'/></a></h1>

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

9 Comentários

  1. evandro disse:

    como fassoa para enseri mais de 3 anuncios no google so em uma pagina nessa pagina que to cometado te 4 anuncios do google me ajude me de uma dica pra eu fazer isso aguardando a resposta

    • Vanessa disse:

      Não são 4, o adsense só permite 3 anúncios por página. Aqui tem 3 anúncios na página de post e 1 anúncio na página inicial.

  2. Ana disse:

    Atualmente, como se faz?

    É que o código mudou e não consigo usar esse método…

  3. ?a? disse:

    Oi, Clau!
    Quanto tempo, ainda lembra de mim? rsrs
    Ando tão cheia de coisas pra fazer que 'ando ausente' em muitas coisas, até mesmo do meu blog.
    Querida, tenho uma dúvida: tem como eu tornar clicáveis as imagens das postagens, na home? E que eu possa até redirecioná-las?

    Imagino que deva ser um procedimento parecido com este que você falou aqui, mas não sei onde e nem como fazer.

    Desde já obrigada!
    Abs,
    Dani

  4. .:: Clau ::. disse:

    Fabio Macedo
    Lamento, mas não tem como eu te ajudar, pois os códigos que publiquei são dos templates padrões. Se o seu template já sofreu modificações, não há como eu saber o que acontece no seu template.

  5. temaquidownloads.com disse:

    Olá Clau,
    Parabenizo pelas dicas e tutorias dos quais você poe aqui e disponibiliza a todos.Sou um iniciante nisso tudo e realmente me ajudou já por algumas vezes.
    Bom, quanto a esse tutorial eu nao consegui resolver meu problema, nao localizei o codigo em meu template (< b:includable i d='t itle' > …),este outro aqui (< b:if cond= 'data :blog. url == data:b log.homepa geUrl' >) eu encontrei,porém na ordem inversa já que fiz uma otimização de SEO,ultilizo uma imagem no header,nao sei o que fazer neste meu caso, peço-lhe que se possivel me conseguir uma solução.
    Agradeço desde já.
    Fabio Macedo

  6. Kcriska disse:

    amei seus conselhos e encinamentos, beijos quando der passa la no meu blog,http://bloggerdeideias.blogspot.com/

  7. ::Clau:: disse:

    Vera:
    Te enviei uma resposta, aguardo seu retorno.

    Carmen:
    nhaiii, me desculpa, mas eu não lembro mais sobre o q vc havia me pedido antes..são tantas coisas q se eu não anotar eu esqueço mesmo…me fala de novo o q vc pediu amiga…

  8. carmen disse:

    Oi Clau! Eu me referia a abertura do Anjos.
    Já deu uma pesquisada nos emas que te falei? Ainda sobre os comentários, lembra?

    Beijos "porfessora"
    Carmen

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.