چرتک بلاگ

سلام دوستان :) امروز قراره عیدیتون رو از من بگیرین! ابزار اسلایدر ساز تمام CSS بدون نیاز به خرید امکان جاوا اسکریپت

مقدمه

ایده من این بود که بشه بدون خرید امکان جاوا اسکریپت و با قدرت CSS در بلاگ بیان یک اسلایدر ساخت. و دیدم بعله! کاملا شدنی هست... ولی بعدش به این فکر افتادم که خب حالا که نحوه کد نویسی چنین اسلایدری رو بلدم چرا این پروسه رو خودکار نکنم؟ یعنی یک ابزاری بسازم که اطلاعات لازم رو بگیره و بعدش با محاسبات و یک سری کد های عجیب غریب (که با وجود اینکه خودم نوشتمش ولی هنوز نمیدونم اصلا چی هستن!) کد اسلایدر رو بسازه و بهتون تحویل بده! و شما به راحتی با کپی پیست کردن اون رو در هر وبلاگی بدون داشتن امکان جاوا اسکریپت اجراش کنین! ابزار در حال حاضر کاملا واکنش گرا هستش و توی هر اندازه کار میکنه :) مسلما نیاز به یک سری بهبود هم داره ولی خب به مرور زمان تکمیل ترش میکنم و ویژگی های جدیدی بهش اضافه میکنم.

توجه کنین با امکان جاوا اسکریپت اسلایدر های خیلی خیلی بهتری میشه ساخت ولی خب هر چیزی هزینه داره!

ویژگی های فعلی:

امکان تعریف زمان تغییر و زمان وقفه بین اسلاید ها

امکان تعیین اندازه اسلاید

کار کردن با هر تعداد عکس وارد شده

انیمیشن ساده حرکت عکس ها از راست به چپ

لینک کردن هر عکس به آدرس جدا

توقف اسلایدر هنگام بردن ماوس روی اسلایدر

کاملا واکنشگرا 

ویژگی هایی که شاید در آینده اضافه کردم:

افزودن متن به اسلاید ها (این تو برنامه بود ولی برای سادگی حذفش کردم.)

بهبود وضعیت ظاهر اسلایدر ساز

امکان سفارشی سازی بیشتر ابزار

نمونه ساخته شده:

آموزش ساخت اسلایدر

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

آیدی اسلایدر: یک نام ساده انگلیسی (آیدی) لازمه که قبلا تو وبلاگتون استفاده نشده باشه. این اسم باید به حروف انگلیسی باشه و نباید از حروف فاصله و یا کاراکترها استفاده بشه.

مدت زمان وقفه اسلاید: مدت زمانی که اسلایدر می ایسته تا اون عکسه نمایش داده بشه (بر حسب ثانیه). کافیه یک عدد مثل 5 بنویسین.

مدت زمان تغییر هر اسلاید: مدت زمانی که عکس ها تو اسلایدر تغییر میکنن یعنی مثلا از عکس 1 به عکس 2 میره (بر حسب ثانیه). کافیه یک عدد مثل 1 بنویسین (میتونین اعداد اعشاری مثل 0.5 رو هم بنویسین!)

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

گردی گوشه اسلایدر: میتونین گوشه اسلایدر رو گرد کنن. مثلا تو مثال بالا من عدد 15 رو نوشتم.

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

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

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

استفاده از کد در مطالب

اگر حوصله ویرایش قالب رو ندارین میتونین این کد رو مستقیما در پستتون استفاده کنین.

برای اینکار در پنل مدیریت بلاگ بیان به انتشار - ارسال مطلب جدید برین و اگر ویرایشگرتون همون ویرایشگر پیش فرض بیان هستش روی دکمه کلیک کنین تا حالت کد نویسی ویرایشگر فعال بشه.

حالا کافیه کدی که ابزار بهتون داده رو اینجا پیست کنین و باز روی دکمه کلیک کنین تا به حالت تصویری برگردین. اگر همه مراحل رو به درستی انجام داده باشین باید ببینین که اسلایدرتون در ویرایشگر به خوبی کار میکنه!

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

<div align="center">
...
</div>

و به جای ... کدی که ابزار بهتون داده رو پیست کنین و باز روی همون دکمه کلیک کنین تا به حالت تصویری ویرایشگر برگردین.

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

استفاده از کد در قالب

حقیقتش تنبلی اخیر من باعث شده هنوز اینو ننویسم :) بخاطر همین... شرمنده! هر زمانی نوشتم لینکش رو در این قسمت میزارم. در حقیقت این قراره مطلب بعدی وبلاگ زدایان باشه!

کد من کار نمیکنه. چیکار کنم؟

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

رایگانه دیگه؟

بعله :) البته خوشحال میشم در مطالبتون و یا در قسمت پیوند های روزانه این ابزار رو معرفی کنین تا تمامی دوستان استفاده کنن ولی کاملا رایگان هستش و نیازی نیست به چرتک بلاگ لینک بدین. اون خط های اول و آخر کدی که ابزار بهتون میده هم توضیحات هستن تا راحتتر کد مربوط به ابزار رو در قالب وبلاگتون پیدا کنین و هیچ سودی برای من نداره و میتونین پاکش کنین!

سخن پایانی

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

لینک ابزار اسلایدر ساز CSS