تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 4 از 4

مقاله: آموزش کامل ایجاد یک درجه کاربری زیبا (اختصاصی وی بی ایران)

    1. آموزش کامل ایجاد یک درجه کاربری زیبا (اختصاصی وی بی ایران) »

      آموزش کامل ایجاد یک درجه کاربری زیبا (اختصاصی وی بی ایران)

      نگارش: , by (کاربر سایت)
      2013/03/25 08:00 PM
      امتیاز:  (1 رای ، میانگین : 5.00 )

      سلام؛

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

      اول باید از نویسنده این آموزش تشکر کنم، چون قسمتی از کار رو از مقاله ایشون یاد گرفتم.
      آموزش گذاشتن ستاره های کاربری مثل وی بی ایران (جدید)

      بعد هم باید از طراح این درجه های کاربری تشکر کنم، چون در سایت خودم و این آموزش از طرح های ایشون استفاده کردم.
      پک درجه کاربری عید نوروز 92 + PSD

      اگر این آموزش هم براتون مفید بود تشکر یادتون نره.

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


      ابتدا میخوایم یک تصویر قرار بدیم. من برای نمونه تصویر زیر رو قرار میدم.
      13642225689478_0administrator.png

      در کنترل پنل مدیریت بر روی اضافه کردن درجه جدید کلیک کنید.

      136422256813565_11.png

      تعداد تکرار درجه ها چیست؟

      خیلی ساده! تصویری که میخواهید استفاده کنید چند بار کنار هم قرار میدهد.
      اگر عدد 3 قرار دهید، با این نتیجه مواجه خواهید شد که مطلوب هیچ ## نیست:

      13642225689478_0administrator.png13642225689478_0administrator.png13642225689478_0administrator.png

      پس در این مورد عدد 1 را قرار میدهیم. این گزینه نقش مهمی ایفا میکنه.

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

      حداقل پست چیست؟
      در ادامه، وقتی به ستاره ها رسیدیم میفهمیم چیه.

      درجه دسته ای چیست؟
      وقتی چند تصویر کنار هم قرار میگیرد، فرض کنید 8 عدد ستاره در کنار هم قرار بگیرد، برای این که ستاره ها به خط دوم نروند این گزینه را تیک میزنیم.

      مسیر فایل چیست؟
      آدرس تصویر!
      اگر تصویر در این مسیر قرار دارد: http://soosha.com/images/ranks/admin.png
      تایپ کنید: images/ranks/admin.png
      در این حالت هم تصویر نشان داده خواهد شد. ضمنا اگر آدرس سایت تغییر کند به مشکل برنخواهید خورد.

      گزینه آخری هم بعدا بررسی میکنیم.

      در انتها با انجام این کارها با این نتیجه مواجه خواهید شد:

      136422322917291_02.png

      -------------------------------------------------

      مرحله دوم:
      گذاشتن ستاره در زیر نام کاربری:

      این قسمت خیلی ساده است. فرض میکنیم قصد داریم 8 عدد ستاره طلایی در زیر درجه مدیر کل قرار دهیم.
      این هم تصویر ستاره ما:
      136422338324884_0star.png

      تعداد تکرار درجه ها را بر روی 8 قرار میدهیم. چیزی که در نهایت ما میبینیم 8 عدد ستاره در کنار هم خواهد بود.
      136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png136422338324884_0star.png

      گروه کاربری دلخواه خود را انتخاب کنید. در این مثال مدیر کل موش آزمایشگاهی ما است!!

      حداقل پست را 0 قرار دهید. مفهوم این گزینه را در انتهای آموزش میگم.
      درجه دسته ای را بر روی بله قرار دهید. اینجوری 8 تا ستاره کنار هم قرار خواهد گرفت و مطمئن هستیم به خط دوم نخواهند نرفت! نمیخوایم پست بیت خوشگلمون خراب بشه.


      مسیر فایل را وارد میکنیم. مثلا:
      images/ranks/star.png

      در نهایت این نتیجه نهایی ما خواهد بود:

      13642237798022_03.png


      ------------------------------

      توضیح بخش حداقل پست ها:

      فرض کنید میخواید کاربران عادی رو بر اساس تعداد پست ها درجه بندی کنید.
      کسانی که 10 تا پست دادند 1 ستاره بگیرند.
      کسانی که 50 تا پست دادند 2 ستاره بگیرند و الی آخر!

      یک تصویر هم از این موضوع ببینید، به درک مطلب کمک میکنه!

      136422399431291_04.png


      ------------------------------

      مرحله سوم:

      اما اگر بخواید مثل وی بی ایران از دو ستاره مختلف در درجه کاربری استفاده کنید چه کار باید کرد؟ چطور دو تا تصویر رو به این شکل کنار هم قرار میدید؟ چطور 2 تا ستاره طلایی رو در کنار 4 تا ستاره نقره ای قرار میدید؟

      باید از کدهای html استفاده کنید. حالا باید از آخرین گزینه استفاده کنیم!

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

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

      برای نقره ای کردن ستاره طلایی برید فوتوشاپ و image mode رو بر روی gray scale قرار بدید. کار گرافیکی به آموزش ما مربوط نیست.

      در حال حاضر ما دو نوع ستاره داریم.

      136422338324884_0star.png 136422453744055_0starb.png

      اسم ستاره طلایی: star.png
      اسم ستاره نقره ای: starb.png

      کد اصلی ما هم اینه:
      کد HTML:
      <img border="0" alt="" src="آدرس ستاره"/>
      این کد عکس ما رو بازخوانی میکنه.
      باید به تعداد دلخواه در کنار هم قرار بدید و آدرس تصاویر رو درونش قرار بدید.
      مثلا این عبارت رو 6 بار کنار هم قرار بدید، در دو تای اولی آدرس ستاره طلایی و 4 تای بعدی آدرس ستاره نقره ای رو قرار بدید.

      دقت کنید که باید آدرس کامل رو وارد کنید، مثلا:
      کد:
      http://soosha.com/images/ranks/star.png
      نباید مثل قبلی ها خلاصه باشه.

      همچنین تعداد تکرار درجه ها روی 1 قرار بگیره! ما به صورت دستی و به وسیله کد، ستاره ها رو تکرار کردیم و دیگه نیازی به اون پارامتر نیست.

      کد HTML:
      <img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/><img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/><img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/><img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/><img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/><img border="0" alt="" src="http://soosha.com/images/ranks/starb.png"/>
      این هم نتیجه:
      13642250247359_05.png


      امیدوارم مفید بوده باشه.
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.2.2DGT
    نوشته ها
    374
    میزان امتیاز
    41

    پیش فرض

    این آدرسی رو که برای ستاره ها گذاشتی اشتباهه 2 تا آخری از سمت جپو باید میزاشتی star همه رو گذاشتی starb
    ویرایش توسط fatemiyon : 2014/09/03 در ساعت 01:10 AM

  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.4.2
    نوشته ها
    131
    میزان امتیاز
    18

    پیش فرض

    واسه ورژن 5 هم همینجوریه؟

  3. Top | #4
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    21
    میزان امتیاز
    0

    پیش فرض

    سلام
    اون کارهایی که گفته شده انجام دادم ستاره های کاربری میاد اما الان خود درجه ها به نمایش در نمیاد !



    البته در حالت همه ستاره ها خاموش میاد !



    اینم تنطیماتش ( از کد استفاده کردم ) :



    up
    ویرایش توسط M.Senator : 2015/01/02 در ساعت 04:59 PM دلیل: ادغام دو پست

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 35
    آخرين نوشته: 2014/03/30, 11:21 AM
  2. پاسخ: 9
    آخرين نوشته: 2013/06/29, 08:12 PM
  3. آموزش زیباسازی اطلاعیه ها اختصاصی |-> وی بی ایران <-|
    توسط jcs.w در انجمن آموزش های وی بولتین
    پاسخ: 17
    آخرين نوشته: 2013/01/31, 10:05 AM
  4. پاسخ: 4
    آخرين نوشته: 2012/10/12, 10:52 PM
  5. آموزش اضافه کردن منوی زیر مجموعه(اختصاصی وی بی ایران)
    توسط Danialskh در انجمن آموزش های وی بولتین
    پاسخ: 0
    آخرين نوشته: 2012/09/26, 10:42 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •