RODAPÉ DO BLOG COM ÍCONES E BOTÃO DE VOLTA AO TOPO

28 setembro 2016

rodapé do blog

Que tal um rodapé do blog, com ícones das redes sociais e botão fixo de "voltar ao topo"?

Hoje se encerra a nossa série Layout dos sonhos e pra fechar com chave de ouro, trago um tutorial de personalização do rodapé geral do blog. Eu andei vasculhando e não existe nenhum parecido com que estou apresentando aqui no Manual.

No rodapé geral é acrescentando o nome do blog, direitos autorais e o nome com o link do desenvolvedor do template. Mas outros blogueiros optam por adicionar suas redes sociais também no rodapé, que é uma excelente forma de se divulgar.

O modelo que trago hoje, além de possuir todos os requisitos básicos de um rodapé, ele também vem com um botão de "Voltar ao topo" fixo, ou seja, que não se move. 

Antes de começar a aula, é válido lembrar que todos os tutoriais dessa série foram desenvolvidos para serem aplicados em uma base que disponibilizei. Vale lembrar também, que é sempre importante fazer um backup do seu template, antes de começar qualquer personalização. Agora sim, vamos ao tutorial.



1º Passo - Clique dentro da caixa de códigos do seu template, aperte os botões ctrl+f e dentro da caixa de pesquisa que vai surgir, procure por <head> e abaixo dele, cole o seguinte código:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css?ver=3.9.2' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>

2º Passo - Em seguida, pesquise na mesma caixa de busca por </body> e acima desse trecho, cole o código a seguir:

<div id='footer-wrapper'>
<center><ul class='redessociais'><a href='LINK DO PERFIL' title='FACEBOOK'><li class='icone'><i class='fa fa-facebook' style='color:#ffffff'/></li></a>
<a href='LINK DO PERFIL' title='TWITTER'><li class='icone'><i class='fa fa-twitter' style='color:#ffffff'/></li></a>
<a href='LINK DO PERFIL' title='INSTAGRAM'><li class='icone'><i class='fa fa-instagram' style='color:#ffffff'/></li></a>
<a href='LINK DO PERFIL' title='YOUTUBE'><li class='icone'><i class='fa fa-youtube' style='color:#ffffff'/></li></a>
<a href='LINK DO PERFIL' title='GOOGLE+'><li class='icone'><i class='fa fa-google-plus' style='color:#ffffff'/></li></a>
<a href='LINK DO PERFIL' title='PINTEREST'><li class='icone'><i class='fa fa-pinterest' style='color:#ffffff'/></li></a>
</ul></center><style>li.icone{width: 38px;  /*** Largura do ícone ***/height: 38px;   /*** Altura do ícone ***/line-height: 38px;  /*** Alinha o ícone, deixe sempre igual a largura e a altura ***/background: #151515;   /*** Cor de fundo do ícone ***/text-align: center;  /*** Centraliza o ícone ***/color: #ffffff;  /*** Cor do ícone***/text-shadow: 1px 1px 0 rgba(0,0,0,0.1); margin: 8px 4px 0 auto; font-size: 23px;  /*** Tamanho do ícone ***/font-weight: normal;border-radius: 30px;  /*** Deixa o ícone arredondado, retire se quiser ***/}li.icone:hover{background: #FF57A0;  /*** Cor de fundo do ícone ao passar o mouse***/}ul.redessociais{margin-top: 5px; margin-left:-2px; padding: 0; list-style: none;}ul.redessociais li{display: inline-block; padding: 4px;margin-left: 1px;margin-right: 3px;}</style>
NOME DO SEU BLOG | TODOS OS DIREITOS RESERVADOS &#169;| DESENVOLVIDO POR: <a href='url-do-desenvolvedor'>NOME DO DESENVOLVEDOR</a> |<a href='#'>VOLTAR AO TOPO</a></div>

O que pode ser mudado nesse código:

Tudo que pode ser alterado na parte de estilo dos ícones, foi sinalizado no próprio código. Já a parte de texto do rodapé, também foi sinalizada, mas vou te explicar o que adicionar em cada parte:

Destaque em Rosa: Adicione o nome do seu blog ou site.
Destaque em Vermelho: Endereço do site da pessoa que desenvolveu o template.
Destaque em Roxo: Nome da pessoa que desenvolveu o seu template.

Caso deseje retirar algum ícone, basta deletar o trecho que se inicia com <a e termina em </a> veja: 

<a href='LINK DO PERFIL' title='REDE SOCIAL'><li class='icone'><i class='fa fa-redesocial' style='color:#ffffff'/></li></a>

3º Passo - Agora na mesma caixa de busca, procure por ]]></b:skin> e acima desse trecho, cole o seguinte código:

#footer-wrapper {background: #FFFFFF; /*** Cor de fundo do rodapé ***/background-repeat: no-repeat;z-index: 1000;height: 80px;  /*** Altura do rodapé ***/clear: both;font-size:13px; /*** Tamanho da fonte ***/color: #151515; /*** Cor da fonte ***/text-align: center; /*** Centraliza o texto do rodapé***/padding: 15px;  /*** Aumenta o espaço abaixo do texto***/font-family: 'Montserrat', sans-serif;  /*** Estilo da fonte ***/font-weight: normal; /*Troque bold por normal para tirar o negrito*/}#footer-wrapper a:link {color: #151515;  /*** Cor do link ***/}

Conclusão

Se você está criando seu layout dos sonhos na base que disponibilizei, irá encontrar os códigos das etapas 2 e 3. Basta deleta-los, e acrescentar os novos.

Perdeu as últimas aulas? Não faz mal, abaixo você confere tudo que já rolou por aqui: 



E você gostou, não esquece de curtir nossa página no facebook para nunca perder nossas atualizações, compartilhe esse post com seus amigos e siga o Manual e "Faça parte" que fica na lateral do blog. Em breve será lançada mais uma série, dessa vez será sobre SEO. Preparem-se! Um grande beijo e até a próxima!

6 comentários:

  1. Loreee, preciso de ajuda, nos links dos perfis eu coloquei o link assim: facebook.com/jesaant e quando você clica no ícone não vai, não tá indo por que tem que colocar o link com www ?

    ResponderExcluir
    Respostas
    1. Sim Jéssica. O link deve começar com http://www.facebook.com/SeuFace caso contrário não vai funcionar, e não abre em outra Guia.

      Excluir
    2. conseguiiiiii, muito obrigada, eu ameeei essa série <3 <3

      Excluir
    3. Ebaaaaaa \0/ Logo logo faço outra série <3

      Excluir
  2. Que tutorial maravilhoso, estava mesmo querendo saber como colocar isso.
    Muito obrigada, amei.
    Beijos.
    http://sobrevivendo-ao-caos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou <3 Eu que agradeço a visita.
      Bjão :*

      Excluir