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

الكود:

.code {
max-height:200px;
overflow:auto;
direction:ltr;
display:block;
}

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



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

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

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

الكود:


 <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(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}
      
               #topp ul.login li.left {
                background: url(http://img41.imageshack.us/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>
<!--                                                                          Login                                                                          -->
<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="http://i53.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="http://i65.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="http://i65.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>
 
<!--                                                                          /login                                                                          -->
<div id="container">
 
<div style="color: rgb(0, 255, 255);" id="topp">
 
<!--                                                                          login                                                                          -->
<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>
 
<!--                                                                          / login                                                                          -->
</div>
 
<!--                                                                          / topp                                                                          -->
<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(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}
      
               #topp ul.login li.left {
                background: url(http://img41.imageshack.us/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>
<!--                                                                             Login                                                                             -->
<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="http://i53.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 />{USERLINK}</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);">{USERCOUNTPOST}<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 />تاريخ اخر زيارة هو: {USERLASTVISIT}: شكرا لعودتك <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>
 
<!--                                                                             /login                                                                             -->
<div id="container">
 
<div style="color: rgb(0, 255, 255);" id="topp">
 
<!--                                                                             login                                                                             -->
<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>
 
<!--                                                                             / login                                                                             -->
</div>
 
<!--                                                                             / topp                                                                             -->
<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(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}
      
               #topp ul.login li.left {
                background: url(http://img41.imageshack.us/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>
<!--                                                                           Login                                                                           -->
<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="http://i53.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 />{USERLINK}</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);">{USERCOUNTPOST}<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 />تاريخ اخر زيارة هو: {USERLASTVISIT}: شكرا لعودتك <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>
 
<!--                                                                           /login                                                                           -->
<div id="container">
 
<div style="color: rgb(0, 255, 255);" id="topp">
 
<!--                                                                           login                                                                           -->
<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>
 
<!--                                                                           / login                                                                           -->
</div>
 
<!--                                                                           / topp                                                                           -->
<div class="clearfix">
 
</div>
 
</div>
 
<p>
 
</p>
</div>


]جزآڪ آللهـّ آلف خيّر علىّـآ آلموٍِضوٍِع آلمفيد وٍِ آلرآئع
بآرٍِڪ آللهـّ فيڪ وٍِآنآلڪ ڪل مآآفي بآلڪ وٍِآبعدڪ عن
ڪل شرٍِ وٍِحسد وحقد وآدخلڪ من فسيح جنآتهـّ يآآرب 

موضوع رائع 

وطرح مميز 

تسلم الايادي

تحياتي