تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات

تبلیغات
تبلیغات تبلیغات

سفارشی کردن اسکرول بار در سایت وردپرسی

افزونه ها , افزونه وردپرس

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

 

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

 

مشکلات سفارشی کردن اسکرول بار

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

 

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

 

روش اول: ایجاد یک اسکرول سفارشی با استفاده از افزونه

این روش از همه‌‌ی روش‌‌ها ساده‌‌تر هست اما متاسفانه از مرورگرهای تلفن همراه پشتیبانی نمی‌‌کنه. شما می‌‌تونید خیلی راحت افزونه‌‌ی Advanced scrollbar رو نصب و فعال کنید. بعد از فعال کردن پلاگین به قسمت Settings » Custom Color Scrollbar Settings تا تنظیمات افزونه رو انجام بدید.

سفارشی کردن اسکرول بار در سایت وردپرسی

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

سفارشی کردن اسکرول بار در سایت وردپرسی

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

سفارشی کردن اسکرول بار در سایت وردپرسی

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

 

روش دوم:استفاده از CSS بدون نیاز به افزونه

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

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

با استفاده از ویژگی‌‌های CSS شما آزاد هستید که هر تغییری که خواستید رو اعمال کنید.

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


دانلود نسخه : 1.0


جایگاه ویژه تبلیغ شما در این مکان / برای اطلاعات بیشتر کلیک کنید >

هاست
مطلب مفیدی بود ؟

درخواست نصب

نویسنده : تیم محتوای 20اسکریپت 0 افزونه ها , افزونه وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=47220
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
19,976افزونه Countdown شمارش معکوس برای وردپرس تاریخ : 2013/11/22
3,474قالب وردپرس استخدام بادیگارد Prodefence تاریخ : 2017/01/26
1,828پخش موزیک در وردپرس با افزونه Background Music Player Lite تاریخ : 2019/09/16
2,800مدیریت صفحه پرداخت در ووکامرس با افزونه WooCommerce Checkout Manager تاریخ : 2019/03/12
3,274افزونه ارسال فیلم و عکس در نظرات وردپرس Comment Images and Videos تاریخ : 2018/01/11
6,608بهینه سازی افزونه فرم تماس 7 در وردپرس تاریخ : 2017/09/3
1,440افزونه ایجاد منو موبایل برای وردپرس Morph تاریخ : 2019/06/5
11,219افزونه وردپرس فرم ساز حرفه ای WP Form Builder تاریخ : 2015/03/20
4,296افزونه دریافت و نمایش قیمت محصولات WHMCS در وردپرس تاریخ : 2018/08/31
1,548افزونه تغییر قالب مدیریت وردپرس Musik تاریخ : 2019/10/27
7,519نمایش تصاویر به صورت مربعی در وردپرس با افزونه Photo Gallery تاریخ : 2017/08/13
2,452جستجوی زنده و آژاکس در وردپرس با افزونه i-Search Pro تاریخ : 2019/04/10
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات