بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته



اعزائي اعضاء وزوار شبكة ديفي نت التطويرية

اليوم جايب لكم كود عرض معلومات العضو بشكل منبثق جميل بدون تومبيلات



يمكنك الكود من عرض معلومات العضو بشكل جذاب عند الضغط على اسمه مباشرة


الان طبق التالي ^_^

الخطوة الاولى ..

لوحة الادارة + الاعضاء والمجموعات + الاعضاء + البيانات الشخصيه
بعدها نذهب الى تبويب خيارات عامه كما في الصوره




وضع نعم وسجل

اما الان نأتي للكود ونضعه في اكواد الجافا سكربت

 



بالنسبه للتبويبات بمكنك حذف اي تبويب ترغب فيه مثلا رسائل الزوار

تقوم بجعل قيمتها تساوي 0

من هذا الجزء الذي هو في بداية الكود الاول

الكود:

  var wall = 1, // visitor messages tab
  stats = 1, // statistics tab
  attachments = 0, // attachments tab
  friends = 1, // friends tab
  contact = 1, // contact tab
  rpg = 0, // RPG tab
  close = 1, // close popup button
  avatar = 1; // display user avatar

حيث var wall تمثل رسائل الزوار
و stats تمثل الاحصائيات
و attachments تمثل المرفقات
و friends تمثل الاصدقاء

و contact تمثل حقول الاتصال
و close اغلاق
و avater الصوره الشخصيه للعضو

 

وبعدها نذهب لورقة التصميم ونضع الكود التالي

الكود:

/* Profile popup */
#profcont-container {
    background:#EEE !important;
    border:1px solid #CCC !important;
}

#userAVA img{
    position:absolute;
    top:43px;
    right:30px;
    height:50px;
    width:50px;
}

.profile_popup_nav {
    background:#E0E0E0;
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    height:auto;
    border-bottom:1px solid #CCC;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;
}

.propop_tab {
    color:#888;
    text-shadow:1px 1px 0 #F5F5F5;
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
      -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #CCC;
    border-bottom:none;
    -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
      -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
            box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
    background:#DDD;
    margin:0 2px;
    padding:3px;
}

.propop_tab:hover {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none;
    background-color:#EEE;
}

.propop_tab.activeTab {
    position:relative;
    top:1px;
    color:#666;
    text-shadow:none !important;
    background-color:#EEE !important;
}

#profileLinks {
    background:#E0E0E0;
    display:block;
    padding:3px;
    margin:10px -4px -4px -4px;
    border-top:1px solid #CCC;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;
}

وهكذا تمام عليكم الكود تحياتي لكم جميعا

ملاحظة :- الكود من تعريبي واضفت عليه بعض التعديلات

فارجو عدم النقل ابدا بذكر او بعدم ذكر المصدر

الان اترككم بحفظ الله ورعايته