اخفاء صندوق الدردشة

.ادخل على لوحة التحكم > ثم التخطيط >اضافة اداة > HTML/javascript
 للتوضح اكثر هنا
ثم انسخ الكود الذي بالأسفل  

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('رابط الصوره') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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.right = 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="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

التي باللون الأزرق نغير الطول و العرض
التي باللون الأحمر نغير رابط الصوره بالصوره التي تعجبنا
التي باللون الأخضر نضع بها الكود الذي تكلمنا عنه بهذا الموضوع هنا

هنا روابط الصور

  http://i.imgur.com/OUTeg.png

  http://i.imgur.com/IDCVW.png

  http://i.imgur.com/jrMSv.png

  http://i.imgur.com/jVMmK.png

          http://i.imgur.com/fIquP.png

ولو تريد ان تضاف خلفيه للشات و اخفء صندوق الدردشه معاً
 اذهب الى بلوجر ثم تخطيط
ثم اضافة اداة html/javascript
و ضع هذا الكود

<style type='text/css'>     a.linkopacity img {     filter:alpha(opacity=50);     -moz-opacity: 0.5;F     opacity: 0.5;     -khtml-opacity: 0.5;}     a.linkopacity:hover img {     filter:alpha(opacity=100);     -moz-opacity: 1.0;     opacity: 1.0;     -khtml-opacity: 1.0; }     </style>     <div style='display:scroll; position:fixed; top:50px;right:-0px;'>     <a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="120" height="150"src="رابط زر الاخفاء" alt="PUSH" title="shout here!"/></a>     </div>
<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:50px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:px solid ; background:url()  repeat-x bottom center scroll ; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url() no-repeat;"> <div style="background:url(رابط الخلفيه تجدوه بالأسفل) no-repeat;padding-right:25px;padding-left:10px;padding-top:100px;padding-bottom:40px;">
كود الشات هنا
</div> </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;"> <span ></span></div></a></a></div> </div></div>
<script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script>

وبد التي باللون الاحمر بروابط الصور وكود الشات 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXviRwoOxQSqK73iF3aI9JRU21OhbUC1IYKh4pFgSwv2eI2zVmGQzjRw-GZofoPc2Yx0k6mkMlSP_22sKzkQh8YkI2xATOVvH-oTvmnVbWFqYNukRUkvrrNsHhTD_BfAEpA6H9aZO8QAt/s1600/cboxqs7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RYZpOoS49J8jb8nKXhdFxqVtWe7cMXW26TDD4MbtZCMs4khagGTS8fiJyQWcZ_s_bOo9yHPXXJ08zPgQRO4ArDE7n3RWd5n3teZSYgNGOm2qpDXQh24B-4GLedpSzUgOpyVp8hKxAxzm/s1600/cb1tn8.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhWWQKXBCcXXfvpMOa0xEnlZCaZIR-3sXzwDwmRG4trpQ6xcWfA8Y8hUfBYmc6t4Q6lv6A-A1d4AUPHPE6Mv4S-Vwa-h6td2KLh_-Bq8xEGvYsKN9XLhWNuZrgCUsHXmgHke9AGdBmCzG/s1600/stroberi.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEile4B4nmUIIrtSh1ODhxhbcgPXFCITuYQTQMEiBZaf75dxV7aMB1jlAWWe7M6otbAq0DlYMV9H12xIHHpd5zczw7d86roBOqZxVc0mk-x5qRc_4ngwUnWWBW6gVxp6SX-0a07vUqEmvzPc/s1600/4978679104666.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaI0Y67Yhjbu9T97CGtFi2omjgdyPA6fbrLMleG_9I9__M-lzzvtEEMWVmvYd9e8QZBmBxW9ZMi-a4Kt1X1NVjMKhZ-37Av17aoRWXdupaWZTjvqfcyK-O7DWjtXloQlnAhFQIfEtnoxjO/s1600/48f452f7be38d.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwZpCno-29OvaOSvCEtO2kLkBezR9mwW2h7h9VJWP50ImhTNDS1oOHIfdHnEASxyQ8uUC52-_uVsAQpphD10oq0UQLp69pZQ-1owMGqhEn9X0svmjIylAEJa3Rb1NWG8jsZRAm4RLax-vi/s1600/48f3f9aa4bef8.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsPPj4sMDueIatISLfgrA9VoMfQuRIczM3-RD4XPj5zYSNA5B7dfROopcHQ9fwoYRjm4ppTsPtwytXVmOfqKtQlt-Drfds2XumlAb9uHIFbn0EccwaSPr2XFtmv8aSFc3-zBsQfzeYJhT/s1600/48f419e550585.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHMYt9ahR0U96qwsE_3wBhRFY5GGLd69MEBOVj_0efqIBvuBq39Y3cYBOgPBiaxeWyNja6t-CpESFLgiTZtzemkwgcqP86UwwMBxNzH_4af_8cnslSp3C754ywMzSB9OS-GLKngiBisPi/s1600/1218455869.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKiBgGwNBLaWApcUAlhvqm35_cUIxj_OYKutii6Qa6QKZokfMQL4F1DnrtmXCLdDnZb4Jp62xJO-Da6Q2newK7CJI5KThL9onIlZLMWRkyeVK3gVyEz4SAo1ZVkx6Is_mOxV6zDnJpL6hO/s1600/497460d013b3b.gif

ثم حفظ