/ در آموزش طراحی وب, اشتراک رایگان / توسط
آخرین زمان ویرایش:

تغییر رنگ لینک های باز شده در سایت

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید)


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

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

 

 

 

برای اینکه ببینیم چطور میتوانیم رنگ لینک های باز شده را تغییر دهیم یا هایلایت کنیم با ادامه ی این آموزش همراه باشید.

 

 

تغییر رنگ لینک های باز شده در سایت

هر چند برای متخصصان طراحی وب و آنهایی که با HTML و CSS آشنایی دارند, انجام این کار بسیار ساده است. اما ممکن است بعضی از دوستان, با نحوه انجام اینکار آشنا نباشند. بنابراین سعی میکنم کاملا واضح و قدم به قدم توضیح دهیم.

۱- فایل استایل قالب یا سایتتان را باز کنید. (در وردپرس به بخش نمایش>>ویرایشگر بروید و صفحه “شیوه نامه” را باز کنید)

۲- در انتهای کد های موجود در فایل استایل یا شیوه نامه, قطعه کد زیر را اضافه نمایید.

 

[code lang=”js”]a:visited{
color:blue;
}[/code]

 

۳- صفحه را ذخیره نمایید.

 

 

 

راهنمایی: کد بالا لینک های بازدید شده را با رنگ آبی نمایش می دهد. در کد بالا به جای عبارت blue میتوانید رنگ دلخواهتان را قرار دهید. میتوانید رنگ مورد نظرتان را به صورت کد های رنگی Hex قرار دهید. مثلا کد رنگ سیاه ۰۰۰# است. همچنین اگر با CSS آشنایی داشته باشید میتوانید ویژگی های دیگری نیز برای لینک های کلیک شده یا بازدید شده تعیین نمایید. مثلا در کد زیر لینک های بازدید شده همراه با یک سایه سیاه نمایش داده می شوند.

 

 

 

 

[code lang=”js”]a:visited{
color:blue;
text-shadow:#000 0 0 2px;
}[/code]

 

 

 

راهنمایی: کدی که در بالا معرفی کردیم, قابلیت تغییر رنگ را برای تمامی لینک های موجود در سایت فعال میکند. اگر میخواهید فقط لینک های موجود در عنصری خاص به این صورت در آیند از کد زیر استفاده کنید و به جای عبارت class , نام کلاس عنصر مورد نظرتان را قرار دهید.

 

 

[code lang=”js”].class a:visited{
color:blue;
}}[/code]

 

 

 

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

نوشته های مشابه

خواندن ادامه مطلب به ازای ثبت نام در سایت

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

فرم جستجوی ایجکسی برای وردپرس

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

 پشتیبانی تلگرام

نظری بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × پنج =