8 de agosto de 2012

50

Como colocar Xat flutuante fixo com botão na lateral do Blog



Aqui vai um código é bem legal, ele deixa o seu xat com efeito deslisante e com o botão abrir e fechar XAT na lateral do Blog.
Clique na imagem para visualizar melhor

Aparecerá um botão na lateral do blog, então quando clica no botão XAT automaticamente o seu xate será aberto e ele aparecerá deslizando na lateral esquerda do blog, e o mesmo botão serve também para fixar o XAT. 

Então para colocar o XAT flutuante vamos adicionar o código no HTML do blog.
Se você não sabe onde é que fica o HTML vou mostrar:
Primeiro vá no painel do seu blog, em Modelo >> depois Editar HTML
                                                                                        Clique na imagem para visualizar melhor
Depois vai abrir uma nova janela, lá você vai clicar em Prosseguir, e logo abrirá a HTLM do seu blog.
Então você vai apertar Ctrl + F do seu teclado para pesquisar este Tag: ]]></b:skin>
E a cima de ]]></b:skin> você vai colocar esse código:

#gb  { position:fixed; top:150px; z-index:+1000; left:-610px; } * html #gb {  position:relative; } .gbtab { height:161px; width:47px; float:right;  cursor:pointer; background:url('http://i.imgur.com/WoBz0.png')  no-repeat; margin-top:20px; } .gbcontent { float:left; border:2px solid  #8c00c1; background:#fff; opacity:0.80; -moz-opacity: 0.80; filter:  alpha(opacity=80); -webkit-border-radius: 20px; border-radius: 20px;  -khtml-border-radius: 20px; padding:8px; }<br /> <br />

E agora procure por  </body> e acima dele cole este segundo código:

<script  type='text/javascript'> function showHideGB(){ var gb =  document.getElementById("gb"); 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("gb"); var dx =  Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0  + dx * dir; gb.style.left = x.toString() + "px";  if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script>  <div id='gb'><div class='gbtab'  onclick='showHideGB()'></div><div  class='gbcontent'><div  style='line-height:0;background-position:center;width:590px;height:310px;'><embed  align='middle' allowscriptaccess='sameDomain' flashvars='id=171627818'  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>


Neste segundo código Altere o ID id=171627818  pelo o do seu XAT.
OBSERVE:o id fica no código do seu XAT.

E por final clique em Visualizar e veja se tudo ocorreu certo e depois Salve o modelo.


50 comentários:

  1. valeu amigão eu estava a proucora disso ao tempão
    segue la o meu blog
    link = http://tudoparafacebook2012.blogspot.com.br/

    ResponderExcluir
  2. Muito Obg!
    Ei você poderia dar mais alguma dicas, como eu deixo eu na parte de baixo em vez da do lado?

    http://aeriumplay.com

    ResponderExcluir
  3. Olá em primeiro lugar eu quero parabenizar a vc pelo seu blog, graças a vc eu consegui personalizar o meu blog com as suas dicas parabéns ! Eu quero lhe perguntar algo se vc puder responder ? eu coloquei o xat flutuante no meu blog, que ficou bem legal, só que o meu blog as cores dele é marrom e rosa, no caso onde clica para abrir o xat está escrito em roxo, teria como mudar a cor para rosa ? desde já obrigada .

    ResponderExcluir
    Respostas
    1. Olá, Estava com o mesmo problema Mas com alguns conhecimentos básicos de Web designer e Html consegui, posso lhe ajudar dessa forma :

      1º Clique com o botão direito na fotinho que abre o xat, depois em "Inspecionar elemento"
      2º Na janela equena do Lado Direito Ache Algo Parecido com isso "http://i.imgur.com/WoBz0.png"
      3º Hospede uma Imagem nesse Site www.imageshack.com (é muito simles da até com o facebook)
      4º Coie o Link da Imagem que voce hospedou e Cole No Lugar daquele "http://i.imgur.com/WoBz0.png"

      Pronto, Mais Informações : http://www.youtube.com/watch?v=v-46uZdKQM8

      Atenciosamente Equipe DowmBown

      Excluir
  4. muiiiiito obg msm entrem ae www.transformicepiratiado.blogspot.com.br

    ResponderExcluir
  5. Respostas
    1. é muito Fácil!!
      o ID do seu Xat está no código que você utiliza pra colocar o Xat no blog...
      o Id é uma numeração com "Nove Número" Exemplo: 188064924

      Excluir
    2. Valeu! consegui! só que o blog ficou mas lento com o xat. Tem como deixar com formato mais leve?

      Excluir
    3. na verdade eu não tenho essa resposta, pra deixar o Xat mais leve no seu blog...
      mais eu acho que não tem como, apesar que o Xat já é pesado pra carregar no blog.

      Excluir
  6. oba olha o chat ficou no canto esquerdo ,como fasso para ele flutuar ???

    ResponderExcluir
    Respostas
    1. e aí DJ cordeiro!
      Sim o Xat ficará posicionado na lateral esquerda do blog, irá aparecer um botão com o nome "XAT" você irá clicar nesse botão, e ao clicar o Xat abrirá deslizando como se estivesse flutuando... Valeu

      Excluir
  7. não deu certo,o xat ficou no canto esquerso do blog,e o botão não apareceo

    ResponderExcluir
  8. vlwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww por me ajuda entrem http://jorrandodownloads.blogspot.com

    ResponderExcluir
  9. como muda aquela borda roxa do chat responde ai pf

    ResponderExcluir
  10. Olá Kelven no meu n deu certo pq eu coloquei tudo direitinho.

    ResponderExcluir
  11. Só funciona com BLOGGER???
    não tem como eu colocar no meu site da minha web rádio??
    djrodrigo.15@hotmail.com

    ResponderExcluir
    Respostas
    1. Tem sim ...Mas voce devera esquisar no google de outra maneira ois isso ira alterar o Html....!
      Atenciosamente Dowm Bown

      Excluir
    2. Tem sim ...Mas voce devera esquisar no google de outra maneira ois isso ira alterar o Html....!
      Atenciosamente Dowm Bown

      Excluir
  12. Pegou, mais o meu xat fico transparente :( como faço prá arrumar isso ????? alguém me ajuda pfv.

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. KRONOS BASTA MEXER NA OPACIDADE (FAÇA UM BACKUP ANTES OK)

      Excluir
    3. oi poso te ajuda no próprio código trem escrito 'transparent ai você tira esse nome que ta ai e poen no

      Excluir
  13. ola coloquei no meu blog pcogames.blogspot.com porem porem ta grande de mais tem como muda o tamanho ?

    ResponderExcluir
    Respostas
    1. Eu tirei Do blog Motivo:quase ninguém entrava mais nele dexei o tradicional mesmo XD

      Excluir
  14. muiiito bom cara, valeu mesmo em ! XD já favoritei seu blog

    ResponderExcluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir
  16. muito bom essa postagen já coloquei no meu
    blog visiteo! para ser meu(a) parceiro(a)

    http://herykwilliam.blogspot.com.br/

    ResponderExcluir
  17. amigo eu coloquei mais eu nao fico adm no blog fica verde com uma estrela preta mais nao fica amarelo por q ?

    ResponderExcluir
  18. OI, pffff, como fasso para colocar uma imagem, tipo regras do xat em baixo do xat?
    PFFFFF
    Responde em blogsmeh@gmail.com

    ResponderExcluir
  19. valeu msm bom tutorial mano
    segue meu site ai
    http://www.baixandotorrentgratis.com

    ResponderExcluir
  20. CARA ME AJUDA AI EU FIZ ALGUMAS MUDANÇAS AQUI NA MINHA RADIO E TOCO COM DIFICULDADE NO BOTÃO DO XAT POIS ELE COMEÇA DIREITINHO DEPOIS QUANDO VC CLICA EM VOLTA O BOTÃO QUASE SOME E TEM COMO TIRA ESSA OPACIDADE RESPONDE AI MEU FACEBOOK.COM/FABIOKAUA

    ResponderExcluir
  21. CARA ME AJUDA AI EU FIZ ALGUMAS MUDANÇAS AQUI NA MINHA RADIO E TOCO COM DIFICULDADE NO BOTÃO DO XAT POIS ELE COMEÇA DIREITINHO DEPOIS QUANDO VC CLICA EM VOLTA O BOTÃO QUASE SOME E TEM COMO TIRA ESSA OPACIDADE RESPONDE AI MEU FACEBOOK.COM/FABIOKAUA

    ResponderExcluir
  22. pessoal achei um jeito de vocês muda a cor da borda esta aqui faça o seguinte segure contro+f e copia e cola isso #8c00c1 a cor roxa mude para qual quer uma se tive duvida vai la no minha radio www.radionyx.blogspot.com.br

    ResponderExcluir
  23. http://webradiosupernatural.blogspot.com.br/
    Meu site.
    E valeu pelos tutoriais são muitos uteis.
    ^_^

    ResponderExcluir
  24. FICOU SHOW CARA VLW
    http://tendtudo190.blogspot.com.br/

    ResponderExcluir
  25. Muito bom essa dica, estava a procura!!
    http://noscaminhosdopai.blogspot.com.br

    ResponderExcluir
  26. Este comentário foi removido pelo autor.

    ResponderExcluir
  27. ola to com um problema no meu xat, ele ta certinho no lado esquerdo do meu blog mais o problema é que nao ta aparecendo o nome do xat (a imagem que abre o xat ) min ajuda pf ja troquei a imagem pra outra e nada min ajuda pf da uma olhada http://gaming-pop.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Cleydson!
      Eu acessei seu Blog, e a "imagem que abre o Xat" está aparecendo normalmente...

      Excluir
  28. Olá eu gostaria de colocar o código somente para uma pagina do meu blog e não todo o blogo como faço?

    ResponderExcluir
  29. Este comentário foi removido pelo autor.

    ResponderExcluir
  30. Este comentário foi removido pelo autor.

    ResponderExcluir
  31. Coloquei o chat no meu blog, e mudei o id, só que não dá pra escrever nd, dá pra clicar nos botões como ''get xat box''.. e afins, mais não dá pra escrever mensagens nem clicar nos emoticons, pode me ajudar pvf, obg.

    ResponderExcluir
  32. isso é coisa linda de Deus rsrs obrigado ajudou muitoooooooo

    ResponderExcluir

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: Varias dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook
Related Posts Plugin for WordPress, Blogger...