ورود | ثبت‌نام
سورس پروژه قالب HTML فروشگاهی سایت دیجی کالا (digikala) رایگان

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

با خرید قالب HTML دیجی کالا، یک قالب HTML شخصی به ارزش 250 هزار تومان هدیه دریافت نمایید

  • آیا تازه شروع به یادگیری طراحی سایت کردی و دنبال نمونه کدهای کاربردی و مناسب بازار کار می گردی؟
  • یا دانشجو هستی و باید پروژه ای رو آخر ترم تحویل استادت بدی.
  • یا بک اند کار هستی و نمی خوای هزینه چند ده میلیونی بابت طراحی قالب استاتیک سایت کنی.
  • یا طراح قالب وردپرس هستی و دنبال یه قالب HTML فروشگاهی حرفه ای مطابق سلیقه ایرانی می گردی.
  • یا می خوای داخل یک شرکت معتبر طراحی سایت استخدام بشی و به اون شغل به شدت نیاز داری و باید رزومه کار حرفه ای برای استخدام بفرستی.
  • یا مدرس طراحی سایت هستی و دنبال نمونه کد کاربردی برای تدریس می گردی.
  • اصلا نگران نباش، چرا که تیم توسعه میهن جاوا اسکریپت یک قالب HTML فروشگاهی حرفه ای تحت عنوان قالب HTML مشابه سایت دیجی کالا منتشر کرده که نیاز شما رو مرتفع میکنه که برای اطلاعات بیشتر روی دکمه مشاهده پیشنمایش قالب HTML دیجی کالا کلیک نمایید.
مشاهده پیشنمایش قالب HTML دیجی کالا

نحوه سفارشی کردن نوار اسکرول بار سایت دیجی کالا به دو روش پلاگین و CSS

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

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

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

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

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

حالا در این بخش از مجموعه آموزش های رایگان و پروژه محور HTML | CSS قراره به صورت کامل خدمتتون سفارشی سازی کردن نوار اسکرول بار سایت دیجی کالا رو به دو روش استفاده از پلاگین و بدون پلاگین فقط با CSS خالص آموزش بدم تا یک اسکرول بار جذابی مشابه سایت دیجی کالا حتی حرفه ای تر برای سایتتون ایجاد کنید.

در این آموزش رایگان ابتدا پلاگین NiceScroll.js رو مورد بررسی قرار می دهیم و در آخر با استفاده از یکسری سلکتور های CSS به اسکرول بار پیش فرض مرورگر استایل می دهیم که تا حد بالایی به طرحی که در نظر داریم در بیاید.

نکته ای که وجود داره اینکه که زمانی که از سلکتور های مربوط به اسکرول بار در CSS استفاده می کنیم مرورگر فایرفاکس از این سلکتور ها پشتیبانی نمیکنه، زمانی که استفاده بشه سایت در مرورگر فایرفاکس اسکرول بارش همون اسکرول بار پیش فرض مرورگر میشه.

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

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

علیرضا روشنایی
علیرضا روشنایی

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...

مجموعه آموزش های رایگان و پروژه محور HTML | CSS

به میهن جاوا اسکریپت خوش اومدی ، اینجا میتونی مینی پروژه های کاربردی HTML و CSS که مد نظر داری رو پیدا کنی،آموزش های میهن جاوااسکریپت کاملا از صفر تا صد طراحی شده و تمامی آموزش ها به زبان فارسی و مناسب جهت ورود به بازار کار تولید شده.آموزشی که مشاهده کردید بخشی از مجموعه آموزش های رایگان و پروژه محور HTML و CSS هستش که توصیه میشه برای یادگیری بیشتر مباحث اچ تی ام ال و سی اس اس به ترتیب، آموزش های رایگان و پروژه محور زیر رو مشاهده نمایید:

نظر/پرسش/پیشنهاد شما

برای ارسال نظر لطفا ابتدا وارد شوید.

لینک مقاله کپی شد
img دریافت قالب
۱۴۰۳/۰۷/۲۵