چرتک بلاگ

کدنویسی، آموزش وبلاگ، تفریح و دلنوشت با کمی چاشنی طنز

قالب فروتن نسخه 1.0 برای بلاگ بیان

قالب فروتن نسخه 1.0 برای بلاگ بیان

توسط Mohsen シ در تاریخ ۲۸ شهریور ۱۴۰۰

در موضوعات: ابزار و قالب وبلاگ

امکانات قالب:

  • واکنش گرا و سازگار با موبایل
  • حجم کم فایل اصلی قالب (بدون در نظر گرفتن فونت‌ها و آیکون‌ها)
  • استفاده شده از فونت صمیم
  • دو ستونه
  • ترکیبی از تم تیره و روشن
  • امکان تغییر رنگ اصلی به دلخواه شما در همین صفحه
  • پشتیبانی از تصویر مطلب در پست‌ها
  • چسبیدن آخرین آیتم سایدبار به بالای صفحه (پیش‌فرض: آخرین مطالب جدید)
  • افزودن پست مورد نظر شما (متن، نوشته، اسلایدر، لینک و هر چیزی) به سایدبار به کمک نشانه‌ها و بدون تغییر قالب 

در آینده امکانات و ویژگی‌های جدیدتر و جالبتری به این قالب اضافه خواهد شد. از نظرات و پیشنهادات شما استقبال میشود.

این قالب بر روی تمامی مرورگرهای مدرن کار می‌کند اما با مرورگرهای قدیمی مانند اینترنت اکسپلورر سازگار نیست!

در حال حاضر این قالب جعبه‌ تگ‌ها و آخرین نظرات را ندارد.

آموزش اضافه کردن پست دلخواه شما به نوار کناری (سایدبار) 

وارد پنل مدیریتی بلاگ شوید و به قسمت تنظیمات، تنظیمات پیشرفته بروید.

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

در صفحه باز شده برای نام یک نام دلخواه مانند «مطالب سایدبار» انتخاب کنید و در قسمت شناسه لاتین side را وارد کنید.

بر روی ذخیره بزنید و به قسمت انتشار بروید.

در صورتیکه از قبل پستی آماده برای سایدبار دارید می‌توانید به قسمت ویرایش مطلب مدنظر رفته و از آنجا تیک نشانه مورد نظر را فعال کنید.

در غیراینصورت می‌توانید به قسمت انتشار، ارسال مطلب جدید بروید و از آنجا تیک نشانه که ساختید را بزنید. 

حالا پست شما هر عنوانی که داشته باشد به عنوان تیتر و مطالب آن به عنوان بدنه استفاده خواهد شد. در صورتیکه می‌خواهید برای سایت یک اسلایدر عکس داشته باشید می‌توانید از ابزار اسلایدرساز css استفاده کنید

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

پیشنمایش (عکس)


:رنگ اصلی

کد اچ تی ام ال

کد سی اس اس

 

در صورتیکه به هر دلیلی کدهای بالا کار نکرد می‌توانید از طریق لینک‌های زیر کدها را دانلود کرده و به صورت دستی رنگ را تغییر دهید (رنگ #05a571 را با رنگ دلخواهتان توسط نت پد یا هر ادیتور دیگری replace کنید)

لینک کد html

لینک کد css

 

 

پی نوشت موقت: ساعت یک و نیم شبه و من فردا احتمالا یا باید بلند شم ببینم درسا شروع شدن یا نه یا هم برم باغ برای گردو و مابقی قضایا :/ وقت شناسیم رو قربون واقعا! 😂 یا کار نمیکنم کلا، وقتیم که کار میکنم همه چیز رو یکجا انجام میدم.

در هر حال قراره یک پست کامل بعدا بنویسم که چی شد و چیا نشد (طبق معمول... نه که کسی اهمیت میده -ــ-) ولی خوب خلاصه بگم امکان جاوا اسکریپت رو تمدید کردم و چند تا کاری که میشه با جاوا اسکریپت تو وبلاگ انجام بدین رو مینویسم. ابزار اسلایدر ساز هم الان کاملا واکنش گراست و میتونین استفاده کنین و البته توی گیتهاب هم سورسش رو قرار دادم چون دیگه مهم نیست حتی نمیخوام روی نحضش رو ببینم 😂 در مورد نشانه‌ها تو بیان و کارای دیگه که میشه باهاش انجام داد هم مینویسم و همینا دیگه.

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

همین :) شاد باشین.

نظرات

برو به فرم ارسال نظر

تا الان ۱۲ نظر داریم.

نویسنده آشنا ۲۹ شهریور ۱۴۰۰، ۰۹:۲۷

سلام
خسته نباشی عزیز، قالب قشنگی شده 🌹 مخصوصا که میشه رنگ قالب رو تغییر داد
خدا خیرت بده🌹 ⁦(◠‿・)—☆⁩

Mohsen シ ۲۹ شهریور ۱۴۰۰، ۱۳:۳۷

سلام 😁

خیلی ممنون آقا لطف داری. آره اتفاقا الان چیز چندان پیچیده‌ای هم نیستش یعنی تنها کاری که میکنم اینه فایل css رو بارگیری میکنم و به جای اون رنگ پیشفرض، رنگ کاربر رو جایگذاری میکنم. قصد داشتم طوری کنم که بشه کل قسمتاش رو تغییر داد که اونم حوصلم نکشید چون برای هر قسمت جدا متغیر تعریف نکرده بودم 😂 ولی توی برنامم بود بخاطر همین از less کمک گرفتم.
مرسی دم شما هم گرم این قالب اول منه ولی شما یک عمریه قالب میسازین :) الان قشنگ میفهمم چقدر زمانبر هستش 😂 خلاصه دست شما درد نکنه واقعا 🌹❤

علیرضا ‌‌ ۲۹ شهریور ۱۴۰۰، ۱۱:۲۱

احسنت عاشق تناسب رنگش شدم دمت گرم:)

Mohsen シ ۲۹ شهریور ۱۴۰۰، ۱۳:۲۹

مرسی قربانت 😊 نظر لطفته عزیز 🌹

نقل بلاگ ۰۵ مهر ۱۴۰۰، ۲۰:۰۶

خدا قوّت محسن عزیز، خیلی قشنگ شده :)
دوست داشتی این تکه کد رو بزن تنگ سی اس اس که فونت اینپوت‌ها و متن نظرات هم ردیف بشه:
input, textarea, select {
font-family: inherit;
}
خودت عمدا سایدبار رو گذاشتی راست؟

Mohsen シ ۰۵ مهر ۱۴۰۰، ۲۰:۱۷

سلام آقا محمد چخبرا برادر :)) از اینطرفا؟

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

نقل بلاگ ۰۵ مهر ۱۴۰۰، ۲۳:۱۲

خبر هم سلامتی، آها پس که اینطور :)

Mohsen シ ۰۶ مهر ۱۴۰۰، ۱۳:۱۳

خدا رو شکر.

مرسی :)

Dorothy __ ۲۰ مهر ۱۴۰۰، ۲۱:۴۸

من واقعا از این خوشم اومده =)
خسته نباشید!

Mohsen シ ۲۲ مهر ۱۴۰۰، ۰۱:۲۴

مرسی لطف دارین 😊

سلامت باشین 🌹

ᴶᵃᵛᵃᵈ ᴴᵃᶳʰᵉᵐᶤ ۲۵ مهر ۱۴۰۰، ۱۵:۰۴

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

Mohsen シ ۲۵ مهر ۱۴۰۰، ۱۵:۲۶

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

حصار آسمان ۲۰ آبان ۱۴۰۰، ۱۹:۳۲

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

Mohsen シ ۲۱ آبان ۱۴۰۰، ۲۰:۰۹

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

حصار آسمان ۲۲ آبان ۱۴۰۰، ۱۹:۲۰

سلامتی
والا توپم افتاده بود توی حیات شما. اومدم برش دارم :))
چشمت بی بلا

Mohsen シ ۲۵ آبان ۱۴۰۰، ۱۴:۳۷

خدا رو شکر :))

مرسی آقا لطف کردی 😊❤

سرباز مادر ۲۶ دی ۱۴۰۰، ۲۲:۰۴

سلام بر آقا محسن عزیز از آشناییتون خوشبختم
خوشحالم که قالب وبلاگتون رو برای عموم عرضه کردید
بسیار قالب زیبا و عموم پسندی است از همه نظر
با اجازتون من هم استفاده کردم 🌷
یا علی

Mohsen シ ۲۶ دی ۱۴۰۰، ۲۲:۵۰

سلام سید :) خیلی ممنون منم خوشبختم.

خوشحالم که راضی هستین!
نظر لطفتونه ممنون. اجازه ما هم دست شماست :)
علی یاورتون

سرباز مادر ۲۶ دی ۱۴۰۰، ۲۳:۳۹

آقا زرنگیا از آی پی فهمیدی 🤦🏻‍♂️
😂😂😂

Mohsen シ ۲۷ دی ۱۴۰۰، ۱۵:۱۳

بعله =) عیب نداره بابا چه مشکلی داره خوب

song sea ۰۳ مرداد ۱۴۰۱، ۱۱:۵۶

عالی استفاده کردم :)

Mohsen シ ۳۰ مرداد ۱۴۰۱، ۲۲:۲۸

سلام :) ببخشید دیر جواب میدم...

مرسی ازت ممنونم! راستی وبت چی شد؟

میــ ــم ۰۳ شهریور ۱۴۰۱، ۱۳:۵۹

چطور میشه ساید بار رو آورد سمت چپ؟

Mohsen シ ۰۳ شهریور ۱۴۰۱، ۲۰:۵۱

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

main {
    display: flex;
    flex-direction: row;
}
و به جای row بنویسی reverse-row. اینطوری سمت چپ میره.

کاربران بیان میتوانند بدون نیاز به تأیید، نظرات خود را ارسال کنند.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.
تجدید کد امنیتی