کد خبر : 396 تاریخ انتشار : جمعه 3 اکتبر 2008 - 7:18

استایل بندی لینک ها

Rate this post

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

این نمونه ساده ی کد یک لینک هست

<a href=”http://Example.com“>Text</a>

Text

شما باید یه اطلاعات کلی در مورد استایل نویسی داشته باشید. اگه ندارید می تونید از کدی که براتون گذاشتم استفاده کنید و این آموزش رو اجرا کنید.

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

<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>

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

<div id=”pagin”>
<a class=”sel”>1</a><a href=”/a.htm”>2</a>
<a href=”/b.htm”>3</a>
</div>

دوستانی که کپی می کنند لینک منبع یادشون نره.

این هم یه کد کلی و کامل :

<html>
<head>
<title>CSS used in Pagination</title>
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
</head>
<body>
<div id=”pagin”>
<a class=”sel”>1</a><a href=”/a.htm”>2</a>
<a href=”/b.htm”>3</a>
</div>
</body>
</html>

اگه این کد رو توی Notepad ویندوز ببرید و با یه اسم مثل Demo.html ذخیره کنید می تونید این عمل رو ببینید.

دسته بندی : آموزش ، استايل
دیدگاهتان را بنویسید

This site uses Akismet to reduce spam. Learn how your comment data is processed.

nava در تاریخ 23 نوامبر 2009 گفته : پاسخ دهید

شما فوق العاده هستین
ممنون

نیما در تاریخ 14 جولای 2009 گفته : پاسخ دهید

salam aziz
khoubi?
aziz rank weblog man to google 1 hast age khasti ba ham tabadole link va logo konim

ابوالفضل کوچولو در تاریخ 10 نوامبر 2008 گفته : پاسخ دهید

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

غفور در تاریخ 18 اکتبر 2008 گفته : پاسخ دهید

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

eber در تاریخ 8 اکتبر 2008 گفته : پاسخ دهید

SALAM BE WEB LOG MAN HAM 1 SAR BEZAN MAMNON

WWw.xeber2mrk.blogfa.com

صالح خان در تاریخ 7 اکتبر 2008 گفته : پاسخ دهید

آقا قالب ما هنوز آماده نشده ! ۳ روز شد ۶ روز . میدونم خیلی سرتون شلوغه ولی به فکر ما هم باشین من منتظر قالب هستم و بازدید از سایتم داره روز به روز کمتر میشه .

saeed در تاریخ 6 اکتبر 2008 گفته : پاسخ دهید

با سلام و عرض احترام خدمت مدیریت سایت
اینجانب سید سعید حسینی راد از وب سایت پربار شما دوست گرامی بازدید کردم .
مطالبتان را خواندم ، واقعا جذاب بودند و قابل این بودند که انسان رو به فکر ببرند بعضی هاشون .
اینجانب درخواستی از شما بزرگوار نیز داشتم .
میخواستم اگر ممکن است با همدیگر تبادل لینکی داشته باشیم .
رنک وب سایت بنده ۳ می باشد و دومین های دیگرم که به وب سایتم نصب می باشد نیز دارای رتبه ۱ و ۲ می باشند . در کل چهار تا دارم که همشون دارای رتبه هستند و به یک وبسایت وصل هستند .
حال در صورت ممکن مرا با نام ” کلیپ های موبایل ” یا هر نام دیگر لینک کنید سپس افتخار بدید و نام خود را برایم بفرستید تا سریعا لینکتان کنم .
امیدوارم جسارت نشود این که اول شما لینک نمایید .
بالاخره یکی باید اول لینک کند دیگر درسته ؟
نوکرتونم و شما آقایی .
منتظرت می مونم
موفق باشید
خدانگهدار
www.iran-mob.ir
www.irancell.ws
www.parsi-mob.ir
www.parsi-mob.com

رتبه در الکسا ۱۰۰۰
www.parsi-mob.ir
رتبه در الکسا ۲۰۰۰ .
www.irancell.ws

فقط در ۴ ماه
آمار بازدید روزانه هم روزی +۶۰۰۰می باشد .

پیمان در تاریخ 5 اکتبر 2008 گفته : پاسخ دهید

جالب بود اگه میشه این روشو برای سیستم بلاگفا به من توضیح بدین!متشکّر

omid در تاریخ 4 اکتبر 2008 گفته : پاسخ دهید

با عرض سلام و خسته نباشید.
من مدیر سایت ۴news.ir هستم و میخواستم ببینم که اگر شما سایت ما را لایق بدونید با هم تبادل لینک کنیم.

ممنون

خدانگهدار

مسعود در تاریخ 3 اکتبر 2008 گفته : پاسخ دهید

علی جان آموزش خوب و کاملی دادی ممنون….

میلاد در تاریخ 3 اکتبر 2008 گفته : پاسخ دهید

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

خواهشاً اگه راهی بلدی از طریق آف گذاشتن به من بگو
ممنون

علی در تاریخ 3 اکتبر 2008 گفته : پاسخ دهید

فدات مسعود جان…