14:16
15 de janeiro de 2012
Postado por: Hudson



Muitos sites gostam de utilizar o sistema de Chat da xat.com , mas todos sabem que é impossível colocar um GIF animado em seu fundo, porem a Design Fanmytsu te ensina um jeito de driblar isso.

O que iremos fazer é deixar o Chat transparente e colocar uma imagem de fundo nele em html e não no elemento em flash do Chat. O gif ficará atrás do chat e a transparencia irá fazer com que ele apareça e o fundo do seu chat fique animado, então vamos ao que interessa.

Primeiramente vamos deixar o chat transparente.

-Clique em Edit Your Chat, depois em Extra Features você irá a uma página de configurações, marque a opção Transparent background (No background image), clique em Update These Options la embaixo e seu chat estará transparente, se não tiver a opção de transparencia é porque seu chat não é um group e sim um simples chat box sem nome apenas um id.

Feito isso pegue o código de incorporação do chat no local indicado pela imagem abaixo

Abra o Bloco de notas, o um editor de textos de sua preferencia e cole este código.

<div id="chat" style="width: 450px; height: 350px; background: url(http://pokemonstation.co.cc/bg.gif) repeat center;">CÓDIGO DO CHAT</div>

Agora cole o código do seu chat transparente abaixo do código acima, lembrando que a largura e a altura devem ser iguais, então seu código ficará assim:

<div id="chat" style="width: 450px; height: 350px; background: url(http://pokemonstation.co.cc/bg.gif) repeat center;"><embed wmode="transparent" src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="450" height="350" name="chat" FlashVars="id=164475586&rl=- Cant" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /></div>

E não se esqueça de tirar a parte debaixo em html do Chat que tem aqueles links mais ou menos assim: Get a Chat Box.

Pronto ao fim seu xat ficará assim:


































agora é só fazer sua própria gif e mostrar para os seus visitantes o seu Chat
animado.

Até o próximo tutorial.
0 comentários: