Quando se trata de Layout, estamos sempre procurando uma forma de aperfeiçoar, nunca estamos satisfeitos, é tanto que a maioria dos sites/blogs trocam todo seu layout pelo menos uma vez por ano, quando não fazem isso, estão acrescentando algumas inovações como Hacks com funcionalidades específicas. Eu não sou diferente, aqui mesmo já divulguei várias dicas que encontrei na internet para melhorar ou acrescentar uma funcionalidade no Blog. Ontem divulguei aqui
como devolver a imagem do lápis de edição rápida. Hj estou trazendo aqui uma forma de acrescentar colunas na parte de baixo de seu layout caso já não o tenha. No nosso site específico de matérias de informática, o
Botoja Web, possui um ótimo layout cedido pela
Ariane do
Templates Novo Blogger, porém ele originalmente não possui colunas de rodapé. (
Dependendo de quando você está lendo esta postagem o layout em questão já terá sido alterado).
Vamos então ver como proceder:
Primeiro vá até a edição de HTML em seu blog. Feito isso, procure por:
Continue Lendo...
Achando esta sessão no css, substitua inteira por esta abaixo, mas se não houver Sessão footer no seu template, adicione o código abaixo antes deste trecho ]]></b:skin>
/* Footer
----------------------------------------------- */
#footer-wrapper{background:#151515;clear:both;margin:0 auto;padding:15px 0 5px 0;overflow:hidden;}
#foot-wrap{margin:0 auto;width:980px;}
.foot{width:25%;float:left;margin:0;padding:0;color:#999;}
.foot a:hover{color:#ccc;}
.ft{padding:0 10px;}
.ft .widget{margin-bottom:15px;}
.ft ul{margin:0;padding:0;list-style:none;}
.ft li{margin:0;padding:0 0 .25em;}
.foot h2 {
font-size:16px;
font-weight:700;
font-family:Arial,Verdana,Sans-serif;
color:#ccc;
border-bottom:dotted 1px ;
margin:0 0 5px;
padding:0 0 2px;
}
#credits{font-size:11px;}
.trb2,.trb3,.trb4{background:#fff;border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;}
.trboxcontent{background:#fff;border:0 solid #d8d8d8;display:block;border-width:0 1px;padding:2px 10px;}
.trb1{background:#d8d8d8;margin:0 5px;}
.trb1,.trb2,.trb3,.trb4{display:block;overflow:hidden;}
.trsnazzy{background:transparent;margin:0 0 10px;}
.trtop,.trbottom{background:transparent;display:block;font-size:1px;}
.trb2{border-width:0 2px;margin:0 3px;}
.trb1,.trb2,.trb3{height:1px;}
.trb3{margin:0 2px;}
.trb4{height:2px;margin:0 1px;}
/* wireframe layout tweaks */
body#layout *{margin:0;padding:0;}
body#layout,
body#layout #foot-wrap,body#layout #navbwrap,
body#layout #outer-wrapper,
body#layout #content-wrapper {width:750px;min-width:750px;}
body#layout #navb{padding-bottom:15px;}
body#layout #main-wrapper{width:40%}
body#layout #header-wrapper{height:60px;}
body#layout .foot{width:187px;}
body#layout #srchbxwrap,body#layout #credits{display:none;}
Feito isto encontre esta parte abaixo
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Substitua inteira por este trecho abaixo, mas se não houver esta tag acima, procure por esta <!-- end content-wrapper --> e coloque o código abaixo logo após a mesma
<div id='footer-wrapper'>
<div id='foot-wrap'>
<div class='foot'>
<b:section class='ft' id='f1'/>
</div>
<div class='foot'>
<b:section class='ft' id='f2'/>
</div>
<div class='foot'>
<b:section class='ft' id='f3'/>
</div>
<div class='foot'>
<div class='ft'>
<b:section id='f4'/>
<!-- Coloque os créditos do seu template na área abaixo da div class widget-content(manter o FOOTER BY COMO FAZER WEB é opcional) -->
<div id='credits'>
<h2 class='title'>Créditos</h2>
<div class='widget-content'>
Footer by <a href='
http://www.comofazerweb.com' target='_blank'>Como Fazer Web</a>
<a expr:href='data:blog.homepageUrl'><data:
blog.title/></a> Powered By <a href='
http://www.blogger.com'>Blogger</a>
</div></div>
<!-- creditos -->
<div class='clear'/>
</div></div></div></div>
Clique em visualizar, e se tudo estiver correto, salve!Depois é só ir em "Elementos da página" e acrescentar o que quiser no rodapé.
Valeu pela dica amigo!Fazia tempo que eu estava tentando isto.Sou meio leigo no assunto,demorei quase uma tarde testando antes de salvar.Mais ficou bom.Um abraço...
ResponderExcluir