01 julho 2014

[Semana de tutoriais] #02 Barra de créditos no rodapé do blog


Hey pessoal! então hoje é nosso segundo dia da semana de tutoriais, eu nem tenho muito o que falar aqui, resolvi trazer a pedido de alguém (não lembro quem) sorry, um modelo de rodapé personalizado, eu achei vários eu mesma fiz um, achei muito simples, então achei esse no Sugoi Tutoriais e achei perfeito, já usei ele aqui no blog então resolvi postar.


Cheguem mais.




Como é um tutorial muito simples vai ser bem rapidinho, nosso resultado será esse (xxx)

1- Vá no seu HTML (Painel>>modelo) clique em alguma parte do código e tecle ctrl +f dentro, pesquise por </body> e ACIMA dele cole o seguindo código editando onde indicado 

<div id='footer-wrapper'><a href='LINK DO SEU BLOG'>NOME DO SEU BLOG </a>|<a href='lINK DO SEU BLOG DNV'> LINK DO SEU BLOG NOVAMENTE</a> - Todos os direitos reservados &#169; 2014<br>Tecnologia do <a href='http://blogger.com'>Blogger </a>| Desenvolvimento: <a href='LINK DA PESSOA QUE FEZ O LAYOUT'>NOME DA PESSOA QUE FEZ O LAYOUT</a> | <a href='#'>Voltar ao Topo</a> | <a href='javascript: location.reload(true)'>Atualizar Página</a></br></div> 
2 - Procure por ]]></b:skin> (seu css) e cole o seguinte código ACIMA da tag modificando onde indicado.


#footer-wrapper {
background:  #cordefundo ; background-repeat: no-repeat; /*cor do fundo*/  border-top:3px solid #cordaborda; /*cor da borda de cima*/  z-index: 100%; /*largura da barra*/  height: 30px; /*altura da barra*/ clear: both;font-family: Arial; font-weight: bold; /*tipo de fonte da barra*/  font-size: 90%; /*tamanho da fonte da barra*/  color: #4d7d77; text-align: center; /*cor da fonte*/  padding: 5px; /*altura da fonte*/ margin-bottom: -5px;}

Salve e pronto! um novo rodapé no blog. Crédito a Sugoi Tutoriais  
Pedidos de tutoriais pelos comentários ou ask

9 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Tutorial muito bom! Adorei! Beijos :*

    ResponderExcluir
  3. Adorei o tutorial mas achoq ue nos posts deveria ter, como vai ficar o resultado!
    beijos...
    mellobo.blogspot.com

    ResponderExcluir
    Respostas
    1. Mas tem o resultado no post sim e-e "nosso resultado será esse (xxx)" xxx = link da imagem do resultado

      http://3.bp.blogspot.com/-s9qIkyxq-fo/URbBtwz4vXI/AAAAAAAAAQo/PBhgdMQCPoM/s1600/Screenshot_1.png

      Excluir
  4. O tutorial deixou meu layout mais profissional! OBG!

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo