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

فرقی نمی‌کنه وبلاگ شما درباره تکنولوژی، هنر، سرگرمی، سبک زندگی، آموزش یا موضوعات شخصی باشه؛ طراحی منعطف ورنا برای انواع وبلاگ‌ها مناسبه.

در توسعه این قالب از Tailwind CSS، DaisyUI و Swiper استفاده شده تا امکانات تعاملی و نمایش روان محتوا در کنار طراحی مدرن فراهم بشه.

دموی آنلاین قالب ورنا

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

مشاهده دمو: ورود به وبلاگ آزمایشی ورنا

اطلاعات خرید و دریافت قالب

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

قیمت قالب ورنا: ۸۵۰ هزار تومان

برای خرید، مبلغ رو به شماره کارت زیر واریز کنید:

شماره کارت: 6219-8614-2719-8303 سامان محمودی

بعد از پرداخت، تصویر رسید رو از طریق تلگرام برام ارسال کنید تا فایل‌های قالب رو در اختیارتون قرار بدم. آیدی تلگرام: @bonikaaa

امکانات و ویژگی‌های قالب ورنا

ورنا مجموعه‌ای از امکانات ظاهری و کاربردی رو در خودش جای داده تا هم مدیریت وبلاگ راحت‌تر باشه و هم بازدیدکننده تجربه بهتری هنگام مطالعه مطالب داشته باشه.

۸ تم رنگی با قابلیت تشخیص حالت سیستم

۸ تم مختلف شامل ۴ تم روشن و ۴ تم تیره در قالب قرار گرفته. بازدیدکنندگان می‌تونن از طریق تنظیمات یا نوار ناوبری، تم دلخواهشون رو انتخاب کنن.

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

استوری‌های تصویری و ویدئویی

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

تنظیمات اختصاصی امکانات

برای مدیریت راحت‌تر قالب، شش گزینه اصلی در بخش تنظیمات کد قرار داده شده که هرکدوم رو می‌تونید مستقل از بقیه فعال یا غیرفعال کنید:

• اعلان‌ها: نمایش پیام‌ها و اعلان‌های شناور.
• داستان‌ها: فعال‌سازی بخش استوری در صفحه اصلی.
• اسلایدر: مدیریت نمایش اسلایدی تصاویر مطالب.
• نظرات: فعال‌سازی رابط اختصاصی ارسال و مشاهده نظرات.
• ناوبری و بارگذاری: نمایش مطالب صفحات بعدی بدون بارگذاری مجدد صفحه.
• دسترسی سریع: نمایش دکمه بازگشت به ابتدای صفحه.

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

پوستر خودکار و اسلایدر تصاویر

اولین تصویر هر مطلب به‌صورت خودکار به‌عنوان پوستر انتخاب می‌شه. در صورت وجود تصاویر بیشتر، امکان نمایش اون‌ها به‌صورت اسلایدر فراهمه.

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

نمایش زمان انتشار به‌صورت هوشمند

به‌جای تاریخ ثابت، زمان انتشار مطالب به شکل‌هایی مثل «۱۰ دقیقه پیش»، «۲ ساعت پیش» یا «۳ روز پیش» نمایش داده می‌شه تا اطلاعات مطالب همیشه خواناتر و جذاب‌تر باشن.

نشان‌گذاری مطالب مورد علاقه

بازدیدکنندگان می‌تونن مطالب مورد علاقه‌شون رو ذخیره کنن و از بخش نشان‌شده‌ها در نوار پایین قالب، هر زمان که خواستن دوباره به اون‌ها دسترسی داشته باشن.

سیستم اختصاصی نظرات

بخش نظرات ورنا با طراحی گفت‌وگومحور و ظاهری متفاوت آماده شده. در انتهای هر مطلب، دو تب مجزا برای ارسال نظر و مشاهده دیدگاه‌ها وجود داره.

نظرات کاربران در سمت راست و پاسخ‌های مدیر وبلاگ در سمت چپ نمایش داده می‌شن تا ارتباط بین کاربران و مدیر وبلاگ شکل مرتب‌تری داشته باشه.

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

اشتراک‌گذاری و نمایش حرفه‌ای محتوا

گزینه‌های کپی و اشتراک‌گذاری مطالب در دسترس بازدیدکنندگان قرار دارن. همچنین تایپوگرافی و چیدمان محتوای مطالب با دقت طراحی شده تا نوشته‌ها و تصاویر با نظم مناسبی نمایش داده بشن.

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

ناوبری و بارگذاری بدون رفرش

با فعال بودن این قابلیت، محتوای صفحات بعدی، بدون بارگذاری مجدد کامل صفحه نمایش داده می‌شن. البته ورود به صفحات اختصاصی مطالب همچنان به شکل معمول انجام می‌شه.

طراحی اختصاصی بخش‌های مختلف وبلاگ

در کنار صفحه اصلی، صفحات آرشیو و صفحات جداگانه هم با طراحی اختصاصی و هماهنگ با ظاهر اصلی قالب آماده شدن.

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

نوار ناوبری ثابت و دسترسی سریع

نوار ناوبری شناور برای دسترسی راحت‌تر به بخش‌های اصلی در نظر گرفته شده که شامل خانه، نشان‌شده‌ها، جستجو و تنظیمات می‌شه. دکمه بازگشت سریع به ابتدای صفحه هم برای راحتی بیشتر کاربران فراهم شده.

سایر امکانات

• نمایش اعلان‌ها به‌صورت Toast.
• نمایش بخش بارگذاری هنگام بارگذاری اولیه سایت.
• مدیریت تم توسط بازدیدکننده.
• اسلایدر تصاویر با قابلیت زوم و نمایش تمام‌صفحه.
• نمایش خودکار سال جاری در فوتر با امکان تعیین سال شروع فعالیت وبلاگ.

محتویات فایل خریداری‌شده

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

برای راحتی نصب، فایل installAllTemplates.txt هم داخل بسته قرار داده شده که کد کامل صفحات اصلی، آرشیو و صفحات جداگانه رو شامل می‌شه.

شرایط استفاده از قالب

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

آموزش نصب قالب در بلاگفا

برای نصب ورنا نیازی به دانش برنامه‌نویسی ندارید. فقط کافیه مراحل زیر رو انجام بدید:

• فایل installAllTemplates.txt رو باز کنید.
• تمام کدهای داخل فایل رو انتخاب و کپی کنید.
• وارد پنل مدیریت وبلاگ در بلاگفا بشید.
• از قسمت ویرایش قالب، تب صفحات اصلی رو باز کنید.
• کد قالب قبلی رو به‌طور کامل حذف کنید و کد کپی‌شده رو جایگزین کنید.
• در نهایت تغییرات رو ذخیره کنید.

با همین روش، هر سه بخش صفحات اصلی، آرشیو و صفحات جداگانه به‌صورت یکپارچه نصب می‌شن.

نکته: فایل‌های تفکیک‌شده هم در بسته وجود دارن؛ اما پیشنهاد می‌کنم برای نصب راحت‌تر از فایل installAllTemplates.txt استفاده کنید.

تنظیم تاریخ و ساعت وبلاگ

یکی از مهم‌ترین تنظیمات قبل از استفاده از قالب، انتخاب فرمت صحیح تاریخ و ساعته.

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

نمونه فرمت صحیح: 2026/11/02 20:24

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

مدیریت امکانات از طریق کد قالب

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

تنظیمات پیش‌فرض به این صورته:

const SITE_SETTINGS = {
  showNotifications: true,
  showStories: true,
  showSlider: true,
  showComments: true,
  ajaxPagination: true,
  backToTop: true,
};

برای تغییر تنظیمات، فقط کافیه مقدار هر گزینه رو تغییر بدید:

• true: قابلیت فعال باشه.
• false: قابلیت غیرفعال باشه.

معنی گزینه‌ها:

• showNotifications: نمایش اعلان‌های شناور.
• showStories: نمایش بخش استوری‌ها.
• showSlider: فعال بودن اسلایدر تصاویر.
• showComments: استفاده از سیستم اختصاصی نظرات.
• ajaxPagination: بارگذاری صفحات بعدی بدون رفرش.
• backToTop: نمایش دکمه بازگشت به بالا.

مثلاً اگر قصد دارید بخش استوری رو غیرفعال کنید، فقط مقدار مربوط به اون رو به شکل مقابل تغییر بدید: showStories: false,

به همین سادگی! نیازی به حذف گزینه‌ها یا تغییر نام اون‌ها نیست. فقط مقدار true و false رو تغییر بدید.

پیشنهاد: قبل از هرگونه تغییر در کد، یک نسخه پشتیبان از قالب فعلی نگه دارید.

تغییر تم پیش‌فرض قالب

اگر می‌خواید قالب از ابتدا با یک تم مشخص نمایش داده بشه، می‌تونید مقدار ویژگی data-theme رو در تگ HTML قالب تغییر بدید.

تم‌های قابل استفاده عبارت‌اند از:

light
dark
cupcake
fantasy
lofi
dracula
halloween
black

کافیه نام تم موردنظرتون رو در مقدار data-theme قرار بدید. به طور مثال <html data-theme="lofi"> بازدیدکنندگان همچنان می‌تونن از طریق تنظیمات یا نوار ناوبری، تم دلخواه خودشون رو انتخاب کنن.

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

برای مدیریت استوری‌ها، در ابتدای کد قالب بخشی با نام stories قرار داده شده. اطلاعات هر استوری داخل این قسمت نوشته می‌شه و شما می‌تونید بدون تغییر سایر بخش‌های قالب، استوری‌های دلخواهتون رو اضافه یا ویرایش کنید.

ساختار یک استوری به شکل زیره:

<script>
const stories = [
  {
    story_avatar: "آدرس تصویر نمایه",
    story_name: "نام استوری",

    story_content: [
      {
        slide_media: "آدرس تصویر یا ویدئو",
        slide_caption: "توضیحات استوری",
        slide_link: "آدرس لینک",
        slide_link_title: "عنوان لینک",
      },
    ],
  },
];
</script>

معرفی گزینه‌های استوری

• story_avatar: آدرس تصویر نمایه استوری که در صفحه اصلی نمایش داده می‌شه.
• story_name: عنوان استوری که زیر تصویر قرار می‌گیره.
• story_content: مجموعه اسلایدهای مربوط به استوری.
• slide_media: آدرس مستقیم تصویر یا ویدئو.
• slide_caption: متن توضیحی روی اسلاید.
• slide_link: آدرس صفحه مقصد.
• slide_link_title: عنوان لینک یا دکمه.

اضافه کردن استوری و اسلاید جدید

برای اضافه کردن استوری جدید، یک آبجکت دیگه با همین ساختار داخل آرایه stories قرار بدید و اطلاعاتش رو وارد کنید.

اگر می‌خواید یک استوری چند اسلاید داشته باشه، کافیه آبجکت‌های بیشتری داخل آرایه story_content قرار بدید و بین اون‌ها کاما بگذارید.

برای حذف یک استوری هم می‌تونید آبجکت مربوط به اون رو به‌طور کامل از آرایه stories حذف کنید.

چند نکته مهم:

• آدرس تصاویر و ویدئوها باید مستقیم و قابل دسترسی باشن.
• برای هر استوری می‌تونید چند اسلاید تعریف کنید.
• برای هر اسلاید امکان قرار دادن متن و لینک جداگانه وجود داره.
• هنگام ویرایش، آکولادها، براکت‌ها، کوتیشن‌ها و کاماها رو با دقت حفظ کنید.

اگر با JavaScript آشنایی ندارید، پیشنهاد می‌کنم فقط مقادیر داخل کوتیشن‌ها رو تغییر بدید و ساختار اصلی کد رو دست‌کاری نکنید.

یک راه ساده‌تر هم استفاده از هوش مصنوعیه! می‌تونید فقط بخش stories قالب رو به هوش مصنوعی بدید و لینک تصاویر، ویدئوها و توضیحات موردنظرتون رو ارسال کنید تا کد استوری‌ها رو براتون آماده کنه.

چند پیشنهاد برای استفاده بهتر از ورنا

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

حرف پایانی

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

امیدوارم ورنا تجربه متفاوت و جذابی از وبلاگ‌نویسی براتون بسازه. از همراهی و اعتمادتون ممنونم.