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