fonte e créditos:templateseacessorios
Adicionar 3 colunas ao footer do Blogger
Para colocar três colunas no footer do Blogger ( parte inferior do Blogger) como AQUI
neste exemplo, a primeira coisa a fazer é retirar todo e qualquer
widget que lá estiver. Não é preciso deletar, basta arrasta-los para a
coluna lateral. Agora vá até o HTML do seu blog, clique em "Expandir
modelos de widget" e procure pelo código:
</div> <!-- end content-wrapper -->
Agora que o encontrou, coloque este próximo código acima dele.
<div id='footer-wrapper'>
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 32%; float: left; margin:0 2px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='Label5' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer2' style='width: 34%; float: left; margin:0 5px 0 5px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='Label6' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer3' style='width: 32%; float: right; margin: 0 2px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='Label7' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
</div>
</div>
<div style='clear:both;'/>
Salve e procure por:
]]></b:skin>
E , acima dele
Esse hackse aplica ao antigo Blogger.Não se esqueça deantes de começarsalvaruma cópia de seu template,caso não dê certo, é sóreinstalá-lo.
</div> <!-- end content-wrapper -->
Agora que o encontrou, coloque este próximo código acima dele.
<div id='footer-wrapper'>
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 32%; float: left; margin:0 2px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='Label5' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer2' style='width: 34%; float: left; margin:0 5px 0 5px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='Label6' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<div id='footer3' style='width: 32%; float: right; margin: 0 2px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='Label7' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
</div>
</div>
<div style='clear:both;'/>
Salve e procure por:
]]></b:skin>
E , acima dele
cole
o próximo código :
/*Colunas do footer-----------------------------------------*/
#footer-columna-contenedor {
width: 99%;
clear:both;
margin:0 auto;
}
.footer-columna {
padding: 8px;
margin:0 auto;
}
#col1 .widget, #col2 .widget, #col3 .widget{
background: #fff;
border: 1px dashed $bordercolor;/*cor da borda*/
color: $sidebartextcolor;/*cor da letra*/
line-height: 1px;
padding: 10px;
margin:0 auto;
}
#col1 .widget-content, #col2 .widget-content, #col3 .widget-content {
border:3px solid #FFB90F;
border-top: none;
margin: 0 0 0;
padding:10px;
background: #fff;
}
#col1 h2, #col2 h2, #col3 h2{/*títulos*/
font-family: 'Wallpoet', arial, serif;
font-weight: bold;
background: #FFB90F;
margin: 2px 0 0 0;
padding: 20px 0px;
text-align: center;
float: center;
font-size: 18px;
color:$sidebartextcolor;/*cor da letra*/
text-shadow:0 1px 0 #f9f9f9;
}
#col1 ul, #col2 ul, #col3 ul{
list-style:none;
margin:0 0 0 0;
padding:6px 0 4px 0;
}
#col1 ul li a:link, #col2 ul li a:link, #col3 ul li a:link{/*link cinza*/
background:#eee;
color:#A2B8D7;/*cor da letra cinza claro*/
border-bottom:1px dashed #ccc;/*borda cinza claro*/
margin: 0 0 1px 0;
padding: 15px 0 15px 14px;
display:block;
}
#col1 ul li a:visited, #col2 ul li a:visited, #col3 ul li a:visited{ /*links visitados ciza escuro*/
background: #ccc;
color:#808080;/*cor da letra cinza escuro*/
border-bottom:1px dashed #808080;/*borda cinza escuro*/
margin: 12px 0 1px 12px;
padding: 10px 0 5px 14px;
display:block;
}
#col1 ul li a:hover, #col2 ul li a:hover, #col3 ul li a:hover{
background: #808080;
color: #5B79A3;
border-bottom:1px dashed #5B79A3;
}
Salve!
"Clique e veja como ficou "
/*Colunas do footer-----------------------------------------*/
#footer-columna-contenedor {
width: 99%;
clear:both;
margin:0 auto;
}
.footer-columna {
padding: 8px;
margin:0 auto;
}
#col1 .widget, #col2 .widget, #col3 .widget{
background: #fff;
border: 1px dashed $bordercolor;/*cor da borda*/
color: $sidebartextcolor;/*cor da letra*/
line-height: 1px;
padding: 10px;
margin:0 auto;
}
#col1 .widget-content, #col2 .widget-content, #col3 .widget-content {
border:3px solid #FFB90F;
border-top: none;
margin: 0 0 0;
padding:10px;
background: #fff;
}
#col1 h2, #col2 h2, #col3 h2{/*títulos*/
font-family: 'Wallpoet', arial, serif;
font-weight: bold;
background: #FFB90F;
margin: 2px 0 0 0;
padding: 20px 0px;
text-align: center;
float: center;
font-size: 18px;
color:$sidebartextcolor;/*cor da letra*/
text-shadow:0 1px 0 #f9f9f9;
}
#col1 ul, #col2 ul, #col3 ul{
list-style:none;
margin:0 0 0 0;
padding:6px 0 4px 0;
}
#col1 ul li a:link, #col2 ul li a:link, #col3 ul li a:link{/*link cinza*/
background:#eee;
color:#A2B8D7;/*cor da letra cinza claro*/
border-bottom:1px dashed #ccc;/*borda cinza claro*/
margin: 0 0 1px 0;
padding: 15px 0 15px 14px;
display:block;
}
#col1 ul li a:visited, #col2 ul li a:visited, #col3 ul li a:visited{ /*links visitados ciza escuro*/
background: #ccc;
color:#808080;/*cor da letra cinza escuro*/
border-bottom:1px dashed #808080;/*borda cinza escuro*/
margin: 12px 0 1px 12px;
padding: 10px 0 5px 14px;
display:block;
}
#col1 ul li a:hover, #col2 ul li a:hover, #col3 ul li a:hover{
background: #808080;
color: #5B79A3;
border-bottom:1px dashed #5B79A3;
}
Salve!
"Clique e veja como ficou "