تنظیم نحوه نمایش لینک ها.

سوالات و پیشنهادات خود را با من در میان بگذارید:

تنظیم نحوه نمایش لینک ها

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

یکی از روش هایی که برای این تنظیمات می توانید استفاده کنید استفاده از CSS برای اعمال تنظیمات است. این تنظیمات در تاگ head تعریف می شود و با تاگ DIV اعمال می گردد.

برای شفافیت بیشتر مطلب کار را با یک مثال ادامه می دهیم.

به عنوان مثال تنظیماتی را که برای بلاگ رولینگ وبلاگ کلانتر استفاده کرده ام بدین گونه است:

ابتدا این تنظیمات به صورت زیر بین دو تاگ <head> </head> تعریف می شود.

.blogrollmain{
width:100px;
margin:1px;
padding:3px;
text-align:rightr;
font-family: Tahoma;
font-size:9px;
}
.blogrollmain a{
margin:1px;
color: #400080;
text-decoration: none; line-height:150%
}
.blogrollmain a:hover{

border-right:1px solid #400080;
border-left:1px solid #400080;

background:#FEFBFF;
color: 400080;
text-decoration: underline;
}

همان طور که می بینید این مجموعه دارای 3 بخش است. در بخش blogrollmain تنظیمات کلی مربوط به نحوه نمایش لینک ها مانند نوع فونت، اندازه فونت، راست نویس بودن فونت ها و .... مشخص می شود. و نیز لینک ها را در یک مستطیل به عرض 100 پیکسل محدود کردیم (با دستور width:100px).

در قسمت blogrollmain a تنظیمات مربوط به لینک ها در حالت عادی مشخص شده اند. مانند مشخصات فونت که اینجا فقط رنگ فونت مشخص شده است.

در قسمت blogrollmain a:hover تنظیمات مربوط به لینک ها وقتی پوینتر موشواره روی آن قرار می گیرد مشخص شده است. در این مثال این تنظیمات به نحوی اعمال شده است که وقتی موشواره روی لینک ها قرار می گیرد رنگ زمینه لینک مربوطه عوض شده و دو خط در قسمت چپ و راست لینک قرار گیرد.

CSS تنظیمات خیلی بیشتر ار آنچه در مثال بالا دیده شد را دارد. با استفاده از ویرایش گر برنامه Front Page می توانید به تمام این تنظیمات پی ببرید. برای وارد شدن به ویرایشگر برنامه، بعد از باز شدم wizard مربوط به new page زبانه Style Sheet را انتخاب کنید، در آنجا می توانید Templateهایی در این زمینه ببینید.

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

بعد از تعریف این تنظیمات برای اعمال آنها، کد مربوط به بلاگ رولینگ خود را بین دو تاگ DIV مانند زیر قرار می دهید:

کد مربوط به بلاگ رولینگ را در اینجا قرار می دهید.

</DIV>

[ Back ]