Rodapé do Blog Fixado no Rodapé da Página
Nesta postagem compartilho com vocês esta postagem mostrando como colocar o rodapé do seu blog fixado no rodapé da página do seu blog.
Para colocar no blogger...
Entre em "layout" - "Adicionar um Gadget" - "HTML/JavaScript" e colar o código
<style>
.Estilofixodicashot {
float: left;
}
.code-footer_top {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkrWjLZOvAg8mJWKx_Emwp0EhZuVo5pMzDIxT0nR5bd-WNyB7biW9qx8fiipFVicmjmDsJeTsa2lMxnhCNhLohyphenhyphencPQCJwQFXNQNifk0HnfMNao_pvnuZc106ROcX2hWoEFgu0eIgMsXc/s1600/footer_sep.png) no-repeat center left;
padding: 4px 25px 4px 25px;
height: 12px;
margin-top: 5px;
float: right;
}
.backToTop {
display: block;
float: left;
margin-top: -10px;
}
.ot_topicon a {
text-decoration: none;
color: #ccc;
}
.ot_topicon a:hover {
text-decoration: none;
color: #fff;
}
.backTo {
font-weight: bold;
font-size: 15px;
text-shadow: 0 1px 0 #21639D;
}
#code-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#code-footer {
display: block !important;
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #EEE !important;
text-align: left !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6E6E6E, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none !important;
background-image: url(http://t1.gstatic.com/images?q=tbn:ANd9GcTADqTY9lR6PeSqHuChDSiSxFxE3ZLZo2Gno145Z70FG2sXw_r2qg);
background-repeat: repeat;
}
#code-footer a {
color: #A7A7A7 !important;
text-decoration: none !important;
}
#code-footer a:hover {
color: white !important;
}
#code-footer:before,
#code-footer:after {
display: none;
}
</style>
<div id='code-footer'>
<div class='Estilofixodicashot'>
<a href='#'>Copyright © 2012 - Todos os Direitos Reservados - </a>
<a href='http://dicashot.blogspot.com.br/'>DicasHot</a> Design by:<a href='http://www.cscreative.net/' style='color: #27A5C4 !important;' target='_blank' title='CSCreative'> CSCreative</a>
</div>
<div class='code-footer_top'>
<a class='backToTop' href='#top'>Topo</a>
</div>
</div>
A parte destacada de azul no código, corresponde a imagem de fundo da barra.
Tendo feito isto está pronto!!!
