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.
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.
3. Pressione novamente o atalho Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.
4. Imediatamente, acima do código cole o seguinte código fazendo modificações.
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!
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;'>© <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.
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!
46 Comentários
João posta uma foto ou um demo!
15 de maio de 2012 às 21:56Eliel, basta visualizar o nosso rodapé, que está no fundo do blog.
15 de maio de 2012 às 22:02Olá João.
17 de maio de 2012 às 13:42Muito bom esse tutorial e a barra também mim parece ótima.
Abraços!
Obrigado pelo elogio Herlan.
17 de maio de 2012 às 15:06Oi amigo, eu não estou conseguindo achar este segundo código, será que tem algo errado?
8 de junho de 2012 às 15:04Mil desculpas, esqueci de colocar o código para adicionar o outro código. Post atualizado.
8 de junho de 2012 às 18:11Valeu amg, muito obrigado.
9 de junho de 2012 às 22:59Fique a vontade aqui em nosso blog.
9 de junho de 2012 às 23:49Na boa... muito bom esse tutorial, com esses códigos consegui colocar do jeito que eu quero os créditos !!
16 de agosto de 2012 às 21:09Ficamos felizes em saber que funcionou e que gostou. Obrigado e volte sempre.
17 de agosto de 2012 às 11:35Boa 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 às 15:13Olá Micarla! Obrigado pelos elogios e para deixar tudo em uma única linha, basta retirar todos os
14 de outubro de 2012 às 16:07do código do passo 4. Espero lhe ter ajudado. Quais quer outras dúvidas, pode comentar ;)
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
15 de outubro de 2012 às 15:03os lados ficam desiguais e o meio separado,eu queria ajeitar isso.te agradeço!
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 às 16:57Oi João,meu email davidmicarla@hotmail.com
16 de outubro de 2012 às 20:32Oi , 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 às 04:55Bem, 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 às 12:01Opa 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 às 18:21Oi Mauricio! Eu editei no CSS que está presente no passo 2. E a altura, que tamanho você quer?
11 de abril de 2013 às 18:27Nossa, 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 às 18:31Nã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 às 19:14Opa! 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 às 21:24CARA TOU HÁ HORAS TENTANDO EDITAR O MEU E NÃO TOU CONSEGUINDO ME AJUDA.
3 de maio de 2013 às 02:54Qual o problema que você está tendo?
3 de maio de 2013 às 13:24Ficou um pouco desorganizado. Eu queria colocar os créditos centralizado.
3 de maio de 2013 às 14:41Você 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 às 15:03Obrigado, cara! Sua ajuda foi essencial! Abraço
4 de maio de 2013 às 09:42Salvando 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 às 23:53hahaha Obrigado pelos elogios e fico feliz que tenha gostado. Volte sempre!
9 de maio de 2013 às 10:21Jã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 às 12:11Olá amigo,
22 de setembro de 2013 às 17:31Obrigado 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!
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 às 17:43Obrigado pelo feedback,
23 de setembro de 2013 às 04:07Consegui resolver de outra forma.
(y)
Ah, que bom que conseguiu! Estamos sempre a disposição! =)
23 de setembro de 2013 às 14:01Abraços!
Muito obrigada pelo tutorial, usei amei, exatamente o que eu queria.
25 de setembro de 2013 às 22:36Como eu faço pra mudar tipo a altura e largura?
11 de janeiro de 2014 às 10:53basta aletrar os valor de "width" dentro do codigo do passo 4.
11 de janeiro de 2014 às 12:11=)
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 às 13:18Como assim???????? eu quero fazer o mesmo que a moça a cima?? Grata se puder me ajudar
24 de janeiro de 2014 às 15:45É 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 às 18:44Nã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 às 09:54Oi Arthur,
12 de julho de 2014 às 01:06Para 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.
consegui editar muito obrigada
25 de agosto de 2014 às 10:41Parabé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 às 10:34No código do passo 4 tem o ano " - 2012", você pode mudá-lo pra 2015 apenas digitando :D
17 de março de 2015 às 14:45Muito obrigada! Me ajudou bastante. ^^)
11 de julho de 2015 às 19:12Postar um comentário