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("gb");
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("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+",
"+xf+")", 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"
Tutoriais,
Video aulas
