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

515 بازدید
پنج شنبه ۲۰ اسفند ۱۳۹۴
تغییر رنگ لینک های باز شده در سایتReviewed by جواد نبوی on Mar 10Rating: 3.0

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

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

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

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

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

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

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

a:visited{
 color:blue;
 }

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

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

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

a:visited{
 color:blue;
 text-shadow:#000 0 0 2px;
 }

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

.class a:visited{
 color:blue;
 }
تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

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