Botão Secreto

Quando comecei a personalizar meu blog, uma coisa sempre me incomodou: aqueles elementos padrão do Blogger, como o rodapé com "Tecnologia do Blogger", o link de "Abuso" e até o nome "Página inicial". Mesmo com um template bonito, esses detalhes deixavam tudo com cara de amador. Depois de muito pesquisar, entendi que dá sim pra remover tudo isso com segurança e ainda ir além: personalizar os botões de navegação com estilo! E é exatamente isso que vou te ensinar neste tutorial.


Olá! No tutorial de hoje eu vou te mostrar como dar uma cara mais profissional e personalizada para o seu blog no Blogger. Sabe aqueles detalhes que incomodam, como o link de “Tecnologia do Blogger”, os botões de “Abuso”, “Atribuição do Blogger” e o texto “Página inicial”? Pois é, vamos aprender a remover tudo isso com segurança, sem comprometer a estrutura do seu template.

E como bônus, vou te ensinar também como transformar os botões de “Postagem anterior” e “Próxima postagem” com imagens, deixando a navegação muito mais atraente para seus leitores. Bora começar?


Por que remover esses elementos?

Se você está personalizando seu blog para deixá-lo com uma identidade visual única, ou se quer preparar tudo para uma futura monetização (como via Google AdSense), é importante eliminar tudo o que não combina com o seu estilo ou pode parecer “genérico demais”. Além disso, elementos como “Atribuição do Blogger” ou “Abuso” podem dar a impressão de que seu blog ainda está em fase inicial, o que pode impactar a confiança dos visitantes.

Atenção: Antes de fazer qualquer alteração no seu template, faça um backup completo. Isso garante que, se algo sair errado, você possa restaurar tudo com segurança e sem dor de cabeça.

1. Removendo “Tecnologia do Blogger”

Esse texto geralmente aparece no rodapé do template. Para removê-lo:

  1. Acesse o Editor de HTML do seu blog (em “Tema” > “Editar HTML”).
  2. Use Ctrl + F e procure por Technology by Blogger ou apenas Blogger.
  3. Você verá algo como:
<div class='powered-by'>Tecnologia do Blogger</div>

Basta deletar essa linha ou envolver em comentários:

<!-- <div class='powered-by'>Tecnologia do Blogger</div> -->

Pronto! Isso já limpa um detalhe visual do rodapé.

2. Removendo o link de “Abuso”

Esse link aparece quando o template utiliza widgets padrão do Blogger. Para remover:

  1. No editor de HTML, pesquise por report-abuse.
  2. Geralmente estará dentro de um bloco de rodapé. Delete esse trecho:
<a href='https://www.blogger.com/go/report-abuse'>Abuso</a>

Ou comente se preferir manter por segurança:

<!-- <a href='https://www.blogger.com/go/report-abuse'>Abuso</a> -->

3. Removendo “Atribuição do Blogger”

Esse é um dos elementos mais comuns e geralmente vem com um widget chamado Attribution1. Para remover corretamente:

  1. No editor de HTML, pressione Ctrl + F e digite Attribution1.
  2. Você verá algo assim:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Altere o atributo locked='true' para locked='false'. Assim:

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

Salve. Agora vá em “Layout”, localize o widget “Atribuição” e clique em “Remover”. Pronto!

4. Ocultando “Página inicial” do menu.

O item “Página inicial” aparece automaticamente em muitos templates. Se você quer removê-lo, siga este passo:

  1. No menu HTML, procure pelo seguinte trecho:
<a expr:href='data:blog.homepageUrl'>Página inicial</a>

Você pode comentar ou deletar o link, mas a forma ideal é esconder via CSS:

<style>
a[href*="homepageUrl"] {
  display: none !important;
}
</style>

Esse código pode ir no final da tag <head> ou dentro de uma tag <style> geral. Isso mantém o código intacto, mas oculta o link visualmente.

5. Bônus: Personalizando os botões de “Postagem Anterior” e “Próxima Postagem”

Agora vamos deixar os botões de navegação com um visual mais estiloso. Por padrão, os templates mostram apenas o texto. Mas você pode substituir isso por um botão com imagem de fundo.

Etapa 1: Localize o bloco de navegação

Procure por:

<data:post.prevPost/ > e <data:post.nextPost/ >

Ou por um bloco como:

<b:if cond='data:post.hasPrevious'>

Substitua esse bloco pelo seguinte código personalizado:

<div class='post-nav'>
  <b:if cond='data:post.hasPrevious'>
    <a class='prev-post' expr:href='data:post.previousPost.url' title='Postagem anterior'></a>
  </b:if>
  <b:if cond='data:post.hasNext'>
    <a class='next-post' expr:href='data:post.nextPost.url' title='Próxima postagem'></a>
  </b:if>
</div>

Etapa 2: Adicione o estilo CSS

Agora vamos aplicar imagens de fundo estilizadas nesses botões. Coloque este CSS no final do seu tema:

<style>
.post-nav {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}

.prev-post, .next-post {
  width: 48%;
  height: 120px;
  background-size: cover;
  background-position: center;
  display: block;
  border-radius: 12px;
  text-indent: -9999px;
  transition: transform 0.3s ease;
}

.prev-post {
  background-image: url('URL-DA-SUA-IMAGEM-ANTERIOR.jpg');
}

.next-post {
  background-image: url('URL-DA-SUA-IMAGEM-PROXIMA.jpg');
}

.prev-post:hover, .next-post:hover {
  transform: scale(1.05);
}
</style>

Substitua URL-DA-SUA-IMAGEM-ANTERIOR.jpg e URL-DA-SUA-IMAGEM-PROXIMA.jpg pelos links das imagens que deseja usar como fundo nos botões.

Imagens caso você queira pegar

As imagens abaixo foram criadas exclusivamente como referência visual para personalização de templates. Você pode baixá-las livremente para uso pessoal ou como inspiração, sem fins comerciais.

Aviso: Se nenhuma das imagens acima for do seu interesse, você pode criar as suas próprias gratuitamente no Canva, com total liberdade para personalizar do seu jeito.

Considerações finais

Essas modificações podem parecer simples, mas fazem uma grande diferença no visual do seu blog. Ao eliminar elementos padrões e personalizar sua navegação, você passa mais profissionalismo, melhora a experiência do visitante e ainda fica dentro das boas práticas para aprovação no Google AdSense.

Outros tutoriais que você pode gostar

5 erros que estão te impedindo de ganhar dinheiro com seu blog

Você já começou um blog com toda a empolgação do mundo, escreveu alguns posts, colocou anúncios... mas até agora nada de dinheiro entrando? Descubra os principais erros que você pode estar cometendo e como corrigi-los.

Destaque o post mais visto do seu blog com este gadget moderno

Aprenda a criar um gadget totalmente personalizado para destacar seus posts mais acessados. Um recurso essencial para manter os visitantes engajados por mais tempo.

Como adicionar uma caixa de pesquisa personalizada no Blogger

Ofereça mais praticidade aos seus leitores com uma caixa de busca moderna e leve. Fácil de instalar e compatível com qualquer template responsivo.

Como adicionar um slide personalizado no seu post do blog

Descubra como adicionar um slide de imagens leve, bonito e funcional nas suas postagens. Ideal para mostrar várias imagens sem poluir o conteúdo.

Se você gostou deste tutorial, compartilha com outros criadores e deixa seu comentário aqui embaixo! Estou sempre trazendo dicas úteis para quem está personalizando o Blogger com criatividade e estilo. Até o próximo post!

Compartilhe este post: