29 de ago de 2009

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

5 comentários:

  1. Erick, até desenhado está, se não entendeu, paciência, né ?

    ResponderExcluir
  2. Faz tempo que estou procurando algo assim.
    Muito obrigado pelo post.
    Gostei muito.
    Beijos

    ResponderExcluir
  3. Poxa Elke,
    teu blog tah nota mil...
    mais explicado que isso só se viesse me ensinar aki em casa, topas? rsrsrs
    ­ 
    implementei essa dika no meu blog, dah uma olhada:
    http://adot-df.blogspot.com
    ­ 
    bjos e abraços

    ResponderExcluir
  4. Boa noite

    Favor me dizer como colocar esta barra do lado esquerdo ao inves de ficar no final.

    Gostaria que ficasse do lado esquerdo por exemplo


    Obrigado

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube