Criar Rodapé Personalizado no Blogger

Nesta postagem compartilho com vocês este novo rodapé totalmente personalizável, você pode ver uma demonstração aqui mesmo no rodapé do site.

Bem legal, não é?

Para colocá-lo no seu blog é bem simples:

Entre em "Layout"- "Editar HTML" e procure pela tag

</body>

Tendo encontrado a tag, cole ABAIXO dela o código:


<style>

/*** FOOTER STYLES ***/

/*********************************************************/

#footer23 {

 background:#000;

 

 padding:30px 0 40px 0;

}




 /*** Footer23 social ***/

 .footer23-social {

  text-align:center;

  border-bottom:1px solid rgba(255,255,255,.15);

  padding-bottom:30px;

  margin-bottom:35px;

 }

 .footer23-social span.social-item a {

  color:#aaa;

  margin:0 20px;

  letter-spacing:1px;

  font-size:14px;

  -o-transition:.3s;

  -ms-transition:.3s;

  -moz-transition:.3s;

  -webkit-transition:.3s;

  transition:.3s;

  display:inline-block;

 }

 .footer23-social span.social-item .round-icon {

  background:none;

  color:#aaa;

  width:auto;

  border:none;

  font-size:14px;

  margin-right:4px;

 }

 

 .footer23-social span.social-item a:hover, .footer-social span.social-item a:hover > .round-icon {

  color:#FFF;

 }




.footer23-bottom {

 text-align:center;

}

.footer23-bottom p {

 color:#626262;

 font-size:11px;

 text-transform:uppercase;

 letter-spacing:1px;

 font-weight:700;

 margin-bottom:30px;

}

.footer23-bottom img {

 margin-bottom:8px;

}

.footer23-bottom .fa.fa-heart {

 color:#e84142;

 margin:0 3px;

 font-size:14px;

}

.footer23-bottom span.copyright {

 font-size:10px;

 text-transform:uppercase;

 color:#626262;

 letter-spacing:1px;

}

</style>

<div id='footer23'>

<div class='container23'>

<div class='footer23-social'>

<span class='social-item'><a href='http://facebook.com/dicashot'><i class='fa fa-facebook round-icon'></i> Facebook</a></span>

<span class='social-item'><a href='http://twitter.com/dicashotblogger'><i class='fa fa-twitter round-icon'></i> Twitter</a></span>

<span class='social-item'><a href='http://plus.google.com/dicashotbloggerbr'><i class='fa fa-google-plus round-icon'></i> Google Plus</a></span>

<span class='social-item'><a href='http://instagram.com/'><i class='fa fa-instagram round-icon'></i> Instagram</a></span>

<span class='social-item'><a href='http://pinterest.com/'><i class='fa fa-pinterest round-icon'></i> Pinterest</a></span>

<span class='social-item'><a href='http://.tumblr.com'><i class='fa fa-tumblr round-icon'></i> Tumblr</a></span>

<span class='social-item'><a href='http://dicashot.blogspot.com/feeds/posts/default'><i class='fa fa-rss round-icon'></i> RSS</a></span>

</div>

<div class='footer23-bottom'>

<img alt='Hellya' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7m9bmV2-FQqOFWRTKfVFbrilXMjQF9X_MHH49QsfXrW8wUonFtPfGQxohyphenhyphenj5UFLRHh3HcrK00fNonse6Kjn9uxDeSYA3QcjJObsaxh_Tq3GrUbG7voTKvApE5sjydXYnL8pnQXJEVcZo3/s1600/cooltext1521868344.png'/>

<p>Editado por <a href='http://www.dicashot.blogspot.com/' id='blogg' style='color:#626262;'>DicasHot</a> - Traduzido <i class='fa fa-heart'></i>  Por <a href='http://www.maistemplate.net/' id='blog' style='color:#626262;'>Mais Template</a></p>

</div>

</div>

</div>

Tendo colado o código, basta salvar e pronto!!!

Carregando atualizações...

Criar Rodapé Personalizado no Blogger

DESTAQUES DO MÊS