Como adicionar um rodapé de créditos personalizado no Blogger

Compartilhar:
Em templates nativos do Blogger, há uma opção chamada Attribution, ele é uma área de créditos. Para isso, teria que remover com alguns códigos e depois de retirado o blog fia sem os créditos. Hoje, iremos mostrar a vocês como adicionar um rodapé personalizado ao seu blog no Blogger. Então vamos ao tutorial!

1. Acesse a guia Modelo do seu blog e depois clique no botão Editar HTML. Logo após, pressione Ctrl+F para abrir o Localizador do navegador e procure pelo código a seguir.

]]></b:skin>

2. Após encontrar o código, cole acima dele o seguinte código. Faça as modificações que achar necessárias para deixá-lo parecido com seu blog.


#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#303030;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #3F4C6B;     /* - Edite a borda - */
margin:0px 0px 0px;     /* - Não é necessário editar - */
}
#rodape-creditos a:link {
color:#A8B5C4;   /* - Cor dos Links do Rodapé - */
text-decoration:none;  /* - Decorações do Link - */
outline:0px solid #FFFFFF;  /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#A8B5C4;    /* - Cor dos Links Visitados - */
text-decoration:none;   /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF;   /* - Não é necessário edittar - */
}
#rodape-creditos a:hover {
color:#A8B5C4;   /* - Cor do Link com o Mouse em cima - */
text-decoration:underline;    /* - Decoração do Link com o mouse em cima - */
outline:0px solid #FFFFFF;    /* - Não é necessário edittar - */
}

3. Pressione novamente o atalho Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.

</body>

4. Imediatamente, acima do código cole o seguinte código fazendo modificações.

<div id='rodape-creditos'>
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:left;'>&#169; <a href='LINK DO BLOG'>NOME DO BLOG</a> - 2012. Todos os direitos reservados.<br/>Criado por: <a href='URL DO AUTOR DO BLOG' rel='nofollow' target='_blank'>NOME DO AUTOR DO BLOG</a>.<br/>Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DA LOGO DO BLOG'/></a><br/></td>
</tr>
</table>
</div>

Em LINK DO BLOG, você deverá colocar o link do seu blog. Em NOME DO BLOG, você deverá colocar o nome do seu blog. Em URL DO AUTOR DO BLOG, você deverá colocar algum link relacionado ao autor do blog; em NOME DO AUTOR DO BLOG, deverá colocar o nome do autor do blog. E no LINK DA LOGO DO BLOG, deverá colocar uma imagem com o logotipo do blog em tamanho reduzido.
Atenção: Não retire o link "Tecnologia do Blogger". Isso evitará futuras punições do Google à você e ao seu blog.
5. Clique em Visualizar e role ao final da página para ver como ficou, caso esteja tudo correto, clique em Salvar modelo.

Pronto, seu rodapé está adicionado e se você quiser saber como fica, basta ver o nosso rodapé de créditos no fundo do blog. Até a próxima!
► Postagens Relacionadas:

47 Comentários

Eliel Neto disse...

João posta uma foto ou um demo!

15 de maio de 2012 21:56
João Almeida disse...

Eliel, basta visualizar o nosso rodapé, que está no fundo do blog.

15 de maio de 2012 22:02
Herlan Santos disse...

Olá João.

Muito bom esse tutorial e a barra também mim parece ótima.

Abraços!

17 de maio de 2012 13:42
João Almeida disse...

Obrigado pelo elogio Herlan.

17 de maio de 2012 15:06
O LARÁPIO disse...

Oi amigo, eu não estou conseguindo achar este segundo código, será que tem algo errado?

8 de junho de 2012 15:04
João Almeida disse...

Mil desculpas, esqueci de colocar o código para adicionar o outro código. Post atualizado.

8 de junho de 2012 18:11
O LARÁPIO disse...

Valeu amg, muito obrigado.

9 de junho de 2012 22:59
João Almeida disse...

Fique a vontade aqui em nosso blog.

9 de junho de 2012 23:49
Pablo Batista disse...

Na boa... muito bom esse tutorial, com esses códigos consegui colocar do jeito que eu quero os créditos !!

16 de agosto de 2012 21:09
João Almeida disse...

Ficamos felizes em saber que funcionou e que gostou. Obrigado e volte sempre.

17 de agosto de 2012 11:35
Micarla Rocha disse...

Boa Tarde.Consegui com esse tutorial,ótimo a maneira como você explica!mais queria que ficasse centralizado e não estou conseguindo.Na verdade eu só gostaria de colocar uma linha somente,design por ..... e o restante(Tecnologia do Blogger)poderia me ajudar?agradeço.

13 de outubro de 2012 15:13
João Almeida disse...

Olá Micarla! Obrigado pelos elogios e para deixar tudo em uma única linha, basta retirar todos os
do código do passo 4. Espero lhe ter ajudado. Quais quer outras dúvidas, pode comentar ;)

14 de outubro de 2012 16:07
Micarla Rocha disse...

Boa tarde João e obrigada por responder tão rapido,na verdade consegui assim que deixei o comentário rsrss...mais queria ajuda em outra questão:Tô usando o modelo viagem/travel blog de texte,queria saber se tem como juntar o rodapé com a área de postagens,acho que tô fazendo algo errado e não descobri o que!segue a url do print pra você entender melhor http://i49.tinypic.com/nn8viu.png
os lados ficam desiguais e o meio separado,eu queria ajeitar isso.te agradeço!

15 de outubro de 2012 15:03
João Almeida disse...

Eu sei como fazer isso, mas pelos comentários, ensinar isso, é impossível! Então, quero que você me passe seu email que eu te mostrarei tudo detalhadamente! Aguardo.

15 de outubro de 2012 16:57
Micarla Rocha disse...

Oi João,meu email davidmicarla@hotmail.com

16 de outubro de 2012 20:32
liciacarla disse...

Oi , super legal esse tuto , mas o que eu estou querendo é deixar alguns gadgets dentro do rodapé e quero aumentar a altura dele , assim como nesse site : http://www.ecleticus.com/ ou esse : http://eaibeleza.com/ , vc sabe me explicar?

6 de novembro de 2012 04:55
João Almeida disse...

Bem, posicionar gadgets dentro deste rodapé é extremamente impossível! Mas você pode personalizar o rodapé padrão dos templates e inserir os gadgets e as informações necessárias.

6 de novembro de 2012 12:01
Mauricio Santana disse...

Opa maninho, tudo em paz? Cara o background que está em branco vc editou no css ou é do seu template mesmo? Pois eu queria fazer um rodapé igual, mas com uma altura maior (height) e que o background fique do jeito que tá o seu, sem o scrolling aparecer para ir pro lado. Parabéns!

11 de abril de 2013 18:21
João Almeida disse...

Oi Mauricio! Eu editei no CSS que está presente no passo 2. E a altura, que tamanho você quer?

11 de abril de 2013 18:27
Mauricio Santana disse...

Nossa, respondeu de imediato, muito bom!,rs. Bom, eu quero uma altura de uns 250 pixels. Quero fazer exatamente isso, como nesse site: http://www.dspa.com.br/agencia. Se puder me ajudar, nossa, vai me ajudar muuito!

11 de abril de 2013 18:31
João Almeida disse...

Não gosto de deixar os leitores esperando, rs! Mas enfim, você poderia me passar um e-mail para lhe passar em maiores detalhes?

11 de abril de 2013 19:14
Mauricio Santana disse...

Opa! Desculpe a demora para responder, é que eu preisei sair. Sim, claro: volteipo@hotmail.com .Fico no aguardo meu brother. Parabéns pelo blog e pela atenção!

11 de abril de 2013 21:24
ARTHUR disse...

CARA TOU HÁ HORAS TENTANDO EDITAR O MEU E NÃO TOU CONSEGUINDO ME AJUDA.

3 de maio de 2013 02:54
João Almeida disse...

Qual o problema que você está tendo?

3 de maio de 2013 13:24
ARTHUR disse...

Ficou um pouco desorganizado. Eu queria colocar os créditos centralizado.

3 de maio de 2013 14:41
João Almeida disse...

Você pode centralizar os textos, mudando o 'text-align' do código 4 de 'left' para 'center'. E caso não dê certo, você pode adicionar ainda o 'text-align: center' no código 2 dentro da chave do '#rodape-creditos {'.

3 de maio de 2013 15:03
ARTHUR disse...

Obrigado, cara! Sua ajuda foi essencial! Abraço

4 de maio de 2013 09:42
Lana disse...

Salvando a minha vida mais uma vez. Eu amei o tutorial e fiz no meu blog mais novo e no antigo. Amei o blog e o tutorial, obrigada :)

8 de maio de 2013 23:53
João Almeida disse...

hahaha Obrigado pelos elogios e fico feliz que tenha gostado. Volte sempre!

9 de maio de 2013 10:21
Wilian disse...

Jão to editando um template so que eu ajustei o tamanho , mais eu queria que o backgorund ficaria no centro olha o print : http://prntscr.com/15h2kq se puder ajudar =D

18 de maio de 2013 12:11
Peterson Silva disse...

Olá amigo,

Obrigado pelo tutorial. Estou com um problema, os links do rodape estão vindo sempre acompanhados pelo link do blog.

Exemplo:

Link do site: http://siteexample.com

aí o link do rodape em vez de ficar somente com o link, exemplo: http://blogdoautor.com

fica assim: siteexample.com/blogdoautor.com

Aí o link acaba por não funcionar. Pode me ajudar?

Abraço!

22 de setembro de 2013 17:31
João Almeida disse...

Você está substituindo o link completo? Se você não fizer isso acaba ficando os dois. Nó código está: LINK DO BLOG. Você seleciona todo esse nome e cola o link do seu blog. Caso esse não seja o problema, volte a me contatar. =)

22 de setembro de 2013 17:43
Peterson Silva disse...

Obrigado pelo feedback,

Consegui resolver de outra forma.

(y)

23 de setembro de 2013 04:07
João Almeida disse...

Ah, que bom que conseguiu! Estamos sempre a disposição! =)
Abraços!

23 de setembro de 2013 14:01
marcia fraga disse...

Muito obrigada pelo tutorial, usei amei, exatamente o que eu queria.

25 de setembro de 2013 22:36
Iracema Oliveira disse...

Como eu faço pra mudar tipo a altura e largura?

11 de janeiro de 2014 10:53
João Almeida disse...

basta aletrar os valor de "width" dentro do codigo do passo 4.
=)

11 de janeiro de 2014 12:11
Bruno Bezerra disse...

Gostei da matéria, João!, Os templates do Wordpress e da Sora Templates já disponibilizam o campo de créditos, mas com esse tutorial, para quem tem um blog com aquele velho template ''Simple'', já é possível acrescentar os créditos!.

17 de janeiro de 2014 13:18
Franci Lourenço disse...

Como assim???????? eu quero fazer o mesmo que a moça a cima?? Grata se puder me ajudar

24 de janeiro de 2014 15:45
João Almeida disse...

É como eu disse: esse rodapé infelizmente você não pode colocar widgets/gadgets, apenas textos e links. Mas você pode colocar gadgets no rodapé padrão do Blogger.

24 de janeiro de 2014 18:44
Geanne disse...

Não consigo alterar a cor de fundo e da fonte, queria fundo preto com letras brancas. E centralizado tbm! Me ajuda por favor.

14 de maio de 2014 09:54
Luana Girardi disse...

Oi Arthur,

Para deixar bem centralizado você deve apagar nesse código a porcentagem. Ex: width:72% (apague a porcentagem que ficará centralizado)

© NOME DO BLOG - 2012. Todos os direitos reservados.
Criado por: NOME DO AUTOR DO BLOG.
Tecnologia do Blogger.

12 de julho de 2014 01:06
Francielle Alves disse...

consegui editar muito obrigada

25 de agosto de 2014 10:41
ClubeMochileiro disse...

Parabéns pelo post, é muito dificil encontrar esse tipo de tutorial. Por sinal, o meu funciona perfeitamente e ainda fiz alteração de cor. Só tenho uma dúvida: a questão do ano (o meu ainda esta com ano de 2013) http://clubemochileiroaventura.blogspot.com, pode ser alterado normalmente ou tem que pedir alguma autorização, qual é o procedimento? Uma dica faça outro mais personalizado. Sucesso!!

17 de março de 2015 10:34
João Almeida disse...

No código do passo 4 tem o ano " - 2012", você pode mudá-lo pra 2015 apenas digitando :D

17 de março de 2015 14:45
Wilian Maique disse...

Nice

24 de junho de 2015 11:48
Mirelle Almeida disse...

Muito obrigada! Me ajudou bastante. ^^)

11 de julho de 2015 19:12

Postar um comentário