فرم ورود کشویی در بالای سایت

دسته‌ها : اسکریپت, سی اس اس علی میرزائی 23 دیدگاه‌ها

اسکریپت فرم ورود کشویی در بالای سایت

با عرض سلام و درود فراوان.
اولین پست سال جدید رو با یک اسکریپت جالب و کاربردی کلید می زنم.
امروز برای شما دوستان یک فرم ورود کشویی زیبا و مدرن رو آماده کردم که در کدنویسی اون از css3 و جاوا اسکریپت استفاده شده و با طرح و فرمی نو،  قادره تا شکلی متمایز در بخش ورود و خروج ایجاد کنه.
شما میتونید با استخراج کدهای اصلی و ایجاد کمی تغییرات در اون از این فرم زیبا در هر سیستم مدیریت محتوایی که خواستید استفاده کنید.
پیروز باشید.

دیدگاه کاربران در مورد این نوشته

  1. سلام
    من فایل رو دانلود کردم .فقط یک فایل استایله . ممنون میشم فایل افزونه رو برام ایمیل کنید

    توسط زهرا دریائی پاسخ

  2. با سلان دوباره به علی آقا.
    تابع hover را گذاشتم جای click. موس وقتی روی دکمه ورود قرار میگره تب ورود باز میشه ولی نمتونم روی نام کاربری یا پسورد کلیک کرد و مشخصات را نوشت، چون بعد از ول کردن موس از روی دکمه ورود به حالت اولش بر میگرده.

    توسط علی پاسخ

    1. بله حق با شماست. تو این کد، تابع hover درست کار نمیکنه! اما میتونید از تابع mouseenter استفاده کنید.

      توسط علی میرزائی پاسخ

  3. سلام. سایت آموزنده ایی در زمینه برنامه نویسی تهیه کردین. ممنون از آقا میزایی عزیز.
    چطور میتونم بدون کلیک کردن روی دکمه ” ورود” ، با قرار دادن موس روی دکمه ” ورود” نوار کشویی پنل ورود به کاربران نمایش داده بشه.

    توسط علی پاسخ

    1. ممنونم علی جان، نظر لطفتونه…
      با تغییر تابع ()click. به ()hover. میتونید این کار رو انجام بدید.

      توسط علی میرزائی پاسخ

  4. علی آقا سلام
    ممنون از اطلاعات خوبتون
    من میخوام این فرم اسکریپتی رو در بالا و چپ سایتم قرار بدم، میشه لطف کنین و روش کار رو بفرمایید چون به نظرم مشکل خیلی از وردپرسی ها همینه. ممنون
    همچنین چطور میشه با افزونه های مرتبط با فرم های ورود خروج و صفحات آنها هماهنگ میشه؟

    توسط محمد پاسخ

    1. سلام آقا محمد، باید از یک سری توابع برای این کار انجام بدید که نمونش تابع wp_signon برای ورود کاربران.
      اما اگه با کدنویسی آشنایی ندارید، میتونید از افزونه زیر استفاده کنید:
      http://tiny.alimir.ir/OL

      توسط علی میرزائی پاسخ

  5. با سلام
    ببخشید برای قرار دادن در نوار بالایی سایت ، کد مربوط به منو را در کجا باید وارد کنیم؟
    کدام بخش از فایل های پوسته؟

    توسط mohammad پاسخ

    1. سلام، محمد جان این افزونه نیستا… کد رو برای وردپرس میخوای؟

      توسط علی میرزائی پاسخ

  6. سلام خدا قوت
    یادت هم باشه، برای استفاده در وردپرس باید یک سری Action و… به دستور فیلدهات اضافه کنی
    این یعنی چی؟؟؟

    توسط پویا پاسخ

  7. اقا :دی
    اگه میشه یه اموزش بزارید خیلی گشتم تو این سایت و اون سایت که بتونم پیدا کنم چیکارش کنم
    !!! هیچ اموزشی نیست چرا

    توسط sepidar10 پاسخ

    1. واقعیتش حرف کلی کد و ویرایشه، متأسفانه تو بخش دیدگاه ها نمیشه کامل توضیح داد.
      اما به صورت کلی، شما باید کدهای کلاس Cf رو در جایی مثل header.php داخل تگ Body قرار بدید.
      سپس کدهای جاوا اسکریپت و فراخوانی کتابخانه رو هم در همون header.php ولی این بار داخل تگ head.
      در آخر هم برای فرم دهی از کدهای سی اس اس Style باید استفاده کنی (البته کدهای برخی دستورات مثل Body و warp رو نباید به کار ببری).
      یادت هم باشه، برای استفاده در وردپرس باید یک سری Action و… به دستور فیلدهات اضافه کنی 😉

      توسط علی میرزائی پاسخ

  8. سلام خسته نباشید با اینکه مطالبتون خیلی شیک و خیلی کمه !!! اما خیلی کاربردیه
    فقط اینجا یه سوال برای من ایجاد شده … من مبتدی در ضمینه سایت نویسی و وبلاگ نویسی هستم!
    اگه میشه راهنماییم کنین چطوری این فرم ورودی رو اجرا کنم !!؟؟؟؟
    کجا اینو توی وردپرس کپی کنم که بتونم ازش استفاده کنم !؟
    با تشکر

    توسط sepidar10 پاسخ

    1. سلام، متشکرم نظر لطفتونه :)
      ببینید این یک استایل خامه، برای استفاده باید بعضی کدهای Index رو فرضا در Header.php قالبتون بریزید و اونجا یه سری از کدها رو با دستورات وردپرس جایگزین کنید.
      سپس از کدهای سی اس اس که در Style قرار دارن، برای زیبا سازی استفاده کنید.
      در کل، اگه با کدنویسی آشنایی ندارید یه مقدار کار براتون سخت خواهد بود!

      توسط علی میرزائی پاسخ

  9. سلام علی آقا
    فایل این پست مشکل داره
    این فایل مربوط به دکمه دانلوده درصورتی که هیچ ربطی به این پست نداره
    ممنون میشم فایلو اصلاح کنید
    باتشکر

    توسط saeed پاسخ

    1. سلام.
      با عرض پوزش، لینک اصلاح شد :)

      توسط علی میرزائی پاسخ

  10. ممنون ، عالی بود ولی لینک دانلود مشکل داشت 😀

    توسط ShaIvaN پاسخ

  11. سلام . خیلی قشنگه . عالیه 😀

    این کادر آیا با پایین رفتن دنبال مرورگر میاد یا ثابته ؟

    و چطوری میشه بهش منو اضافه کرد در سمت راست . بالا خره خالی نباشه اونورش و یه کارایی هم بشه ازش کشید غیر از ورود و عضویت .

    توسط marjan پاسخ

    1. سلام، ممنون.
      والا الان یادم نیس که تو کدهای css اش اون دستور وجود داره یا نه!!! اما با یه کد ساده خیلی راحت میشه ثابتش کرد.
      متأسفانه فعلا تو مسافرتم و لپ تام خودم دستم نیست، ایشالا بعد تعطیلات حتما راهنماییتون میکنم :)

      توسط علی میرزائی پاسخ

      1. سلام برای ثابت کردن یک المان html می توان از دستور position:fix; در css استفاده کرده

        توسط احمد پاسخ

        1. کاملا درسته.
          ولی برای این مورد غیر از اون، باید کارهای دیگم انجام داد.

          توسط علی میرزائی پاسخ

  12. سلام. خیلی قشنگه ولی من به عضویت هم نیاز دارم که. اگه می تونی کمکم کن . ممنون داداش.

    توسط حسین پاسخ

    1. سلام،
      میتونی تو آی دی signup از نمونه کدهایی که در login هست استفاده کنی (البته با تغییر نام کلاس ها و آی دی ها و ویرایش برخی فیلدها و کدها).
      سپس در کدهای سی اس اس هم هرچی کد login هست، باید برای signup هم تعریف کنی.
      یه مقدار کاراش زیاده، اما چیز خیلی سختی نیست 😉

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید