"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 arrastá-los para a coluna lateral (sidebar).
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Agora vá até o HTML do seu blog e procure pelo código:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
/\...Agora que o encontrou, coloque este próximo código abaixo dele.\/
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Agora copie o código abaixo e ainda no HTML do seu Blogger procure pelo código:
]]></b:skin>
E cole o código acima dele.
Salve
#footer-columna-contenedor {clear:both;}
.footer-columna {padding: 8px;}
Clique e veja como ficou
Agora para que você possa colocar as colunas conforme o design do seu blog, copie o código abaixo e cole antes de:
#sidebar-wrapper {
#col1{
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
#col2{
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
#col3{
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
#col2{
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
#col3{
background: transparent;
margin: 5px;
padding: 5px;
border: 2px outset #000000;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 1px solid #cc0000;
background: #cccccc;
text-align: left;
font-size: 90%;
color:#000000;
}
Faça as modificações a seu gosto.
- em amarelo---cor do fundo da coluna
- em verde---cor da borda das colunas
- em roxo---cor da borda do título
- em vermelho---cor do fundo do título
- em azul---cor da letra do título
- em cinza---tipo de borda
Outras cores:
Gerador de cores :
Vá passando o mouse por cima do círculo e tomando nota das cores. Para personalizar o template, os posts, etc.
clique aqui
clique aqui
outras bordas :
clique aqui
fonte e créditos:
http://noticiashoje3x.blogspot.com
.ico "EDIHITT"){kind=small}
{if(document.pnctLoadStarted)return;var%20d=document.createElement('div');d.setAttribute('id','pnctPreloader');d.setAttribute('style','position:fixed;top:0;bottom:0;left:0;right:0;z-index:100501;background-color:rgba(255,255,255,.9);padding:20px;text-align:center;font-family:helvetica;font-size:20px;font-weight:bold;');d.innerHTML='%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0...<a%20id="pnctCancelBtn"%20href="#"%20style="float:right;width:24px;height:24px;text-decoration:none;border:1px%20solid%20#ccc;border-radius:5px"><img%20src="//postila.ru/images/window_close.png"%20alt="x"/></a>';document.body.appendChild(d);document.pnctLoadStarted=(new%20Date()).getTime();document.pnctCnclLoad=function(){document.pnctLoadStarted=0;pl=document.getElementById('pnctPreloader');if(pl)pl.parentNode.removeChild(pl)};document.getElementById('pnctCancelBtn').addEventListener('click',function(e){e.preventDefault();document.pnctCnclLoad()});setTimeout(function(){var%20st=document.pnctLoadStarted;if(st>0&&((new%20Date()).getTime()-st>=14000)){document.pnctCnclLoad();alert('%D0%9A+%D1%81%D0%BE%D0%B6%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D1%8E%2C+%D0%BF%D0%BE%D0%B8%D1%81%D0%BA+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA+%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B5%D0%BD.')}},15000);var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//postila.ru/post.js?ver=1&m=b&rnd='+Math.random()*99999999);document.body.appendChild(e)})());)
Nenhum comentário:
Postar um comentário
Mensagem do formulário de comentário: