illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
38 43417 ۶ دی ۹۱ لقمان آوند

برخی از دوستان درخواست کرده بودند کدی رو در اختیارشون قرار بدیم که با کلیک روی یک لینک و یا دکمه رنگ پس زمینه تغیر کنه . به همین منظور امروز یک کد ساده و کاربردی رو برای انجام اینکار به شما معرفی می کنیم .

ما در ابتدا دو تابع جاوااسکریپت رو به شکل زیر تعریف می کنیم و سپس اونها رو در رویداد onclick تگ لینک دادن و دکمه ها استفاده می کنیم .

تابع setBgColor رنگ پس زمینه روبا توجه به ورودیش تعویض می کنه . ورودی این تابع نام و یا کد رنگ در html هست .

تابع randBg هم پس زمینه رو به صورت تصادفی از بین رنگ های درون آرایه ی colors انتخاب و تنظیم می کنه .

نکته : برای استفاده از این توابع بعد از اینکه کد بالا رو در صفحه وب و یا قالب وبلاگتون قرار دادید ، کافیه اون ها رو در رویداد onClick تگ های html مثل تگ لینک دادن و یا دکمه استفاده کنید .

بزارید چند مثال رو با هم ببینیم :

1. دکمه ای که با کلیک روی اون رنگ پس زمینه قرمز بشه :

2. لینکی که با کلیک روی اون رنگ پس زمینه آبی بشه :

3. دکمه ای که با کلیک روی اون رنگ پس زمینه به صورت رندم تعین بشه :

4. لینکی که با کلیک روی اون رنگ پس زمینه به صورت تصادفی تعین بشه :

نکته : به این نکته توجه داشته باشید که زمانی تغیر رنگ پس زمینه رو خواهید دید که برای پس زمینه تون عکس نگذاشته باشید .

می تونید پیش نمایش کد رو ببینید و کد صفحه وب شامل این چهار لینک/دکمه و نحوه استفادش رو دانلود کنید :

نوع کد رايگان

دیدگاه ها 38 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام شما کدها رو توی یک باکس نوشته ودر وب قرار می دهید حالا لطفا کد یک باکس خالی را به من بدهید .به عبارت دیگر کد یک باکس چگونه نوشته می شود.ولو ساده باشد.

  • ‏‏
    محمد(۳ مهر ۱۳۹۲)

    سلام داداش
    من میخوام برای قالب جوملا از این کد استفاده کنم
    البته به جای اینکه بعد از کلیک یه رنگ لود بشه میخوام یه فایل Css رو لود کنم !
    اخه سایتی که الان دارم طراحی میکنم قراره چند رنگه باشه و نیازه که حتما استایل ها و عکس ها با کلیک کلا عوض بشه !
    ممنون میشم راهنماییم کنی !
    مرسی

    • ‏‏
      کیوان علی محمدی(۳ مهر ۱۳۹۲)

      سلام باید حتما از کد های سمت سرور استفاده کنید . مثلا استایل مورد نظر رو توی کوکی یا سشن کاربر ذخیر کنید و بر طبق اون استایل های مورد نظر رو load کنید.

  • ‏‏
    محمد(۳ مهر ۱۳۹۲)

    ممنون میشم اگه یه مقداری توضیح بدی ( بتونی یه نمونه آماده کنی ممنونت میشم ) خدایش الان بالای 1 ماهه از هزاران نفر پرسیدیم و صد هزار جا رو سر زدم هیچکس نتونست جوابمو بده !
    همین که شما جواب دادی شرمنده کردی ولی ممنونت میشم کدشم به صورت دمو هم شده نشونم بدی
    مرسی

    • ‏‏
      کیوان علی محمدی(۳ مهر ۱۳۹۲)

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

  • ‏‏

    مشکلی با هزینش نیست فقط میخوام که کاربر روی یه مربع کوچیک کلیک کنه و یه فایل سی اس اس لود بشه براش !
    به طور کلی یه سایت چند رنگه بتونم داشته باشم
    ممنون میشم اوکیش کنی و شماره حصاب و هزینشو برام ایمیل کن
    مرسی

  • ‏‏

    سلام
    این اسکریپتها روچطور می توان در وردپپرس استفاده کرد؟ باید برگه جدید ساخت؟

  • ‏‏
    میلاد حسن پور(۵ فروردین ۱۳۹۳)

    سلام دوست عزیز عیدت مبارک باشه ان شا الله چند سال به این سال ها؟؟بنده میلاد حسن پور 16 ساله از تبریز واقعا سایت مفیدی داری البته برای کسانی که از وردپرس استفاده می کنند !!! زیاد به دردشون می خوره خلاصه بریم سر اصل مطلب، من می خوام در وردپرس یه سایت داشته باشم ولی مشکلات زیادی دارم از قبیل انتخاب نام خوب مانند !!!!.IRیاد گرفتن برنامه نویسی PHPوHTML وJAVA SCRITEوcss وهاست رایگان خوب( البته برای مدتی کوتاه برای آشنایی بیشتر با وردپرس ) حالا در خواستم از تو این بود که بهم کمک کنی یه سایت از طریق وردپرس بازکنم و یه نام خوب بهم بگی و از چه منابعی (کتاب ،سایت،…{البته فارسی}) می تونم ای زبان های بالا رو یاد بگیرم ببین داداش گلم من خیلی دوست دارم در ضمینه اینترنت فعالیت کرده و خدمات رایگان به دنیا برسونم اگه در این راه کمکم کنی مخلصت میشیم ثواب داره یه آقایی کن هرچه میتونی کمکم کنی از من دریغ نکن یاعلی

    • ‏‏
      سجاد دریس(۸ فروردین ۱۳۹۳)

      سلام آقا میلاد.
      اگه کلمه هاست رایگان رو توی گوگل جستجو کنی، سایت های زیادی پیدا میکنی که هاست رایگان در اختیار قرار میدن، میتونی توی اون سایت ها ثبت نام کنی و بعدش وردپرس رو نصب کنی.
      اما اگه هدفت یادگیری وردپرسه بنظرم روی لوکال کار کنی بهتره، که برای این کار میتونی نرم افزار wamp یا xampp رو نصب کنی.
      برای یادگیری زبان هایی که گفتی هم میتونی به سری های آموزشی سایت مراجعه کنی.

  • ‏‏
    alireza security(۳۰ تیر ۱۳۹۳)

    سلام دوست عزیز ممنون از اموزش خوبتون.یه سوال اینکه چطور میشه با انتخاب یه استایل توسط کاربر به نمایش دربیاد.مثلا ماتوسایتمون توپنل تنظیمات گزینه انتخاب استایل داریم,نمونه این کارو اسکریپتهای انجمن ویبی هم انجام میده و بخش دوم سوالم اینکه چطور توبازدید مجدد سایت توسط همون بازدید کننده قالبی ک قبلا انتخاب کرده بوده برایش به نمایش دربیاد؟
    باتشکر

  • ‏‏

    سلام مجدد و خسته نباشید, فرمودین از کوکی استفاده کنم,میخواستم ببینم اول اینکه چه اطلاعاتی داخل فایل کوکی گذاشت و چجوری؟ و اینکه بعدکه کوکیو ازسیستم کاربر دریافت کردیم با چه دستوراتی از یه فایل css بخصوص استفاده کنیم تا جایگزین استایل کنونی بشه؟اگه لطف کنید با یه مثال که تموم این کارارو انجام بده راهنماییم کنید خیلی ممنون میشم.

    • ‏‏
      لقمان آوند(۳۱ تیر ۱۳۹۳)

      نام تم و یا استایل انتخابی رو تو کوکی ذخیره کن .
      تو یه شرط if مقدار اون کوکی رو می خونی و چک می کنی اگه وجود داشت استایل اون تم رو اضافه می کنی درون بلاک if .

  • ‏‏

    سلام
    اگر میشه اینو یه جوری درست کنید که مثل ویندوز هشت بعد از اتمام نصب رنگ ها در زمینه عوض میشه به نوبت و ارام ارام تغییر پیدا کند و نیازی با کلیک نباشه . مثلا 20 تا رنگ رو به ترتیب ارام ارام تو body این رنگ ها عوض بشه ,خودکار باشه.
    خیلی مرسی از لطفتون.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram