ورود عضویت ویژه
بک لینک
خانه >> طراحی و توسعه وب >> پایگاه وردپرس >> آموزش وردپرس >> نمایش پیشرفت پروژه ها بدون افزونه

نمایش پیشرفت پروژه ها بدون افزونه

12345
نمایش پیشرفت پروژه ها بدون افزونهبازبینی توسط 3zar در 21-02-1393امتیاز: 5.0نمایش پیشرفت پروژه ها بدون افزونهبا سلام به شما دوستان عزیز امروز در صدد معرفی یک کد برای قرار دادن در سایت وردپرسی تون هستیم که بدون نیاز به افزونه و اشغال کردن حجم زیادی ...

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

نمایش پیشرفت پروژه ها بدون افزونه

نمایش پیشرفت پروژه ها بدون افزونه

برای شروع ابتدا کد زیر را به سند style.css خودتون اضافه کنید:

[css]@import url(https://www.3zar.ir/download/reset.css);
.progress {
overflow: hidden;
margin: 120px auto;
padding: 0 15px;
width: 220px;
height: 34px;
background: #d3d5d9;
border-radius: 17px;
background-image: -webkit-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -moz-linear-gradient(top, #ebecef, #bfc3c7);
background-image: -o-linear-gradient(top, #ebecef, #bfc3c7);
background-image: linear-gradient(to bottom, #ebecef, #bfc3c7);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
}

.progress-val {
float: right;
margin-left: 15px;
font: bold 15px/34px Helvetica, Arial, sans-serif;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}

.progress-bar {
display: block;
overflow: hidden;
height: 8px;
margin: 13px 0;
background: #b8b8b8;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}

.progress-in {
display: block;
min-width: 8px;
height: 8px;
background: #1997e6;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #147cd6, #24c1fc);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #147cd6, #24c1fc);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #147cd6, #24c1fc);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #147cd6, #24c1fc);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}[/css]

دیگه کار تموم شد و کافیه که کد زیر رو در هر جای قالبتون که می خواهید قرار دهید(البته پیشنهاد بنده قرار دادن در قسمت ابزارک هاست ) :

[php]<!–[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]–> <div class="progress"> <span class="progress-val">20%</span> <span class="progress-bar"><span class="progress-in" style="width: 20%"></span></span>[/php]

فقط لازم به ذکر است که برای نشان دادن درصد پیشرفت به جای عدد 20 در کد آخر عدد دلخواه رو جا گذاری کنید.
موفق باشید…

QR: نمایش پیشرفت پروژه ها بدون افزونه
مرجع : سزار وردپرس
لینک کوتاه : https://3zar.ir/?p=23455

دیدگاه‌های کاربران 19 نظر

  1. تـــــشکر عالی بود 🙂

  2. تیم طراحی سایت

    اقای نصرالهی مطلب بسیار به درد بخوری نوشتید ممنون بابت توضیحات و ممنون سایت سزار

  3. به استال قالب یا استایل خود ورد پرس

  4. میترا مرادی

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

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

    ممنون می شم

    • رضا نصرالهی

      اندکی صبر سحر نزدیک است…

    • رضا نصرالهی

      سلام.چو وعده نمودم وفا کردم :http://goo.gl/3CZuxo
      فایل زیپ رو باز کنید و فایل css رو به فایل اصلی style.css قالب اضافه کنید و کد php رو هم به پوشه ی پوسته اضافه و از طریق توابع وردپرس فراخوانی کنید.
      در پناه حق

  5. سلام.

    ممنون از سایت خوبتون.

    یه سوال درگاه بانک های ملت یا پارسیان برای افزونه paid-downloads تو سایتتون نیست؟

    هرچی گشتم پیدا نکردم.
    اگه نیست با دریافت هزینه امکانش هست تهیه کنید؟؟؟

    • رضا نصرالهی

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

      • ممنونم ازتون.
        میخوام مستقیم به خود بانک وصله بشه .

        و درگاه رو از بانک بگیرم. بدون واسطه.

        امکانش هست بنویسید برای بانک ملت یا پارسیان؟؟

        • رضا نصرالهی

          مستقیم وصل می شه

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

            • رضا نصرالهی

              خب از طریق فرم تماس با آقای فرخی ارتباط داشته باشید.
              یا
              http://www.rahgir.com/%D8%AF%D8%B1%DA%AF%D8%A7%D9%87-%D8%A8%D8%A7%D9%86%DA%A9-%D9%85%D9%84%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-wordpress/

              • سلام
                از اینجا دریافت کنید :
                [php]
                http://wordpress.org/plugins/bank-mellat-edd-gateway/
                [/php]

              • ممنون آقای فرخی. این برای edd هست.
                برای paid-downloads رو میخوام.

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

  6. مرسی از شما . به درد من یکی که خیلی خورد . خیلی مرسی از سایت بسیار خوبتون

    سپاس

  7. سلام.
    میخواستم از خدمت شریفتون بپرسم که بنده قالب صحیفه نصب نموده ام، لذا میخواهم بدانم که سند style.css در کجای ورد پرس قرار دارد. و اینکه پس از پیدا کردن فایل باید کجای آن این کد را کپی کرد؟!

    • سلام
      بصورت خیلی ساده در داشبورد وردپرس > نمایش > ویرایشگر را بزنید تا به محیط مربوطه هدایت شده و کد را در انتهای فایل css جایگزاری نمائید.

  8. قالب وردپرس

    ممنون بسیار مفید بود .خیلی دنبال همچین چیزی میگشتم

جوابی بنویسید

ایمیل شما نشر نخواهد شدفیلد های ضروری نشانه گذاری شده است. *

*

قبل از نوشتن دیدگاه به نکات مهم زیر توجه کنید


  • - دیدگاه‌هایی مانند: خوب بود، ممنون- سایت خوبی دارید- عالی بود و موارد مشابه تایید نمی‌شود.
  • - دیدگاه‌تان را فقط در رابطه با همین مطلب ثبت کنید، در غیر اینصورت پاسخ داده نخواهد شد.
  • - دیدگاه‌هایی که دارای نام‌های تبلیغاتی با هدف بک‌‌لینک گرفتن هستند تایید نمی‌شوند.