Colocar chat oculto no blog que abre ao clicar

DEMO

Em diversos segmentos da blogosfera um chat pode fazer uma grande diferença. Blogs com conteúdo ao vivo, conteúdo de esportes, conteúdo de jogos e realitys podem e devem ter um chat para que haja interatividade entre os partícipes. Mas há quem não goste dos chats e algumas vezes acham que atrapalham o layout do blog, para isso, há como colocar um código onde o chat ficará oculto. Vamos aprender ?

Para isso, abra a página do Xat clicando AQUI:

 Clique em  "Update & Get Code"

 Vai abrir uma janela como essa acima, copie o código e separe o número que está a frente de "ID", ele é o id de seu chat.


Vá até o modelo de seu blog e clique em Personalizar

Cole o código abaixo: (se quiser, substitua a imagem do balão amarelo por outra trocando o código em vermelho pelo endereço de sua imagem)

/*Chat--------------------------------------------------------------*/
#gb  {
 position:fixed;
top:250px;
 z-index:+1000;
right:-610px;
}
* html #gb {
 position:relative;
}
 .gbtab {
 height:121px;
 width:150px;
 float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XUjWPBw3s5ppuC9IUJrWBTTfCfaLQUNmdr6hKoXDXYg-OtziOY_iLEoit7ZeHm3kxOh9k9WZxuQamBLXlEYxrCbllZqWQbz3jzUY-8hyFGd_0NJPdfknNtW8ihiWSPKClYtMflclOzI/s1600/balao1.png')  no-repeat;
margin-top:20px;
}
.gbcontent {
 float:right; border:2px solid  #808080; background:#fff; opacity:0.90; -moz-opacity: 0.90; filter:  alpha(opacity=90); -webkit-border-radius: 20px; border-radius: 20px;  -khtml-border-radius: 20px; padding:8px;
}

 Volte ao modelo de seu blog e procure pelo seguinte código.

Procure por:

</body>


E acima dele, cole o código abaixo, colocando o número do ID de seu chat:

<script type='text/javascript'> function showHideGB(){ var gb =  document.getElementById(&quot;gb&quot;); var w = gb.offsetWidth; gb.opened ?  moveGB(0, 47-w) : moveGB(20-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.right = 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 class='gbcontent'>
<div style='line-height:0;
background-position:center;
width:590px;
height:310px;'>
<embed align='middle' allowscriptaccess='sameDomain' flashvars='id=AQUI O NÚMERO DO ID DE SEU CHAT' height='310' name='chat' pluginspage='http://xat.com/update_flash.shtml' quality='high' src='http://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='590' wmode='transparent'/>
</div>
</div>
</div>

Salve e pronto.


Se quiser, mude a imagem do balãozinho, aqui algumas alternativas.