Como colocar imagem no título do bearblog

15 Oct, 2026

Gosto de fazer tutoriais para mim mesma, para não esquecer, e não vejo porquê não compartilhar o conhecimento. Lembro que na época que todo mundo usava Blogger, existiam muitos blogs só de tutoriais. Hoje em dia, isso é algo mais raro¹, e imagino que pode ficar mais raro ainda com as IAs. Porém, como eu não uso IA² e sei que muitas pessoas também se recusam, o jeito é deixar registrado bonitinho o que fiz, o que funcionou etc.

Neste post, vou ensinar como colocar uma imagem como título no bearblog. Se você não conhece a plataforma, talvez não saiba que o bearblog só permite mexer no CSS do seu tema e não no HTML diretamente. Porém, já vi bearblogs que possuem um logo no lugar do título do blog, e me questionei como faziam isso.

A maneira que pensei é bem simples: JavaScript!

Vale lembrar que, para usar JavaScript no bearblog, é necessário fazer o upgrade para a versão paga da plataforma.

Depois de feito o upgrade, você ganha acesso a uma parte do dashboard que permite que você altere o footer do seu blog. Basta ir em Settings > Header and footer directives. O código JavaScript pode ir tanto no header quanto no footer, mas é uma boa prática que ele seja colocado no footer para não interromper o carregamento da página caso seja um script muito pesado.

Vou deixar aqui duas versões do código: na primeira versão, a imagem substitui o título do blog, ideal para designs em que a imagem forma um header completo ou já possui o nome do blog escrito. Já na segunda versão, o título do blog aparece ao lado da imagem, ideal para casos em que você vai usar apenas um logo simples.

IMPORTANTE: Não altere as aspas simples ' para aspas duplas " (ou vice-versa), pois isso irá quebrar o código!

Versão 1: Substitui o título

Copie e cole este código na área Footer directive:

<script>
let title = document.querySelector('header h1')
let logo = "<img src='URL DA SUA IMAGEM' style='width: LARGURA DA SUA IMAGEM;' alt='TÍTULO DO SEU BLOG'>"
title.classList.add("logo")
title.innerHTML = logo;
</script>

Como fica:

Versão 2: Conserva o título ao lado da imagem

Copie e cole este código na área Footer directive:

<script>
let title = document.querySelector('header h1')
let logo = "<img src='URL DA SUA IMAGEM' style='width: LARGURA DA SUA IMAGEM;' alt='DESCRIÇÃO DA IMAGEM'>"
title.classList.add("logo")
title.innerHTML = logo;

let blogName = document.querySelector('nav')
let blogNameHtml = "<a href='URL DO SEU BLOG'><h1>NOME DO SEU BLOG</h1></a>"
blogName.innerHTML = blogNameHtml + blogName.innerHTML;
</script>

Como fica:

Lembrando que o atributo alt serve para acessibilidade. Você pode colocar somente o nome do seu blog, no caso do código que substitui o título, ou colocar uma descrição da imagem, no caso da versão que conserva o título do blog (não recomendo colocar só o título do blog como alt neste caso porque, como o título não foi substituído, o leitor de tela irá ler o título do seu blog duas vezes, o que pode causar confusão em quem está visitando).

Em ambas as versões, é adicionada a classe logo no elemento do título, de forma que você pode usar o CSS para manipular essa classe diretamente no editor de CSS do bearblog.

Se você for usar uma imagem muito grande, você pode também adicionar um max-width: 100%; ao lado da largura da imagem para certificar que o design seguirá sendo responsivo.

Espero que esse tutorial possa ajudar alguém que, assim como eu, não conseguiu achar nenhum tutorial sobre isso e teve que pensar em como fazer isso sozinha, tendo um conhecimento básico de JavaScript. Se você manja de JavaScript e consegue pensar em outra forma mais otimizada de fazer isso, pode me mandar um email.