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

| ₪|سلامٌ عليكم و رحمةٌ من اللهِ و بركاته | ₪| ..

مرحباً بكم أيها الكرام من أعضاء و زوار منتديآت azoza4all من كل مكان

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

مميزاته :

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
|صورة للمعينة الكود |

هاد الصورة ظهور نافذة التسجيل قبل الضغط عليها


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


و هاد الصورة نافذة التسجيل بعد الضغط عليها و كيفكة ظهورها


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الخطوى الأولى :-

شرح تركيب الكود :

لوحة أدارة >> مظهر المنتدى >> التومبلايتات و القوالب >> أدارة عامة --overall_header

و نقوم بالبحث عن الكود التالي :

background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}"
text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">[/

و أسفله تماما نضع هاد الكود التالي :

الكود:


<!-- code by sam hameed -->
<!-- BEGIN switch_user_logged_out -->
  <script type="text/javascript" src="http://fg-coding.bravehost.com/login_panel/mootools-1.2-core-yc.js"></script>
  <script type="text/javascript" src="http://fg-coding.bravehost.com/login_panel/mootools-1.2-more.js"></script>
  <script type="text/javascript" src="http://fg-coding.bravehost.com/login_panel/fx.slide.js"></script>
<div id="login_panel">
  <div id="login">
      <div class="loginContent">
        <form  action="login.forum?connexion" method="post" >
            <label for="log"><b>أسم العضو : </b></label>
            <input class="field" type="text" name="username" id="log" value="" size="23" />
            <label for="pwd"><b>الرقم السري :</b></label>
            <input class="field" type="password" name="password" id="pwd" size="23" />
            <input type="submit" name="login" value="تسجيل الدخول" class="button_login" />
            <input type="hidden" name="redirect_to" value=""/>
        </form>
        <div class="left">
 
              <label for="rememberme"><input name="rememberme"
id="rememberme" class="rememberme" type="checkbox" checked="checked"
value="forever" />تذكر بيناتي</label></div>
       
<div class="right">ليس لديك حساب بعد؟ <a
href="/profile.forum?mode=register">يرجى تسجيل</a> | <a
href="/profile.forum?mode=sendpassword">هل فقدت كلمة
السر؟</a></div>
      </div>
  </div>
    <div id="container">
      <div id="top">
      <!-- login -->
        <ul class="login">
            <li class="left"> </li>
              <li>أهلا و سهلا </li>
            <li>|</li>
            <li><a id="toggleLogin" href="#Autentifica-te">أضغط هنا</a></li>
        </ul> <!-- / login -->
      </div> <!-- / top -->
  </div>
</div>
<!-- END switch_user_logged_out -->
<!-- code by sam hameed -->

و من ثم نضغط سجل

ملاحظة ما تنسو تعملو نشر للقالب



الخطوة الثانية :

ليشتغل ستايل الكود علينا تركيب الكود التالي في صفحة الأنماط الأنسيابية

لوحة أدارة - مظهر المنتدى - ألوان - ورقة الانماط الانسيابية css

الكود:

 /* code by asm hameed */

    html, body {
    border: 0; margin: 0; padding: 0;
    }
    #login_panel {
    top: 0px;
    position: absolute ;
    width: 100% ;
    z-index: 999;
    }
    #container {
    width: 100%;
    height: 100%;
    text-align: center;
    }
    /* code by asm hameed */
    /* Login Panel */
    #top {
    background: url(http://i25.servimg.com/u/f25/14/45/99/41/login_10.png) repeat-x 0 0;
    height: 38px;
    position: relative;
    }
    #top ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 38px;
    width: auto;
    font-weight: bold;
    line-height: 38px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 80%;
    text-align: center;
    background: url(http://i25.servimg.com/u/f25/14/45/99/41/login_11.png) no-repeat right 0;
    padding-right: 45px;
    }
    #top ul.login li.left {
    background: url(http://i25.servimg.com/u/f25/14/45/99/41/login_12.png) no-repeat left 0;
    height: 38px;
    width: 45px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    }
    #top ul.login li {
    text-align: left;
    padding: 0 6px;
    display: block;
    float: left;
    height: 38px;
    background: url(http://i25.servimg.com/u/f25/14/45/99/41/login_13.png) repeat-x 0 0;
    }
    #top ul.login li a {
    color: #33CCCC;
    }
    #top ul.login li a:hover {
    color: white;
    }
    /*Login*/
    /* code by asm hameed */
    #login {
    width: 100%;
    color: white;
    background: #333333;
    overflow: hidden;
    position: relative;
    z-index: 3;
    height: 0;
    }
    #login a {
    text-decoration: none;
    color: #33CCCC;
    }
    #login a:hover {
    color: white;
    }
    #login .loginContent {
    width: 700px;
    margin:5px auto;
    text-align: left;
    font-size: 0.85em;
    }
    #login .loginContent .left {
    width: 100px;
    float: left;
    padding-left: 120px;
    font-size: 0.95em;
    }
    #login .loginContent .right {
    width: 350px;
    float: right;
    text-align: right;
    padding-right: 90px;
    font-size: 0.95em;
    }
    #login .loginContent form {
    margin: 0 0 10px 0;
    height: 26px;
    }
    #login .loginContent input.field {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px #5e5e5e solid;
    background: #464646;
    margin-right: 5px;
    margin-top: 4px;
    color: white;
    height: 16px;
    }
    #login .loginContent input:focus.field {
    background: #777777;
    }
    #login .loginContent input.rememberme {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
    }
    #login .loginContent input.button_login {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #4d4d4d;
    color: #a8a8a8;
    cursor: pointer;
    border: 1px solid #5e5e5e;
    }
    #login .loginContent input.button_login:hover {
    color: #d2d2d2;
    border: 1px solid #7f7f7f;
    }
    #toggleLogin {
    text-decoration: none;
    }
/* code by asm hameed */