4 de fev de 2013

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('http://3.bp.blogspot.com/-DoyOLyILwIU/UPyRTCKbSoI/AAAAAAAABfg/aZJJZ6maoNk/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.









3 comentários:

  1. nossa achei lindo! a unica coisa foi que tive que colocar o codigo que vc passou acima da tag ]]> , pq substituir deu erro. fica lindoooooooooooooooooooo. obrigada. pode visuzlizar aqui no meu template de teste (meu novo layout). bjs Danny Toledo theabsteste.blogspot.com.br/ (teste) meu blog: theabs.com.br

    ResponderExcluir
  2. MUITO BOM
    so que no meu caso eu não encontrei a palavra body
    mais colei em baixo de head
    e deu certo do mesmo jeito - valeu e obrigado ^^

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube