Objetos Flutuantes no Blog

Pessoal hoje trago a vocês uma forma de colocar objetos flutuantes na tela do seu blog, esses objetos serão separados  por id para o melhor funcionamento e melhor manipulação.
Primeiro no seu blog entre em design, editar html, Importante: baixe o modelo do seu template para assegurar caso você faça algo errado, depois de baixar marque a opção expandir modelos de widgets e acima da tag  ]]></b:skin> cole o seguinte codigo.




/* inicio objetos flutuantes */
#float-alternativo {
width: 55px;
position: fixed;
_position: absolute;
bottom: 0px;
left: 0px;
clip: inherit;
margin-bottom: 0px;
top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

/* id das imagens */
a#c1, a#c1:link, a#c1:visited, a#c1:active {
    background:  url(URL DA IMAGEM) no-repeat;
    display: block;
    height: 55px;
    width: 55px;
    margin: 13px;
}

a#c2, a#c2:link, a#c2:visited, a#c2:active {
    background:  url(URL DA IMAGEM) no-repeat;
    display: block;
    height: 55px;
    width: 55px;
    margin: 13px;
}
/* fim objetos flutuantes */

Nas primeiras marcações em azul width quer dizer a largura do corpo principal, bottom é o que mantem os elementos na parte de baixo, left manten os objetos a esquerda e margin-botton serve para distanciar os elementos do fim da tela para melhor centralizar.
EX:
para que apareça do lado direito da tela troque left por right, e para aparecer no topo da tela troque bottom por top, se você trocar bottom por top voce deve alterar também  margin-bottom por margin-top.

Crie as imagens com um photoshop de sua preferência, obs: as imagens devem conter a mesma largura e altura configurada em width e height para que a imagem não fique imperfeita.
Agora na marcação em roxo vai o endereço da imagem que você quer que apareça, e onde está em  vermelho height é a altura da imagem, width é a largura da imagem e margim é a distancia entre uma imagem e outra.
Terminado salve as alterações e vamos ao html.

Agora procure pela tag  </body> e acima dela cole o sginte código.

<div id="float-alternativo">
  <a href='LINK A SER ABERTO' id='c1' target="_blank" title='TITULO'> </a>
 
  <a href='LINK A SER ABERTO' id='c2' target="_blank" title='TITULO'> </a></div>


Onde esta em vermelho coloque os links, e onde está em roxo os titulos.
Para colocar mais imagens repita o código dentro das divs. Importante: ao adicionar mais imagens não esqueça de alterar as id na marcação em verde.

Ex:

   <a href='LINK A SER ABERTO' id='c1' target="_blank" title='TITULO'> </a>
 
  <a href='LINK A SER ABERTO' id='c2' target="_blank" title='TITULO'> </a>

  <a href='LINK A SER ABERTO' id='c3' target="_blank" title='TITULO'> </a>


e na css também:


a#c1, a#c1:link, a#c1:visited, a#c1:active {
    background:  url(URL DA IMAGEM) no-repeat;
    display: block;
    height: 55px;
    width: 55px;
    margin: 13px;
}

a#c2, a#c2:link, a#c2:visited, a#c2:active {
    background:  url(URL DA IMAGEM) no-repeat;
    display: block;
    height: 55px;
    width: 55px;
    margin: 13px;
}

a#c3, a#c3:link, a#c3:visited, a#c3:active {
    background:  url(URL DA IMAGEM) no-repeat;
    display: block;
    height: 55px;
    width: 55px;
    margin: 13px;
}


É isso agora é só salvar e ver como ficou e qualquer dúvida é só perguntar.