22 abril, 2009

Rodapé do Blogger Com 4 colunas

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).

Mas vamos ao que interessa. Essa dica eu encontrei no ótimo blog Como Fazer Web do Bianco Garniz e da FRX. Poderá encontrar Aqui todas as dicas.
Vamos então ver como proceder:
Primeiro vá até a edição de HTML em seu blog. Feito isso, procure por:

Continue Lendo...


/* Footer


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é.

Um comentário:

  1. 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

Abaixo segue uma pequena lista de coisa para que tenha-se mais ou menos uma ideia do que se deve e não deve se fazer.

- Seu comentário precisa ter relação com o assunto do post;
- Comente com conteúdo. Se não tiver nada para escrever, não escreva;
- Não inclua links desnecessários no conteúdo do seu comentário;
- CAIXA ALTA (Caps Lock ativado), Internetês ridículo ou erros horríveis de ortografia não serão tolerados;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;
- Parceria? aqui não é lugar para isso, entre em Contato Conosco Pelo Email;

OBS: Os comentários não refletem as opiniões do autor.