(JAVASCRIPT) كود اظهار علبة الدردشه بشكل جميل***MoHaMeD NsR

(JAVASCRIPT) كود اظهار علبة الدردشه بشكل جميل***MoHaMeD NsR

 من طرف Mohamed الأربعاء 10 سبتمبر 2014 - 4:16

بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي 
اقدم اليكم اليوم كود اظهار علبة الدردشه بشكل جميل واظهارها في جميع صفحات المنتدى

---

اولا صوره للكود:

---

ثانيا طريقة وضع الكود:
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
أضف الكود الى : جميع الصفحات
كود Javascript * :

الكود:


//Inicio variables a editar por el usuario
var imagen_chatbox_desplegable = "http://i45.servimg.com/u/f45/17/45/19/77/chat10.png";
var posicion_chatbox_desplegable = "derecha"; //Admite también 'izquierda'
//Fin variables a editar por el usuario

document.write("<div id=\"chatbox_ret_cont\" class=\"chatbox_" + posicion_chatbox_desplegable + "\">");
document.write("    <div onclick=\"(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); jQuery('#chatbox_ret').toggle('normal');\">");
document.write("        <span id=\"chatbox_ret_online\">");
document.write("            <img title=\"Abrir o cerrar el Chat\" src=\"" + imagen_chatbox_desplegable + "\">");
document.write("        <\/span>");
document.write("        <span id=\"chatbox_ret_offline\"><\/span>");
document.write("    <\/div>");
document.write("    <iframe src=\"\/chatbox\" id=\"chatbox_ret\" name=\"chatbox_ret\" ");
document.write("     scrolling=\"no\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"1px\"");
document.write("     onload=\"if(cb_new){cb_start();cb_new=0;}\">");
document.write("    <\/iframe>");
document.write("<\/div>");

ملحوظه:يمكن تغيير الصوره التي يضغط عليها لاظهار علبة الدردشه من خلال الرابط التالي الموجود في الكود
https://i.servimg.com/u/f45/17/45/19/77/chat10.png

ثم نتوجه الى
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>ورقة تصميم ال css
وضع الكود التالي:

الكود:


#chatbox_ret_cont{
   z-index: 10000;
   background-color: transparent;
   position: fixed;
   bottom: 0;
}
#chatbox_ret_cont.chatbox_derecha{
   right: 0;
}
#chatbox_ret_cont.chatbox_izquierda{
   left: 0;
}
#chatbox_ret_cont div{
   cursor: pointer;
}
#chatbox_ret_cont iframe#chatbox_ret{
   background-color: white;
   border: 2px solid grey;
   display: none;
   height: 450px;
   margin-bottom: 0;
   width: 900px;
}

---

منقول للافادة وتم التعديل والترجمة من قبلي
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة

 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
 لا يتم المساعدة على الخاص!