Como colocar botão abrir e fechar Xat (Chat) flutuante


Esse botão é um recurso bem útil para 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. O botão abrir Xat ficará posicionado na parte inferior direita da tela, e quando o botão é  clicado o Xat é executado automaticamente e exibido sobre a página do seu blog, ainda contando com a opção fechar Xat.


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

1º Passo: Copie o código 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/AVvXsEjtc42BAUc43nsvg3bYYUA9qQTN3GUS6Xqxzb1FiGJzqAu8DSJKLAX6B8egV_JnOpJW3o0P6AdWcJALUYLH2m_DQxq-Q9VlcCnX1ui22A13138lTyqLiAI25QZlzKGzbS7ne6OQcFbtKrQ/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/AVvXsEh_K3mERrM6kJay9jdKtsy2pD3nL2m_0PzwJVuqNxdvHky93zQiwQ6WWtSwz298JbcIGFePvejbfHZ88SdWSGfGKnKogT4ozSAi4mVyKjdn0RAGX_qqbbK_j9V5yD9v_9GgRObEIRFgwv4/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/AVvXsEh_K3mERrM6kJay9jdKtsy2pD3nL2m_0PzwJVuqNxdvHky93zQiwQ6WWtSwz298JbcIGFePvejbfHZ88SdWSGfGKnKogT4ozSAi4mVyKjdn0RAGX_qqbbK_j9V5yD9v_9GgRObEIRFgwv4/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=000000000" 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/AVvXsEjtc42BAUc43nsvg3bYYUA9qQTN3GUS6Xqxzb1FiGJzqAu8DSJKLAX6B8egV_JnOpJW3o0P6AdWcJALUYLH2m_DQxq-Q9VlcCnX1ui22A13138lTyqLiAI25QZlzKGzbS7ne6OQcFbtKrQ/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

3º Passo: Agora vamos editar o código. Veja que no código, eu destaquei uma pequena parte em cor Vermelhar: "000000000" essa parte significa o "Número ID" do Xat, sendo assim, você terá que substituir essa parte do código pelo o "ID" do seu Xat.


Obs.: Pra encontrar o Número ID do Xat é fácil. Esse fica presento no código do seu Xat.

4º Passo: Depois de editar o código, Salve o novo Gadget e pronto, seu xat estará funcionando.

Então pessoal, é só isso, espero terem gostado desse botão. Queria que vocês deixassem comentário sobre o Gadget, e não esqueçam de segui nosso blog, certo. obrigado!
Observe: Caso alguém deseja mudar a cor do botão abrir e fecha podem ficar a vontade, esse Gadget utiliza duas imagens, basta vocês criarem duas imagens com base nessas que estarei deixando logo abaixo, depois de prontas as imagens, hospede-as no blog e substitua o link das imagens antigas pelo que criaram:

Botão Abrir Xat:




Link da figura do botão: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtc42BAUc43nsvg3bYYUA9qQTN3GUS6Xqxzb1FiGJzqAu8DSJKLAX6B8egV_JnOpJW3o0P6AdWcJALUYLH2m_DQxq-Q9VlcCnX1ui22A13138lTyqLiAI25QZlzKGzbS7ne6OQcFbtKrQ/s1600/abrir+xat.png


Botão Fechar Xat:




Link da figura do botão: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K3mERrM6kJay9jdKtsy2pD3nL2m_0PzwJVuqNxdvHky93zQiwQ6WWtSwz298JbcIGFePvejbfHZ88SdWSGfGKnKogT4ozSAi4mVyKjdn0RAGX_qqbbK_j9V5yD9v_9GgRObEIRFgwv4/s1600/xat.png




Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...