Como Colocar Xat Flutuante No Rodapé Do Blog

1 - Com esse codigo mude as palavras em vermelho :

#gb {
position:fixed;
bottom:-340px;
z-index:+1000;
right:160px;
}
* html #gb {
position:relative;
 }
.gbtab {
height:48px;
width:677px;
margin-left: 45px;
cursor:pointer;
background:url

('http://img88.imageshack.us/img88/9633/34601740.jpg')  << (SEU LINK DA IMAGEM) (APAGUE E COLOQUE O SEU)

no-repeat;
margin-top:0px; }
.gbcontent { float:left; border:7px solid #000; 

background:#fff; -webkit-border-radius: 20px; 

border-radius: 20px; -khtml-border-radius: 20px; 

padding:8px; }

2 - No outro codigo abixo mude a palavra em verde

<script type='text/javascript'> 
function showHideGB(){ 
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth; 
gb.opened ? moveGB(0, 425-w) : moveGB(425-w, 0); 
gb.opened = !gb.opened; 
function moveGB(x0, xf){ 
var gb = document.getElementById(&quot;gb&quot;); 
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1; 
var dir = xf&gt;x0 ? 1 : -1; 
var x = x0 + dx * dir; 
gb.style.bottom = x.toString() + &quot;px&quot;; 
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, 

&quot;+xf+&quot;)&quot;, 10);} 
</script>
 <div id='gb'> <div class='gbtab' onclick='showHideGB()'> 

</div> <div class='gbcontent'> 
<div style='line-height:0;background-

position:center;width:735px;height:310px;'> 
<embed align='middle' allowscriptaccess='sameDomain' 

flashvars='id=840946751' << (MUDE PELO ID DE SEU XAT) (APGUE E PONHA O SEU)
height='310' name='chat' 

pluginspage='http://xat.com/update_flash.shtml' 

quality='high' 
src='http://www.xatech.com/web_gear/chat/chat.sw

f' type='application/x-shockwave-flash' 
width='735' wmode='transparent'/> </div> </div> </div>

3 - Para colocar seu link da imagem va nesse site > http://www.imageshack.us/ < crie ou loga na sua conta va em browse pegue uma imagem de xat q vem no codigo e coloca e aperte uploud , depois pegue o "LINK DIRETO" só copiar e colar

4 - Para colocar o ID va no seu blog clique va até seu xat "DO BLOG" e clique em  "GET A CHAT BOX" depois "MAKE A GROUP" la em cima no link vai ter os uyltimos numeros copio e cole.

5 - Faça o login no blogger > http://www.blogger.com/ < escolha um blog va em modelo , e "EDITAR HTML" > "EXPANDIR MODELOS DE WIDGETS" > CTRL + F > pegue essa tag ]]></b:skin>  , e pesquise depois de achar de 2enters e va para cima e cole o primeiro codigo...

6 - Pegue essa tag  </body> depois de achar de 2enters e va para cima pegue o segundo codigo e cole..

7 - Depois va em visualizar se tiver bom va em salvar modelo , caso tiver algum erro me comunique "rafaduclosamadonovaes@hotmail.com"

4 SHARED : CODIGO E IMAGENS



0