Colocar barra de créditos ao pé do (footer) Blogger

Sempre a procura de epaço e em busca de um template mais harmonioso tem horas  em que nos perguntamos onde mais daria para colocar algum widget, banner, menu social, aquele contador ou outras coisinhas no blog sem o deixarmos com uma estética prejudicada. Por isso, sempre inovamos, buscando soluções que se encaixem bem no blog. Uma solução boa é aplicar uma div para colocarmos coisinhas necessárias, ou nem tanto no footer do Blogger. Faça isso com facilidade.

  Hack atualizado para o  abril de 2013

Vá até o modelo, clique em Personalizar

Clique em Avançado, Adicionar CSS e cole o código abaixo

(se quiser mudar a cor de fundo, troque o código grifado em azul)

Acima dele, cole o código abaixo:

/*Créditos----------------------------------------------------------*/
#creditos{
color: #000;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
font-size: 12px;
margin: -20px 0 0 0;
padding: 0px 3px 2px 4px;
background: #A5CDEF;
background: -webkit-linear-gradient(#808080, #eee);
background: -moz-linear-gradient(#808080, #eee);
background: -o-linear-gradient(#808080, #eee);
text-align: left;
}
#creditos a {
color: #000;
font-size: 12px;
}

Agora volte no modelo.
Clique em Editar HTML

procure por:  </footer> 

 Acima dele cole este próximo código. Não se esqueça de colocar os endereços de suas páginas nos botões sociais e se quiser retirer o link do meu blog, fique a vontade, bastando para isso apagar a parte que está grifado em amarelo.

<div id='creditos'>
<div align='right'>
<a href='ENDEREÇO DE SEU BLOG'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMP_Aj5_BAqgBpveBgesvKWao41BWSGj8yURHW_7QpWBcv6MNEzvSoN-_ruejh-g_5IlFr5S28GSbGTiEynVo0s98L5N65QmmbjxbbRuEi5a7mvqLO7WFc8LCY43lJ9qfRDeR-ChdcxE/s1600/blogger48.png'/></a>
<a href='ENDEREÇO DE SUA PÁGINA NO FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzYXPgMxshZdq28NDrisjnCS3keAz4vZ8hIr6_k_CywuATGNAjvNSB_PejuUG18LO4iDKanEu5V2TKjgu7EjhxM4LD0DhZdsLvEx-21fC7x_J2yUwrFPwolfojtaOfaZQWJbEJBsYINk/s1600/facebook48.png'/></a>
<a href='ENDEREÇO DE SEU TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieP7DrQpoOeEEB_y9YKgSIvWxmfO7Rt5Lhw7RWkUmbUejO9vTfmuMhDeJpA6nA0zbX2PRCkN3ufa3siflK6cMuCiZLz_sMAJioMhqXlv_BNaPZJ7OF92rEKtp0IHrz96z5FYIOA1xJkoM/s1600/twitter48.png'/></a>
<a href='mailto:ENDEREÇO DE SEU EMAIL'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIpFczLFsyp0bhCfjrqRHD890au0c4oEw3wGDef1HRnwLJeDaBRCQcOnc6ksNyySI7zKEAmhyphenhyphenGiIph8b7_0TRiO6wB8lM1E6EagXt0EKy45oPZrnKjj2T9XF9jhqdZE1hFYsQu3WLiYU/s1600/gmail48.png'/></a>
<a href='ENDEREÇO DE SEU FEED'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianljlZQdWDCKs7QDqRqu584CvbYOlzcLnHjdP71bW5DkDGffvxgJzOVtv_6mFf3H0vVdwHOeqWfDTMC-f-5szPxVKL1tqLOmXuJlwKb1dRHE6yHy459B_Vkye3RRHA7W0KooXv4vuzpo/s1600/rss48.png'/></a>
</div>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Todos os direitos reservados 2013  &#169; <br />
Por Elke di Barros | Conheça o blog<a href='http://templateseacessorios.blogspot.com/'> Templates e Acessórios</a>

<div align='right'>COLE AQUI ALGO COMO UM CONTADOR</div>
</div>

»»Leia mais...

Dar estilo as colunas do pé do blog (footer) no novo Blogger

Continuando a costumização do blog, vamos agora dar estilo as colunas que ficam ao pé do blog.

Você já sabe que uso o modelo Simple, para as costumizações que faço,  mas não custa lembrar.

Vá até o Modelo de seu blog, clique em Editar modelo

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 procure por:  

]]></b:skin>  

 

Acima dele cole este código abaixo

/*Footer widget-------------------------------------------------------------------------*/
#footer-2-1, #footer-2-2,  #footer-2-3 {
margin: 10px 2px;
padding: 3px;
background: #FA6C1E;/*cor de fundo do exterior do widget*/
}

#footer-2-1 h2, #footer-2-2 h2,  #footer-2-3 h2{
text-align: center;
padding: 2px 0;
font-size: 16px;
background: #FEECFE;/*cor de fundo do título*/
}
#footer-2-1 ul li, #footer-2-2 ul li,  #footer-2-3 ul li{
padding:  0;
margin: 0;
list-style-type:none;
text-align: left;
font-size: 12px;
}
#footer-2-1 .widget, #footer-2-2 .widget,  #footer-2-3 .widget{
margin: 16px 3px ;
padding: 2px;
background: #C7DEFD;/*cor de fundo do interior widget*/
moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

#footer-2-1 .widget-content, #footer-2-2 .widget-content, #footer-2-3 .widget-content {
margin: 1px;
padding: 3px 1px;
background: #FEF4CC;/*cor de fundo do conteúdo*/
}

Salve.

Se não quiser a sombra nos widgets, apague o código na cor azul
Código na cor rosa é a distância das listas de link da borda do widget
Código em vermelho são as cores dos widgets

Se preferir algo mais clean como este modelo abaixo:

Copie o código abaixo e cole antes de:

]]></b:skin> 

/*Footer widget-------------------------------------------------------------------------*/
#footer-2-1, #footer-2-2,  #footer-2-3 {
margin: 10px -10px;
padding: 3px;
}
#footer-2-1 ul li, #footer-2-2 ul li,  #footer-2-3 ul li{
padding:  0;
margin: 0;
list-style-type:none;
text-align: left;
font-size: 12px;
}
#footer-2-1 .widget, #footer-2-2 .widget,  #footer-2-3 .widget{
margin: 16px 12px ;
padding: 10px  -12px;
border: 1px solid #ccc;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}

»»Leia mais...

Footer que se expande em 5 colunas

Coloque um footer em seu blog com 5 colunas que fica escondido, só aparecendo ao ser clicado. Essa dica é do blog Abu Farhan mas acabei fazendo uma adaptação. Veja AQUI como ficará.

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.

 Vá até o HTML de seu blog e procure por:
</body>

 Agora cole o código  acima dele.

<div id='dock'>
<!-- Put your dock in this section -->
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 20%; 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: 20%; 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: 20%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:left;'/>
</div>

<div id='footer5' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col5' preferred='yes' style='float:left;'/>
</div>
</div>
</div>

Agora encontre:
]]></b:skin>

E cole o próximo código abaixo dele.
(É recomendável que vc salve e depois hospede os dois scripts abaixo em um servidor para evitar problemas)
jqueryeasing.js
jqueryeasing.js

<script src='http://www.sigmirror.com/files/23924_ndaws/jquery.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/23965_5kf1u/jqueryeasing.js' type='text/javascript'/>
<script>
//http://webtips.dan.info/graceful.html
$(document).ready(function() {
//Transition you want
var easing_type = &#39;easeOutBounce&#39;;
//The default height for the dock (on mouse out)
var default_dock_height = &#39;20&#39;;
//Expanded height, the height of the dock on mouse over, you have to set it in CSS
var expanded_dock_height = $(&#39;#dock&#39;).height();
//Fake body height
var body_height = $(window).height() - default_dock_height;
//Set the size of #fake_body
$(&#39;#fake-body&#39;).height(body_height);
//Set the CSS attribute for #dock
$(&#39;#dock&#39;).css({&#39;height&#39;: default_dock_height, &#39;position&#39;:&#39;fixed&#39;, &#39;top&#39;: body_height});
//In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock
$(window).resize(function () {
//Grab the updated height/top
updated_height = $(window).height() - default_dock_height;
//Set the updated height for #fake_body and top for #dock
$(&#39;#fake-body&#39;).height(updated_height);
$(&#39;#dock&#39;).css({&#39;top&#39;: updated_height});
});
//The main event for the dock bottom menu
$(&#39;#dock&#39;).mouseover(function () {
//Recalculate expanded height (always get the latest height), in case user has resized the window
expanded_height = $(window).height() - expanded_dock_height;
//Animate the height change, set the height to expanded_dock_height and set the top value as well
$(this).animate({&#39;height&#39;:expanded_dock_height,&#39;top&#39;: expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
//Recalculate default body height (always get the latest height), in case user has resized the window
body_height = $(window).height() - default_dock_height;
//Animate the height change, set the height to default_dock-height and set the top value as well
$(this).animate({&#39;height&#39;:default_dock_height,&#39;top&#39;: body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>
<style type='text/css'>
<!--
#floatmenu{position:absolute; width: 220px; top: 10px; left: 10px; z-index:5; visibility:visible;}
-->
</style>
<script language='javascript'>
<!--
function FixMenuY(){
document.getElementById('floatmenu').style.top = document.body.scrollTop + 10;
}
setInterval("FixMenuY()",200);
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;}
//-->
</script>

Muito bem, agora vamos dar estilo as 5 colunas. Você pode aumenta-las horizontalmente, modificar cores de fundo, de borda e do fundo do título.

 Acima de ]]></b:skin> cole o código abaixo.

/*Footer expansivo-----------------------------*/
#fake-body {overflow:auto; z-index:1;}
#dock {
background:#000; /*cor de fundo*/
 border-top: 3px solid #808080; /*cor da borda*/
 height:300px;
 z-index:100;
width:100%;
}
#footer-columna-contenedor {clear:both;}
.footer-columna {padding: 10px;}

#col1 .widget{height:240px;overflow:auto;}
#col1{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col1 h2{
background: #ccc;/*cor de fundo do título*/
 font-size: 16px;
 text-align: center;
}

#col2 .widget{height:240px;overflow:auto;}
#col2{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col2 h2{
background: #ccc;/*cor de fundo do título*/
font-size: 16px;
text-align: center;
}

#col3 .widget{height:240px;overflow:auto;}
#col3{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col3 h2 {
background: #ccc;/*cor de fundo do título*/
font-size: 16px;
text-align: center;
}

#col4 .widget{height:240px;overflow:auto;}
#col4{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col4 h2{background: #ccc; font-size: 16px; text-align: center;}

#col5 .widget{height:240px;overflow:auto;}
#col5{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col5 h2{
background: #ccc; /*cor de fundo do título*/
font-size: 16px;
text-align: center;
}

Pronto, as colunas estão instaladas. Vá até "Elemento de página" clique sobre "Adicionar um widget" e escolha o que colocar.

»»Leia mais...

Criar barra de ferramentas para o footer do Blogger 3

Bom, agora vamos para a segunda parte do código, a parte onde ocultaremos os elementos.

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.

Vá até o HTML de seu blog e encontre o código:

]]></b:skin>

agora acima dele cole o próximo código.

*Preste atenção ao número correspondente aos htmls. Estes são os que ficarão ocultos PORTANTO, o número deles deverá corresponder ao número dos HTMLs dos elementos 'OCULTOS'.

/* conteudo Feed */
#HTML6 {display: none; width: 400px;}
/* conteudo Comentarios */
#HTML4 {display: none; width: 240px;}
/* conteudo Twitter */
#HTML2 {display: none; width: 260px;}

body#layout #footer-tools #HTML6 {display: block;}
body#layout #footer-tools #HTML4 {display: block;}
body#layout #footer-tools #HTML2 {display: block;}

Agora veja como está o seu template. Se fez tudo certo, você verá os ícones com as imagens. Clique então nas imagens de ferramentas , essa do Blogger( ) e cole então os códigos dos respectivos ícones.
Ex: Ícone do Feed cole o código do feed, do Twitter, com o código do Twitter e assim por diante.


O resultado deverá ser este.



Se quiser colocar um buscador na barra, coloque o próximo código antes de:

]]></b:skin>

#CustomSearch1 { background: transparent url(URL_imagen) no-repeat left top; height: 35px !important; padding: 15px 0 0 60px; width: 180px;}

Agora copie este próximo código e cole em uma HTML/Javascript, na última barra, em "Elementos de página".

<div class="widget-content">
<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="Procurar" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input class="b-query" value="AQUI O NOME DE SEU BLOG.blogspot.com/" name="bl_url" type="hidden"/>
<input border="0" alt="Buscar" src="AQUI O ENDEREÇO DE SUA IMAGEM" type="image"/>
</form></div>

»»Leia mais...

Criar barra de ferramentas para o footer do Blogger 2

Agora vamos colocar os elementos na barra. Você já viu a primeira parte Aqui, e viu que apareceram duas barras em "Elementos de página"

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.

1-Na barra de cima ficarão os elementos ocultos, os elementos que só aparecerão quando o visitante clicar.

2-Na barra de baixo ficarão os elementos onde o visitante irá clicar, PORTANTO, você deverá colocar 2 vezes cada elemento como no exemplo.

Clique em "Adiconar um gadget" e adicione o que quiser nas duas barras como mostra a imagem em HTML/Javascript.

O primeiro widget a colocar (e esse é obrigatório) é o de nome "ICO TOLLS", note que este só será colocado 1 vez, e na na barra de baixo.


Depois vá colocando os outros widgets, mas sempre assim, em cima e em baixo. O de cima escreva "Conteúdo" antes da palavra.

Pronto, acrescentou tudo o que queria ? Então a aparência deverá ser mais ou menos assim.











No meu caso coloquei Twitter, Feed e Comentários. Note que há o mesmo conteúdo nas duas barras, porem, na barra de cima adicionei a palvra" CONTEÚDO" para diferenciar as duas na hora de colocar o código.


Agora no HTMl de seu blog procure pelo código:
]]></b:skin>
e depois dele cole o código abaixo trocando o código na cor verde pelo endereço de sua imagem.

<script type='text/javascript'>
//<![CDATA[
var toolOpen = "";
function ftool(cual) {
var cualmostrar = document.getElementById(cual);
if (cualmostrar.style.display == 'block') {
cualmostrar.style.display='none';
toolOpen = "";
} else {
if (toolOpen != "") { document.getElementById(toolOpen).style.display='none'; }
cualmostrar.style.display='block';
toolOpen = cual;
}
}
function togglebarra() {
var labarradiv = document.getElementById('footertools-barra');
var labarraimg = document.getElementById('icotoggle');
if(labarradiv.className == "footertools-barra-max") {
labarradiv.className = "footertools-barra-min"
labarraimg.src="ENDEREÇO DA IMAGEM MAIS";
} else {
labarradiv.className = "footertools-barra-max"
labarraimg.src="ENDEREÇO DA IMAGEM MENOS";
}
}
//]]>
</script>

Salve

Abaixo algumas imagens. Salve em seu pc e depois hospede-as em um site. AQUI outros botões.

Agora, procure o último código
</div> em seu blog. Acima você verá um código parecido com este, só que claro, com os títulos que você deu a seus widgets. Anote o número do HTML de cada um, você irá precisar.




*Código na cor azul representa o título dos widgets
*Código na cor vermelha representa o endereço do widget.


<div id='footertools-contenedor'>
<b:section id='tool-container'>
<b:widget id='HTML6' locked='false' title='Conteudo de feed' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Conteudo comentarios' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Conteudo Twitter' type='HTML'/>
</b:section>
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner'>
<b:widget id='HTML5' locked='false' title='Feed' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Comentarios' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Twitter' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Ico Tools' type='HTML'/>
</b:section>
</div>



Bom, agora o que você terá que fazer é ver o seu blog. Note que estará tudo aberto, as tabelas ocultas. Vá clicando no pequeno ícone de ferramentas do Blogger ( )e vá colando os códigos abaixo.

*Atenção: Não se esqueça de substituir os números do HTML pelos números dos HTML dos seus widgets, aqueles que vc escreveu a palavra "Conteúdo" antes.






No widget Feed colocamos este código:

<a id="feed" href="javascript:ftool('HTML6')"><img src="ENDEREÇO DA IMAGEM FEED" /></a>

No widget Comentários colocamos este código:

<a id="comentarios" href="javascript:ftool('HTML4')"><img src="ENDEREÇO DA IMAGEM COMENTARIOS" /></a>

No widget Twitter colocamos este código:

<a id="twitter" href="javascript:ftool('HTML2')"><img src="ENDEREÇO DA IMAGEM TWITTER" /></a>

No widget Icotools colocamos este código:

<a href="javascript:togglebarra()"><img id="icotoggle" src="ENDEREÇO DA IMAGEM MAIS" /></a>

Atenção, que no widget  "Ico Tools" depois de colocar este código dentro do  widget, volte no HTML do blog e acima de
]]></b:skin>
Cole este próximo código substituindo o número 7 pelo número do HTML do seu 'Ico Tools':

#HTML7{
position: absolute;
right: 0;
}

Agora vamos para a terceira e última parte, onde esconderemos o conteúdo.

Créditos: Vagabundia

»»Leia mais...

Criar barra de ferramentas para o footer do Blogger

Direto do blog do JMujir, vem essa dica quente. Colocar no Blogger uma barra de ferramentas no footer do Blogger que fica fixa e abre elementos ocultos. Veja o exemplo AQUI.

Vamos aprender ?

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.

Vá até o HTML de seu blog e procure pelo último código </div> do template e abaixo dela, cole o seguinte código :

<div id='footertools-contenedor'>
<b:section id='tool-container' />
</div>
<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner' />
</div>

Agora cole o próximo código antes de :
</head>

<style type='text/css'>

/* FOOTER TOOLS : Todas as definições de estilo serão feitas aqui */

/* aqui é a div da barra */
#footertools-barra {
background: transparent url(ENDEREÇO DA IMAGEM) repeat-x left top; /* aqui a cor da barra ou uma imagem*/
bottom: 0;
right: 0;
height: 50px; /* altura da barra */
margin: 0 auto; /* conteúdo ao centro */
padding: 0;
position: fixed;}
.footertools-barra-max {
width: 100%;}
.footertools-barra-min {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
width: 3px;}
#footertools-barra-inner {
height: 50px;
margin: 0 auto;
width: 920px;}
#footertools-barra .widget {
float: left;
height: 50px;
margin: 0 5px;}
#footertools-barra h2 {
display:none;}
#footertools-contenedor {
bottom: 55px;
right: 0;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;}
#footertools-contenedor .widget {
-moz-border-radius: 10px; /*apagando a linha a frente retira o arredondamento*/
background-color: #E4E4E4; /*cor de fundo da janela oculta*/
border: 2px solid #000000; /*cor da borda da janela oculta*/
margin: 0 auto;
padding: 10px;}
#footertools-contenedor h2 {
border-bottom: 1px dotted #999; /*cor da linha abaixo titulo*/
color: #BB0000;/*cor da letra titulo*/
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
letter-spacing: -.01em;
line-height: 24px;
margin: 0;
text-align: right;}
</style>

*Se não quiser a barra fixa, apague os códigos que estão na cor azul.


Agora antes de ]]></b:skin> cole o próximo código:

body#layout #footertools-barra {position: static;}
body#layout #footertools-contenedor {position: static;}

Salve e veja como ficou em "Elementos de página", deverá ter 2 gadgets a mais.

Para ver a segunda parte, clique aqui

Créditos: Vagabundia

»»Leia mais...

Botões sociais no Blogger com efeito

Encontrei no blog Widgets, este tutorial ensinando a colocar botões sociais, deste em que a pessoa pode relacionar as postagens que gosta. Já instalei aqui no Templates e repasso aa dica, com uma modificação: o fundo na cor escolhida por vc. Então, vamos fazer ?

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.

Vá até o HTML do seu blog e depois do código:
]]></b:skin>

Cole este próximo código:

<!--Social Bookmarking Widget start http://www.widgetblogger.co.cc-->
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background: #CCCCCC;
position:relative;
width:540px;
}


div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background: #CCCCCC;
position:absolute;
right:-17px;
}


div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}


div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}


div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;


}


.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}


.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}


</style>

*Códigos na cor vermelha representam a cor de fundo da barra de botões

Salve !

Agora clique em "Expandir modelos widget" e procure pelo código :

<div class='post-footer-line post-footer-line-3'/>

Depois dele cole o próximo código:

<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='AQUI O ENDEREÇO DE SEU FEED' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul><span class='sexy-rightside'/></div>

*Troque o código na cor verde pelo endereço de seu Feed

»»Leia mais...

Colocando 5 colunas no footer do blog

Se você tem tanto, mais tanto widget em seu blog que quer dar uma aliviadinha nas colunas laterais, você poderá colocar 5 colunas no footer do blog.

Para isso copie o código e cole acime de:
]]></b:skin>

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.

/* 5 colunas Footer
----------------------------------------------- */
#colunasfooter{
margin:0px auto;
width:990px;
}

.areacolfot{
background:#222;
margin:0px auto;
}

h3.colfothead{
font-family:Yanone Kaffeesatz;
height:30px;
font-size:20px;
padding-left:30px;
padding-top:10px;
color:#DF9545;
text-transform:uppercase;
letter-spacing:2px;
}

.colfot{
float:left;
width:160px;
padding-bottom:30px;
font-size:12px;
list-style:none;
margin:20px 0px 0px 15px;
color:#ddd;
}

.colfot ul {
list-style-type: none;
margin:  0px;
padding: 0px 5px 5px 5px ;
}

.colfot li{
list-style-type: none;
margin: 0 ;
padding: 0;
border-bottom:1px solid #333;
text-decoration: none;
padding: 5px 0px 5px 5px;
display:block;
}

.colfot ul ul  {
list-style-type: none;
margin: 0;
padding: 0px 0px 0px 0px;
background-repeat:no-repeat;
}

.colfot ul li {
height:100%;
line-height:18px;
clear: left;
width: 190px;
list-style-type: none;
}

.colfot ul li a:link, .colfot ul li a:visited  {
color:#777;
}

.colfot ul li a:hover{
color: #ccc;
}

*O código na cor azul acima, representa a cor de fundo dos widgets .

Agora procure pelo código

<!-- end content-wrapper -->


e depois dele cole o próximo código:

    <div class='areacolfot'>

<div id='colunasfooter'>
<ul>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Label3' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='Label4' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
<b:widget id='Label5' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>

<b:section class='lowerbar' id='lowerbar5' preferred='yes'>

<b:widget id='Label6' locked='false' title='Labels' type='Label'/>

</b:section>

</div>

</ul>
<div class='clear'/>
</div>
</div>

Agora á até "Elementos de página, você verá as 5 colunas. Arraste para baixo os widgets ou então, coloque novos.

»»Leia mais...