مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش پست بیت quot سبز ساده پیشرفته

آموزش: پست بیت "سبز" ساده + پیشرفته
به نام خدا

سلام،پیرو مباحثی که اخیرا بر سر یک پست بیت ناقابل بوجود اومد، وظیفه خودم دونستم تا در طی یک آموزش نحوه ایجاد پست بیت سبز رنگ (که خودم کدنویسیش کردم) رو قرار بدم تا ضمن برطرف کردن سوء تفاهمات و تهمت های وارده به دوست عزیزم جناب توفیقی و  تبرئه کردن کاربر عزیزمون rozgar از ریپ قالب و.... نشون بدم که طراحی یک پست بیت ساده چیزی نیست که نیاز به ریپ کردن داشته باشه؛برای همین در ادامه آموزش بعد از قرار دادن کد پست بیت ساده،در طی 2 مرحله کدهای پست بیت رو ارتقا خواهم داد تا کدهای پست بیت پیشرفته تری رو در اختیار کاربران عزیزمون قرار بدم.
و اما بعد:

آموزش: مرحله 1-ابتدا به مسیر زیر بروید:
 
قالب ها و پوسته ها » پوسته ها » پوسته مورد نظر » global » حالت پیشرفته

سپس کدهای زیر رو به انتهای کدهای موجود اضافه کنید:
کد:
.postbit{text-align:center;border-width:2px 4px;border-color:green;border-style: solid;padding:4px;margin:8px 4px;background:#F5F5F5;border-radius:4px;box-shadow:1px 1px 4px black} .postbit:hover{border-radius:12px}





مرحله 2- حالا به مسیر زیر بروید:

قالب ها » قالب موردنظر » Post Bit Templates زیر قالب postbit رو باز کنید؛ کدهای زیر رو بیابید:




کد:
<td class="post_avatar" width="1" style="padding-left: 10px;"> {$post['useravatar']} </td> <td class="post_author"> <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br /> <span class="smalltext"> {$post['usertitle']}<br /> {$post['userstars']} {$post['groupimage']} </span> </td> <td class="smalltext post_author_info" width="165"> {$post['user_details']} </td>





و با کد زیر جایگزین کنید:



کد:
<td class="post_avatar" width="1" style="padding-left: 10px;">{$post['useravatar']}</td> <td class="post_author"><div class="postbit"><strong><span class="largetext">{$post['profilelink']}</span></strong></div> <div class="postbit">{$post['onlinestatus']}</div> <span class="smalltext"> <div class="postbit">{$post['usertitle']}</div> <div class="postbit">{$post['userstars']}</div> <div class="postbit">{$post['groupimage']}</div> <div class="postbit"><div class="{$usergroup['title']}">{$usergroup['title']}</div></div> </span></td> <td class="smalltext post_author_info" width="165"> <div class="postbit">{$post['user_details']}</div></td>




مرحله 3- حالا به مسیر زیر در همین قالب، زیر قالب postbit_classic رو باز کنید و کدهای زیر رو پیدا کنید:



کد:
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br /> <span class="smalltext"> {$post['usertitle']}<br /> {$post['userstars']} {$post['groupimage']} {$post['useravatar']}<br /> {$post['user_details']} </span> </td>




و کدهای زیر رو جایگزینشون بکنید:


کد:
<div class="postbit"><strong><span class="largetext">{$post['profilelink']}</span></strong></div> <div class="postbit">{$post['onlinestatus']}</div> <span class="smalltext"> <div class="postbit">{$post['usertitle']}</div> <div class="postbit">{$post['userstars']}</div> <div class="postbit">{$post['groupimage']}</div> <div class="postbit">{$post['useravatar']}</div> <div class="postbit">{$post['user_details']}</div> </span></td>





تمام؛حالا شما یک پست بیت زیبا دارید.

+ ارتقا: اما اگر میخواهید پست بیت شما کمی پیشرفته تر باشه بجای کدهای مرحله 1،کدهای زیر رو در global قالب مورد نظر قرار بدید:

 
کد:
.postbit{ border-width:2px 4px; border-color:green; border-style:solid; padding:4px; margin:8px 4px;
text-align:center; background:#F5F5F5; border-radius:4px; box-shadow:1px 1px 4px black; -webkit-transition:all .7s ease;-moz-transition:all .7s ease;-ms-transition:all .7s ease;-o-transition:all .7s ease;transition:all .7s ease} .postbit:hover{ border-radius:12px; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; text-decoration:blink}


 

 + ارتقا2: اگر میخواهید پست بیتتون پیشرفته تر از این هم باشه، بجای کدهای مرحله 1،کدهای زیر رو در global قالب مورد نظر قرار بدید:


کد:
.postbit{ background-color:#F5F5F5; border-color:green; border-radius:4px; border-style:solid; border-width:2px 4px; box-shadow:1px 1px 4px black; margin:8px 4px; padding:4px; text-align:center; -webkit-transition:all 0.7s ease .4s;-moz-transition:all 0.7s ease .4s;-ms-transition:all 0.7s ease .4s;-o-transition:all 0.7s ease .4s;transition:all 0.7s ease .4s} .postbit:hover{ border-radius:12px; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; -o-transform:rotate(-10deg);transform:rotate(-10deg);-ms-transform:rotate(-10deg);-webkit-transform:rotate(-10deg); background:#F0F2ED}



تمام؛

نکته 1: دلیل اینکه ارتقاهای پست بیت رو در دو مرحله قرار دادم اینه که ممکنه کاربری از برخی قابلیت های جدید خوشش نیاد اونوقت میتونه انتخاب کنه کدوم پست بیت پیشرفته رو در انجمنش قرار بده.

نکته 2:چون توی کدهای پست بیت انمیشن زیاده واسه همین اگه شات قرار بدم زیبایی و جذابیت پست بیت مشخص نخواهد شد واسه همین بهته خودتون امتحانش کنید.


موفق باشید.
اگه می تونید یه شات هم قرار بدید. ممنونHeart


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش ساخت و ویرایش قالب مای بی بی – قسمت ۱ soltaneghalbha 0 1,574 ۱۸ اردیبهشت ۱۳۹۳، ۰۱:۱۸ ب.ظ
آخرین ارسال: soltaneghalbha
  آموزش ( کد ) رنگی کردن نام کاربری در سیستم مای بی بی reza 11 6,120 ۰۹ اردیبهشت ۱۳۹۳، ۱۱:۴۸ ق.ظ
آخرین ارسال: majidarts
  آموزش ایجاد لودینگ زیبا Mohammadreza477 1 946 ۲۱ دى ۱۳۹۲، ۱۲:۰۸ ب.ظ
آخرین ارسال: meshki poosh
  آموزش افزودن تعداد ارسال های زیر انجمن mellat 4 1,386 ۱۴ دى ۱۳۹۲، ۰۹:۳۰ ب.ظ
آخرین ارسال: mellat
  آموزش اضافه کردن کپی رایت به آخر پست ها @-Hoosk-@ 6 2,576 ۰۸ آذر ۱۳۹۲، ۱۱:۱۱ ق.ظ
آخرین ارسال: behnam
  آموزش حذف تنظیمات امتیاز دهی موضوعات @-Hoosk-@ 3 1,541 ۲۲ مهر ۱۳۹۲، ۰۷:۲۸ ب.ظ
آخرین ارسال: TvdFans
Star آموزش ایجاد افکت بر روی تصاویر collapse انجمن KoG 5 1,709 ۱۲ مهر ۱۳۹۲، ۰۲:۴۸ ق.ظ
آخرین ارسال: BlueAmir
  آموزش رفع اسکرول انداختن صفحه Tofighi 6 2,730 ۰۸ شهریور ۱۳۹۲، ۱۰:۴۲ ب.ظ
آخرین ارسال: Sherlockhlmz
  آموزش حل مشکل بهم ریختگی پلاگین های قسمت آمار انجمن در صفحه اصلی ب reza 2 3,077 ۲۳ مرداد ۱۳۹۲، ۰۸:۴۸ ق.ظ
آخرین ارسال: Mr.Sajad
  آموزش افزودن زمان کنونی در انجمن behnam 0 971 ۳۱ تير ۱۳۹۲، ۰۹:۰۶ ق.ظ
آخرین ارسال: behnam

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir