Tutorial - Colocando Xat na lateral do BLOG

AI GENTE VOU POSTAR AQUI COMO COLOCA O XAT NA LATERAL DO SEU SITE OU BLOG
BOM COMO VOCES JA VIRAM MTS SITES COM O XAT OCULTO NA LATERAL DO SITE 
ENTAO VO POSTAR AQUI COMO VOCES FAZEREM ISSO

BOM PRIMEIRAMENTE VA EM HTML E PROCURE PELA TAG:  ]]></b:skin>
E COLE ESSE CODIGO ACIMA DA TAG

/* Chat<br /> ----------------------------------------------- */<br /> #gb{<br /> position:fixed;<br /> top:340px;<br /> z-index:+1000;<br /> right:-610px;<br /> }<br /> * html #gb{position:relative;}<br /> .gbtab{<br /> height:164px;<br /> width:51px;<br /> float:left;<br /> cursor:pointer;<br /> background:url('IMAGEM DO BOTÃO PARA ABRIR O CHAT') no-repeat;<br /> }<br /> .gbcontent{<br /> float:left;<br /> border:1px solid #000;<br /> background: url(IMAGEM DE BACKGROUND PARA O CHAT)repeat;<br /> padding:10px;<br /> }


FICANDO ASSIM


/* Chat<br /> ----------------------------------------------- */<br /> #gb{<br /> position:fixed;<br /> top:340px;<br /> z-index:+1000;<br /> right:-610px;<br /> }<br /> * html #gb{position:relative;}<br /> .gbtab{<br /> height:164px;<br /> width:51px;<br /> float:left;<br /> cursor:pointer;<br /> background:url('IMAGEM DO BOTÃO PARA ABRIR O CHAT') no-repeat;<br /> }<br /> .gbcontent{<br /> float:left;<br /> border:1px solid #000;<br /> background: url(IMAGEM DE BACKGROUND PARA O CHAT)repeat;<br /> padding:10px;<br /> }
]]></b:skin>

LOGA APOS FAZER ISSO  PROCURE PELA TAG  </body>
E COLE ESSE CODIGO ACIMA


<script type='text/javascript'> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-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.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <br /> <div id='gb'><br /> <div class='gbtab' onclick='showHideGB()'></div><br /> <div class='gbcontent'><br /> <!-- BEGIN CBOX - www.cbox.ws - v001 --><br /> <div style='line-height:0;background-position:center;width:590px;height:310px;'><br />ID DO XAT<br /> <br /> </div></div></div><br /> <br /> <br /> <br /> 


FICANDO ASSIM

<script type='text/javascript'> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-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.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <br /> <div id='gb'><br /> <div class='gbtab' onclick='showHideGB()'></div><br /> <div class='gbcontent'><br /> <!-- BEGIN CBOX - www.cbox.ws - v001 --><br /> <div style='line-height:0;background-position:center;width:590px;height:310px;'><br />ID DO XAT<br /> <br /> </div></div></div><br /> <br /> <br /> <br /> 
 </body>

OBS : Lembrando que nas partes que estão destacadas de vermelha voces façam alteração com suas informaçoes e botoes para xat tem na categoria botões obrigado !!

Posted in: Tutoriais