Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog

Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog

Esse botão é um recurso bem útil para queles blogueiros que utilizam Bate-papo Xat no blog, pois o botão deixará o Xat acessível e visível para o visitante acessá-lo, e a vantagem também é, que, o xat não ficará ocupando um grande espaço no seu blog...

Como Colocar o Botão Abrir e Fechar Xat no Blog

Para colocar no blog é bastante fácil galera, então vamos lá.

1º Passo: Copie o código mostrado logo abaixo:

<div id="botao_xat" style="position:fixed;right:5px;bottom:0;text-align:right; z-Index:9999; background-color:transparent;"><img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioa8KHMXg4t9rg4L4riPD_Dfg2qDAXqRm5p2YBEe4O7YJvhQr400TKAzkJLY0IUgqEzeZ3DAohyphenhyphenCpTANxRVISWwS0OuCa0aoStdXGPWMPr-NFsaNsLBvj32s1Bu5te-rXfWXkXzTL-wOY/s1600/abrir+xat.png" /></div>

<script type="text/javascript">

function abrir_xat(){

document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSMumjDGxibPcjJ4G095zjZZKmbFeeC4Gw69oQbAxoTY1EqF_3-CWpLjJPXDId3fwXEu1oeUyG3GOTmOkxkFYbFfDFEEpvQc1VEdMSATyKyAGZBxGS-crFwaEByDKJugquOBo7IyTIU0/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br>';

document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSMumjDGxibPcjJ4G095zjZZKmbFeeC4Gw69oQbAxoTY1EqF_3-CWpLjJPXDId3fwXEu1oeUyG3GOTmOkxkFYbFfDFEEpvQc1VEdMSATyKyAGZBxGS-crFwaEByDKJugquOBo7IyTIU0/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="550" height="405" name="chat" FlashVars="id=214626729" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.php" />';}

function fechar_xat(){ document.getElementById("botao_xat").innerHTML = '<img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioa8KHMXg4t9rg4L4riPD_Dfg2qDAXqRm5p2YBEe4O7YJvhQr400TKAzkJLY0IUgqEzeZ3DAohyphenhyphenCpTANxRVISWwS0OuCa0aoStdXGPWMPr-NFsaNsLBvj32s1Bu5te-rXfWXkXzTL-wOY/s1600/abrir+xat.png" />';

}</script>

2º Passo: Em seguida, vá no painel de Edição do seu blog, clique na opção "layout" >> clique em "Adicionar um Gadget" >> adicione a opção "HTML/JavaScripts".

Depois cole o Código no HTML/JavaScripts

4º Passo: , Salve o novo Gadget e pronto, seu xat estará funcionando.

Então pessoal, é só isso, espero terem gostado.Queria que vocês deixassem comentário sobre o Gadget, e não esqueçam de segui nosso blog,  obrigado!