لوحة تحكم وتسجيل الدخول اكثر من رائعة تطويرأوراس باتنة النسخة النهائية ثابت ومتحرك

اولا وقبل ان تقرر الادارة سواء بالقبول او الرفض ارجو من الادارة الكريمة استخدام هذا الكود

الرمز:
.code {
max-height:200px;
overflow:auto;
direction:ltr;
display:block;
}

وده عشان الاكواد فى المواضيع ماتخدش حيز كبير يوضع فى الcss

نيجى للموضوع

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

تكبير الصورة معاينة الأبعاد الأصلية.

وللمعاينة الحية الشريط موجود فى المنتدى بالاعلى

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

اولا هذا الكود تجعل صلاحيته للزوار فقط اسم العنصر لوحة التحكم المطورة زائر
الاصدار الثابت

الرمز:

<link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <style>
   #login {
   overflow: visible;
   height: auto;
   -webkit-transition: margin-top 0.5s ease-in-out 0s;
   -moz-transition: margin-top 0.5s ease-in-out 0s;
   -o-transition: margin-top 0.5s ease-in-out 0s;
   transition: margin-top 0.5s ease-in-out 0s;

}

/* Login Panel I */
   #topp {
   height: 38px;
   position: relative;
   }

#topp ul.login {
   display: blue;
   position: relative;
   float: right;
   clear: right;
   height: 38px;
   width: auto;
   font-weight: bold;
   line-height: 38px;
   margin: 0;
   right: 150px;
   color: white;
   font-size: 100%;
   text-align: center;
   padding-right: 45px;
   }

#topp ul.login li.left {
   height: 38px;
   width: 45px;
   padding: 0;
   margin: 0;
   display: blue;
   float: left;
   }

#topp ul.login li {
   text-align: left;
   padding: 0 6px;
   display: blue;
   float: left;
   height: 38px;
   }
   #topp ul.login li a {color: #9CCCFF;}
   #topp ul.login li a:hover {color: white;}

/* Login Panel */
   #topp {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#topp ul.login {
   background: url(https://2img.net/r/ihimizer/img18/3017/loginrw.png) no-repeat right 0;}

#topp ul.login li.left {
   background: url(https://2img.net/r/ihimizer/img41/3439/loginlc.png) no-repeat left 0;}

#topp ul.login li {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
   /* toggle effect - show/hide login*/
   #login {
   background: #1E1E1E;}

#login .loginContent input:focus.field {
   background: #1E1E1E;}

#login .loginContent{padding-top:0px;width:790px;height:120px;}

#login .loginContent input.button_login {

background: transparent
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)
   no-repeat 0 0;}

#login .loginClose a {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

#login .loginClose a:hover {

background:
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)
   no-repeat right -20px;}
   </style>

<div _moz_abspos="white" id="loginn" style="display:
   block;position: absolute;left: 0px;top: 0px;width: 100%;">

<div id="login" style="margin-top: -125px;">

<div class="loginContent">

<table style="width:100%;" border="0">

<tbody>
<tr>

<td style="text-align:center;">

<table _moz_resizing="true" border="0">

<tbody>
<tr>

<td>
<script>
   jQuery(document).ready(function(){
   jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
   link = jQuery('.panel dl:first img', data).attr('src');
   if(link){
   jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
   }else{
   jQuery('#avatar').html('');
   }
   });
   });

</script>
<div id="avatar">

<center>
<img src="https://2img.net/h/oi53.tinypic.com/1e1fex.gif" />
</center>

</div>

</td>

<td style="color: rgb(102, 0, 0);">

<form method="post" name="form_login" action="/login.forum">

<table _moz_resizing="true" style="PADDING-LEFT: 20px" border="0" cellpadding="0" cellspacing="3">

<tbody>
<tr>

<td>
<span class="genmed"><img src="https://i.servimg.com/u/f65/13/95/29/87/56x76311.gif" /> </span>
</td>

<td>
<input id="Post" value="اسم العضو" size="10" name="username" type="text" />
</td>

<td>
<input checked="" name="autologin" type="checkbox" /><span style="color: rgb(238, 238, 238); font-weight: bold;" span="" lang="ar-sa"> حفظ البيانات؟ <a href="../register?agreed=true&step=2">التسجيل الان</a></span>
</td>

</tr>

<tr>

<td>
<span class="genmed"><img src="https://i.servimg.com/u/f65/13/95/29/87/a3d76410.gif" /> </span>
</td>

<td>
<input id="Post" value="كلمة السر" size="10" name="password" type="password" />
</td>

<td>
<input class="mainoption" tabindex="104" value="تسجيل الدخول" name="login" type="submit" />
</td>

</tr>

</tbody>
</table>

</form><span style="font-size: 1.2em;"><span style="font-size: 18px; color: rgb(0, 255, 255);"><span style="font-weight: bold;"></span></span><span style="font-weight: bold;"><span style="color: rgb(0, 255, 255);"><br /></span></span></span>
</td>

</tr>

</tbody>
</table>

</td>

<td style="text-align:center;">
<span style="font-size: 1.2em; color: rgb(0, 255, 255);"><strong>للتمتع بكامل خصائص الموقع<br />عليك بتسجيل الدخول</strong></span><span style="font-size: 1.2em;"><a style="color: rgb(102, 0, 0);" href="../profile.forum?mode=editprofile&page_profil=avatars"></a></span><br />
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong></strong><br /> </span>
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong></strong></span><span style="font-size: 1.2em;"><br /> </span>
</td>

</tr>

</tbody>
</table>

</div>

</div>


<div id="container">

<div style="color: rgb(0, 255, 255);" id="topp">


<ul class="login">

<li class="left">

</li>

<li>
<a id="toggleLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?
   '-125px' : '0px');">تسجيل الدخول مايكل سوفت</a>
</li>

</ul>


</div>


<div class="clearfix">

</div>

</div>

<p>

</p>
</div>

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

<link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <style>
   #login {
   overflow: visible;
   height: auto;
   -webkit-transition: margin-top 0.5s ease-in-out 0s;
   -moz-transition: margin-top 0.5s ease-in-out 0s;
   -o-transition: margin-top 0.5s ease-in-out 0s;
   transition: margin-top 0.5s ease-in-out 0s;

}

/* Login Panel I */
   #topp {
   height: 38px;
   position: relative;
   }

#topp ul.login {
   display: blue;
   position: relative;
   float: right;
   clear: right;
   height: 38px;
   width: auto;
   font-weight: bold;
   line-height: 38px;
   margin: 0;
   right: 150px;
   color: white;
   font-size: 100%;
   text-align: center;
   padding-right: 45px;
   }

#topp ul.login li.left {
   height: 38px;
   width: 45px;
   padding: 0;
   margin: 0;
   display: blue;
   float: left;
   }

#topp ul.login li {
   text-align: left;
   padding: 0 6px;
   display: blue;
   float: left;
   height: 38px;
   }
   #topp ul.login li a {color: #9CCCFF;}
   #topp ul.login li a:hover {color: white;}

/* Login Panel */
   #topp {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#topp ul.login {
   background: url(https://2img.net/r/ihimizer/img18/3017/loginrw.png) no-repeat right 0;}

#topp ul.login li.left {
   background: url(https://2img.net/r/ihimizer/img41/3439/loginlc.png) no-repeat left 0;}

#topp ul.login li {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
   /* toggle effect - show/hide login*/
   #login {
   background: #1E1E1E;}

#login .loginContent input:focus.field {
   background: #1E1E1E;}

#login .loginContent{padding-top:0px;width:790px;height:120px;}

#login .loginContent input.button_login {

background: transparent
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)
   no-repeat 0 0;}

#login .loginClose a {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

#login .loginClose a:hover {

background:
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)
   no-repeat right -20px;}
   </style>

<div _moz_abspos="white" id="loginn" style="display:
   block;position: absolute;left: 0px;top: 0px;width: 100%;">

<div id="login" style="margin-top: -125px;">

<div class="loginContent">

<table _moz_resizing="true" style="width:100%;" border="0">

<tbody>
<tr>

<td style="text-align:center;">

<table _moz_resizing="true" border="0">

<tbody>
<tr>

<td>
<script>
   jQuery(document).ready(function(){
   jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
   link = jQuery('.panel dl:first img', data).attr('src');
   if(link){
   jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
   }else{
   jQuery('#avatar').html('');
   }
   });
   });

</script>
<div id="avatar">

<center>
<img src="https://2img.net/h/oi53.tinypic.com/1e1fex.gif" />
</center>

</div>

</td>

<td style="color: rgb(102, 0, 0);">
<span style="font-size: 1.2em;"> <span style="font-size: 13px;"><span style="font-size: 18px; color: rgb(0, 255, 255);"><span style="font-weight: bold;">اهلا وسهلا بك</span><br /></span><br style="color: rgb(0, 255, 255);" /></span><span style="font-size: 13px;"><span style="font-weight: bold; color: rgb(0, 255, 255);">لديك</span><strong style="color: rgb(0, 255, 255);">:</strong><span style="color: rgb(0, 255, 255);">55<span style="font-weight: bold;"></span></span></span><span style="font-weight: bold;"><span style="color: rgb(0, 255, 255);"><span style="font-size: 13px;">مشاركة<br />تاريخ اخر زيارة هو: : شكرا لعودتك <br /><a href="http://micsoft.logu2.com/login?logout">تسجيل الخروج</a></span><br /></span></span></span>
</td>

</tr>

</tbody>
</table>

</td>

<td style="text-align:center;">
<span style="font-size: 1.2em; color: rgb(0, 255, 255);"><strong>التحكم السريع:</strong></span><span style="font-size: 1.2em;"><strong style="color: rgb(0, 255, 255);"><br /></strong><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=informations">بياناتى الشخصية</a><span style="color: rgb(0, 255, 255);"> </span><br style="color: rgb(0, 255, 255);" /><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=preferences">التحكم بالمفضلات</a><br style="color: rgb(0, 255, 255);" /><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(0, 255, 255);" href="../profile.forum?mode=editprofile&page_profil=signature">التوقيع</a><br style="color: rgb(0, 255, 255);" /><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(102, 0, 0);" href="../profile.forum?mode=editprofile&page_profil=avatars"><span style="color: rgb(0, 255, 255);">الصورة الشخصية</span></a> </span>
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong>بيانات خاصة عن:<br /></strong> <a href="../profile.forum?mode=editprofile&page_profil=friendsfoes">اصدقائى واعدائى</a> <br /><a href="../search.forum?search_id=watchsearch">المواضيع المراقبة</a> <br /><a href="../search.forum?search_id=draftsearch">النصوص التجريبية</a> <br /><a href="../search.forum?search_id=favouritesearch">مفضلاتى</a> <br /><a href="../rpg_sheet_edit.forum">ورقتى الشخصية</a> </span>
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong>البحث الفورى عن:</strong></span><span style="font-size: 1.2em;"><br /> <a href="../msg.forum?folder=inbox">الرسائل الخاصة</a> <br /><a href="../search?search_id=activetopics"> أفضل المواضيع لهذا اليوم</a> <br /><a href="../search.forum?search_id=egosearch">اعرض جميع مواضيعى</a><br /> <a href="../search.forum?search_author=Victor&show_results=posts">استعراض المواضيع الجديده</a> <br /><a href="../search?search_id=unanswered">المواضيع التى ليس بها رد</a> </span>
</td>

</tr>

</tbody>
</table>

</div>

</div>


<div id="container">

<div style="color: rgb(0, 255, 255);" id="topp">


<ul class="login">

<li class="left">

</li>

<li>
<a id="toggleLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?
   '-125px' : '0px');">لوحتى الخاصة مايكل سوفت</a>
</li>

</ul>


</div>


<div class="clearfix">

</div>

</div>

<p>

</p>
</div>

<table style="width: 100%;" class="tborder" border="0" cellpadding="6" cellspacing="1" align="center">

</table>

واخيرا وده حسب اختيارك اسم العنصر لوحة التحكم المطورة مدير لا تنشطة ابضا للاعضاء او المشرفين الكود به رابطة لوحة الادارة الخاصة بموقعك
الاصدار الثابت

الرمز:

<link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <style>
   #login {
   overflow: visible;
   height: auto;
   -webkit-transition: margin-top 0.5s ease-in-out 0s;
   -moz-transition: margin-top 0.5s ease-in-out 0s;
   -o-transition: margin-top 0.5s ease-in-out 0s;
   transition: margin-top 0.5s ease-in-out 0s;

}

/* Login Panel I */
   #topp {
   height: 38px;
   position: relative;
   }

#topp ul.login {
   display: blue;
   position: relative;
   float: right;
   clear: right;
   height: 38px;
   width: auto;
   font-weight: bold;
   line-height: 38px;
   margin: 0;
   right: 150px;
   color: white;
   font-size: 100%;
   text-align: center;
   padding-right: 45px;
   }

#topp ul.login li.left {
   height: 38px;
   width: 45px;
   padding: 0;
   margin: 0;
   display: blue;
   float: left;
   }

#topp ul.login li {
   text-align: left;
   padding: 0 6px;
   display: blue;
   float: left;
   height: 38px;
   }
   #topp ul.login li a {color: #9CCCFF;}
   #topp ul.login li a:hover {color: white;}

/* Login Panel */
   #topp {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#topp ul.login {
   background: url(https://2img.net/r/ihimizer/img18/3017/loginrw.png) no-repeat right 0;}

#topp ul.login li.left {
   background: url(https://2img.net/r/ihimizer/img41/3439/loginlc.png) no-repeat left 0;}

#topp ul.login li {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
   /* toggle effect - show/hide login*/
   #login {
   background: #1E1E1E;}

#login .loginContent input:focus.field {
   background: #1E1E1E;}

#login .loginContent{padding-top:0px;width:790px;height:120px;}

#login .loginContent input.button_login {

background: transparent
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg)
   no-repeat 0 0;}

#login .loginClose a {
   background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

#login .loginClose a:hover {

background:
   url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg)
   no-repeat right -20px;}
   </style>

<div _moz_abspos="white" id="loginn" style="display:
   block;position: absolute;left: 0px;top: 0px;width: 100%;">

<div id="login" style="margin-top: -125px;">

<div class="loginContent">

<table _moz_resizing="true" style="width:100%;" border="0">

<tbody>
<tr>

<td style="text-align:center;">

<table _moz_resizing="true" border="0">

<tbody>
<tr>

<td>
<script>
   jQuery(document).ready(function(){
   jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
   link = jQuery('.panel dl:first img', data).attr('src');
   if(link){
   jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
   }else{
   jQuery('#avatar').html('');
   }
   });
   });

</script>
<div id="avatar">

<center>
<img src="https://2img.net/h/oi53.tinypic.com/1e1fex.gif" />
</center>

</div>

</td>

<td style="color: rgb(102, 0, 0);">
<span style="font-size: 1.2em;"> <span style="font-size: 13px;"><span style="font-size: 18px; color: rgb(0, 255, 255);"><span style="font-weight: bold;">اهلا وسهلا بك</span><br /></span><br style="color: rgb(0, 255, 255);" /></span><span style="font-size: 13px;"><span style="font-weight: bold; color: rgb(0, 255, 255);">لديك</span><strong style="color: rgb(0, 255, 255);">:</strong><span style="color: rgb(0, 255, 255);">55<span style="font-weight: bold;"></span></span></span><span style="font-weight: bold;"><span style="color: rgb(0, 255, 255);"><span style="font-size: 13px;">مشاركة<br />تاريخ اخر زيارة هو: : شكرا لعودتك <br /><a href="../login?logout">تسجيل الخروج</a></span><br /></span></span></span>
</td>

</tr>

</tbody>
</table>

</td>

<td style="text-align:center;">
<span style="font-size: 1.2em; color: rgb(0, 255, 255);"><strong>التحكم السريع:</strong></span><span style="font-size: 1.2em;"><strong style="color: rgb(0, 255, 255);"><br /></strong><span style="color: rgb(0, 255, 255);"> </span><a style="color: rgb(0, 255, 255); font-weight: bold;" href="../profile.forum?mode=editprofile&page_profil=informations">بياناتى الشخصية</a><span style="color: rgb(0, 255, 255); font-weight: bold;"> </span><br style="color: rgb(0, 255, 255); font-weight: bold;" /><a style="color: rgb(0, 255, 255); font-weight: bold;" href="../profile.forum?mode=editprofile&page_profil=preferences">التحكم بالمفضلات</a><br style="color: rgb(0, 255, 255); font-weight: bold;" /><span style="color: rgb(0, 255, 255); font-weight: bold;"> </span><a style="color: rgb(0, 255, 255); font-weight: bold;" href="../profile.forum?mode=editprofile&page_profil=signature">التوقيع</a><br style="color: rgb(0, 255, 255); font-weight: bold;" /><span style="color: rgb(0, 255, 255); font-weight: bold;"> </span><a style="color: rgb(102, 0, 0); font-weight: bold;" href="../profile.forum?mode=editprofile&page_profil=avatars"><span style="color: rgb(0, 255, 255);">الصورة الشخصية</span></a><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../admin/index.forum">لوحة الادارة</a><br /> </span>
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong>بيانات خاصة عن:<br /></strong> <a style="font-weight: bold;" href="../profile.forum?mode=editprofile&page_profil=friendsfoes">اصدقائى واعدائى</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search.forum?search_id=watchsearch">المواضيع المراقبة</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search.forum?search_id=draftsearch">النصوص التجريبية</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search.forum?search_id=favouritesearch">مفضلاتى</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../rpg_sheet_edit.forum">ورقتى الشخصية</a> </span>
</td>

<td style="text-align: center; color: rgb(0, 255, 255);">
<span style="font-size: 1.2em;"><strong>البحث الفورى عن:</strong></span><span style="font-size: 1.2em;"><br /> <a style="font-weight: bold;" href="../msg.forum?folder=inbox">الرسائل الخاصة</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search?search_id=activetopics"> أفضل المواضيع لهذا اليوم</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search.forum?search_id=egosearch">اعرض جميع مواضيعى</a><br style="font-weight: bold;" /> <a style="font-weight: bold;" href="../search.forum?search_author=Victor&show_results=posts">استعراض المواضيع الجديده</a><span style="font-weight: bold;"> </span><br style="font-weight: bold;" /><a style="font-weight: bold;" href="../search?search_id=unanswered">المواضيع التى ليس بها رد</a> </span>
</td>

</tr>

</tbody>
</table>

</div>

</div>


<div id="container">

<div style="color: rgb(0, 255, 255);" id="topp">


<ul class="login">

<li class="left">

</li>

<li>
<a id="toggleLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')?
   '-125px' : '0px');">لوحتى الخاصة مايكل سوفت</a>
</li>

</ul>


</div>


<div class="clearfix">

</div>

</div>

<p>

</p>
</div>

جميع هذه الاكواد لا تحتاج الى التعديل فقط افها كما هى حقوق الملكية هى اسم الموقع
مسموح بنقل الاكواد ممنوع حذف الحقوق
لن اسمحك اذا اخذت حقوق الملكيه

» تحميل و تثبيت لعبة ARMA 3 النسخة النهائية + الاون لاين و مودات و اضافات اللعبة
» 〖775 خط عربي و فارسي رائعة و مميّزة 〗☜ بملف ذاتي الدفع بحجم 46.6 mb ☞ [النسخة الثانية] 2014
» صمتاً - الحلقة 1 - الحكمة أن لا تحكم
» ثابت بن قـــــــرّة
» حسان بن ثابت