Como Colocar Xat na Lateral do Blog

XAT NO LADO ESQUERDO DO SITE
1° Passo - Cole o código abaixo antes de </footer> (Mude o ID para o ID do seu xat)

<div id='castiel'>
<div class='castieltab' onclick='showHideCASTIEL()'>
</div>
<div class='castielcontent'>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div style='line-height:0;background-position:center;width:590px;height:310px;'>
<embed FlashVars='id=220071292' align='middle' allowScriptAccess='sameDomain' height='405' name='chat' pluginspage='https://xat.com/update_flash.php' quality='high' src='https://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='590' wmode='transparent'/>
</div>
  </div>
  </div>

2° Passo - Cole o código abaixo antes de ]]></b:skin> (Se quiser edite as imagens)

/* Xat Lateral
----------------------------------------------- */
#castiel{
position:fixed;
top:95px;
z-index:+1000;
left:-610px;
}
* html #castiel{position:relative;}
.castieltab{
height:275px;
width:50px;
float:right;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLwY8dtN1yJym5_UQsNTaQY03wQ2_brFe2a1DYSi7CSHBxXs1wAq88lA60jzpBF8CQ7vyzQb7GryeE4__Sk6ncv15NeAiUFcb_kWop47ovphWYeaHBJcbj99EGNkodzeSl0ENTxnnhbST/s1600/XAT.png') no-repeat;
}
.castielcontent{
float:right;
border:1px solid #8f11ae
;
background: url(https://4.bp.blogspot.com/-RE_Cu77ktbM/W93Rweb9H1I/AAAAAAAABsA/g6mZq6BG-hULLdLWHhE-gaeu2jVnoDHlQCLcBGAs/s1600/fundoxat.png) repeat;
height:405px;
width:590px;
padding:10px;
}

3° Passo - Cole o código abaixo antes de </body>

<script type='text/javascript'>
function showHideCASTIEL(){
var castiel = document.getElementById(&quot;castiel&quot;);
var w = castiel.offsetWidth;
castiel.opened ? moveCASTIEL(0, 30-w) : moveCASTIEL(20-w, 0);
castiel.opened = !castiel.opened;
}
function moveCASTIEL(x0, xf){
var castiel = document.getElementById(&quot;castiel&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
castiel.style.left = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveCASTIEL(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

XAT NO LADO DIREITO DO SITE

1° Passo - Cole o código abaixo antes de </footer> (Mude o ID para o ID do seu xat)

<div id='castiel'>
<div class='castieltab' onclick='showHideCASTIEL()'>
</div>
<div class='castielcontent'>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div style='line-height:0;background-position:center;width:590px;height:310px;'>
<embed FlashVars='id=220071292' align='middle' allowScriptAccess='sameDomain' height='405' name='chat' pluginspage='https://xat.com/update_flash.php' quality='high' src='https://www.xatech.com/web_gear/chat/chat.swf' type='application/x-shockwave-flash' width='540' wmode='transparent'/>
</div>
  </div>
  </div>

2° Passo - Cole o código abaixo antes de ]]></b:skin> (Se quiser edite as imagens)

/* Xat Lateral
----------------------------------------------- */
#castiel{
position:fixed;
top:95px;
z-index:+1000;
right:-610px;
}
* html #castiel{position:relative;}
.castieltab{
height:275px;
width:40px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_1C9XitgVbW_CTMfRJYuE0jEEEYwr9aW0hDxLKQ3e6HrRGNjJWtpFCYv7CqQFFqIqBjShuDr7h1PlVzP-zNS99A-p_yDXtS_iKyTH73BXZT2LYkvQGogZisRqU_V0Rx2HQYk73f96AE/s1600/xat.png') no-repeat;
}
.castielcontent{
float:left;
border:1px solid #8f11ae
;
background: url(http://3.bp.blogspot.com/-ufNXa5wFA4A/T1tkO70NbxI/AAAAAAAACxQ/AdyMV75QtT4/s1600/fundo+xat.png)repeat;
padding:10px;
}

3° Passo - Cole o código abaixo antes de </body>

<script type='text/javascript'>
function showHideCASTIEL(){
var castiel = document.getElementById(&quot;castiel&quot;);
var w = castiel.offsetWidth;
castiel.opened ? moveCASTIEL(0, 30-w) : moveCASTIEL(20-w, 0);
castiel.opened = !castiel.opened;
}
function moveCASTIEL(x0, xf){
var castiel = document.getElementById(&quot;castiel&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
castiel.style.right = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveCASTIEL(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

Tutorial por: GCriation