6 de janeiro de 2014

2

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...





Veja uma DEMONSTRAÇÃO

Sobre o Botão abrir Xat, ele 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.

Botão abrir e fechar Xat para 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="http://2.bp.blogspot.com/-bGdROfYZ78I/Uss6xH76VjI/AAAAAAAAEks/32e00pd_Edk/s1600/abrir+xat.png" /></div>
<script type="text/javascript">
function abrir_xat(){

document.getElementById("botao_xat").innerHTML = '<img src="http://3.bp.blogspot.com/-IygNCfUjy3k/Uss6xDrxRKI/AAAAAAAAEko/mxzZDsKecEk/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br>';

document.getElementById("botao_xat").innerHTML = '<img src="http://3.bp.blogspot.com/-IygNCfUjy3k/Uss6xDrxRKI/AAAAAAAAEko/mxzZDsKecEk/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="http://2.bp.blogspot.com/-bGdROfYZ78I/Uss6xH76VjI/AAAAAAAAEks/32e00pd_Edk/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:
http://2.bp.blogspot.com/-bGdROfYZ78I/Uss6xH76VjI/AAAAAAAAEks/32e00pd_Edk/s1600/abrir+xat.png

Botão Fechar Xat:
http://3.bp.blogspot.com/-IygNCfUjy3k/Uss6xDrxRKI/AAAAAAAAEko/mxzZDsKecEk/s1600/xat.png






2 comentários:

  1. man coloquei mais no meu login fica dando esse erro Press Sign In to start chatting. to be signed in automatically go to the profile page and select [Sign me in automatically].

    ResponderExcluir
    Respostas
    1. Olá Patricio!
      Bom, acabei de fazer um outro teste nesse código e está funcionando corretamente, não me apresentou erro.
      Observe se você fez alguma alteração errada no código. Altere só o ID do Xat conforme mostrado no tutorial e com atenção.
      Veja no meu outro blog de teste, uma demonstração:
      http://blogparateste0003.blogspot.com.br/
      obrigado!
      tenta fazer isso novamente, e deixa comentário informando se conseguiu ou não.

      Excluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook