سلام
بیکار شدم گفتم یک اموزش براتون بذارم تا شاید به کار بعضی دوستان بیاد
دمو
http://tllg.net/pukbni
کل کد تبلیغات متنی
<div class="ads-text"> <a href="" title=""> مرجع قالب رزبلاگ </a> <span>نیوز برترین سایت رزبلاگی</span></div><style> @font-face {font-family: 'Mj_Silicon';src: url('http://fontonline.ir/fonts/Mj_Silicon.eot?#') format('eot'),url('http://fontonline.ir/fonts/Mj_Silicon.ttf') format('truetype'),url('http://fontonline.ir/fonts/Mj_Silicon.woff') format('woff');} @font-face { font-family: 'Byekan'; src: url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan57477.ttf') format('truetype'), url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan918614.eot?#') format('eot'), url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan650450.woff') format('woff');} .ads-text{ width:300px; text-align:center; border-left:5px solid #2980b9; background:#3498db; color:#fff; min-height:25px; line-height:1.9; font-family: 'Mj_Silicon'; font-size:13px; transition:0.5s; } .ads-text a{ color:#fff; text-decoration: none; transition:0.5s; } .ads-text:hover a{ transition:0.5s; font-size:17px; } .ads-text:hover{ transition:0.5s; box-shadow: 300px 0px #2980b9 inset; } .ads-text:hover span{ display:block; } .ads-text span{ display:none; font-size:10px; font-family: 'Byekan'; }</style>در خط اول کدمون یک div باز میکنیم و کلاس(class) اون رو برابر با
ads-text
قرار میدیم
در خط دوم داخل divـمون یک تگ a باز میکنیم که به متنمون لینک بدیم
<a href="" title="">در قسمت href آدرسی که میخوایم بهش بریم رو قرار میدیم و در قسمت title یک متن مرتبطت با لینک قرار میدیم مثلا قالب وبلاگ
در خط سوم داخل تگ aـمون
متن مورد نظرمون که دوست داریم با کلیک روی اون به آدرسی که دادیم بریم رو قرار میدیم
در خط چهارم تگ aـمون رو میبندیم
</a>در خط پنجم یک تگ باز و بسته
<span></span>قرار میدیم و در داخل اون متنی مرتبط با تبلیغات مینویسیم مثلا
نیوز برترین سایت رزبلاگی
حالا divـی که باز کردیم اول کار رو میبندیم
کد تا به الان
<div class="ads-text"> <a href="" title=""> مرجع قالب رزبلاگ </a> <span>نیوز برترین سایت رزبلاگی</span></div>اگر کد رو تست کنید میبنید که یک چیزی شبیه زیر و بدون استایل دیده میشه
http://tllg.net/GkuyHp
حالا برای اینکه این باکسمون یک استایل شیک و قشنگ بدیم باید از css استفاده کنیم
برای استفاده از css در صفحه وب دو راه وجود داره یک راه اینکه کد های css رو داخل یک فایل .css قرار بدیم و آپلود کنیم و اونو توی سایت لینک کنیم(قرار بدیم)
و راه دیگه هم استفاده از تگ
<style></style>هست که ما از روش دوم استفاده میکنیم
در خط اول خاصیت های cssـمون تا خط 11 استایلمون فونت هایی که میخوایم در این باکس استفاده کنیم رو قرار میدیم که در جلسه بعدی در مورد استفاده فونت به صورت آنلاین توضیح میدم
در خط 12 استایل هامون کلاس ads-text رو انتخاب میکنیم و به اون استیل میدیم به این صورت
.ads-text{}
و در بین
{
و
}
استایل مورد نظرمون در رابطه با اون کلاس رو قرار میدیم
در اولین استایلمون به باکس برای اون یک width یا عرض مشخص میکنی
width:300px;که من عرضش رو برابر با 300 پیکسل قرار دادم این مقدار اختیاری هست و هر اندازه ای میشه قرار داد
در خط دوم استایل کلاس ads-text به متن هامون استایل میدیم و اون ها رو با قطعه کد زیر وسط چین میکنیم
text-align:center;در خط سوم استایلمون به باکسمون یک بردر یا حاشیه میدیم
البته نه به تمام دوم تا دور اون
تنها به سمت چپش 5پیکسل حاشیه میدیم
رنگ این حاشیه رو #2980b9 قرار میدیم و استایل این حاشیه رو ساده قرار میدیم یعنی solid
کد حاشیه سمت چپ
border-left:5px solid #2980b9;حالا اگر کدتون رو تست کنید میبینید که باکستون بسیار ساده است و استایل خاصی نداره پس لازمه که برای اون یک بکگراند قرار دهیم
بنده این بکگراند رو برابر با رنگ
#3498db
قرار میدم
background:#3498db;حالا لازمه که به متن های داخل باکسمون رنگی بدیم که بهتر دیده بشن من این رنگ رو سفید یا
#fff
قرار دادم
color:#fff;برای اینکه باکسمون قشنگ تر بشه لازم هست که بهش یک ارتفاع مشخص بدیم
من به باکسمون دستور میدم که ارتفاعش از 25 پیکسل کمتر نشه ولی بیشتر مشکلی نداره
min-height:25px;حال اگر دقت کنید میبینید که متن در وسط باکس(از بالا و پایین) قرار نداره و چسبیده به بالا باکس برای رفع این مشکل باید از خاصیت
line-height:1.9;استفاده کنیم
اگر یادتون باشه در خط های اول استایلمون برای فونت کد هایی قرار دادیم حالا وقتشه از این کد ها استفاده کنیم
فونت این باکس رو برابر با
font-family: 'Mj_Silicon';قرار میدیم حالا برای زیبایی بیشتر باکسمون به باکس یک اندازه مشخص برای فونت قرار میدیم که من این مقدار رو برابر با 13پیکسل قرار دادم
font-size:13px;حالا یک کد دیگه هم به بعد از این خط کد قرار میدیم که بعد دلیلشو میگم
transition:0.5s;نتیجه کار تا به الان
http://tllg.net/RNIrlw
حالا اگر به دمو نگا کنید میبینید که به متنی که لینک دادیم رنگش عوض شده و به آبی تغییر کرده و همچنین بهه زیرش یک خط اضافه شده
برای رفع این مشکل متن هایی که لینک دار هستن رو با کد زیر انتخاب میکنیم
.ads-text a{{
برای اینکه رنگ لینک ها به سفید تغییر کنه از کد زیر استفاده میکنیم
color:#fff;و همچنین برای حذف خط زیر آن از کد زیر استفاده میکنیم
text-decoration: none;و مانند کد بالا بعد از کد بالا کد زیر را قرار دهید
transition:0.5s;اگر کد رو تست کنید میبینید مشکلاتی که گفتیم رفع شده حالا نوبت به اون رسیده که به این باکسمون یک هاور بدیم(یعنی موس میره روی باکس یک استایل خاص فعال لشه)
با خط زیر میگیم که وقتی موس رفت روی باکس تمامی متن هایی که لینک دار هستن رو سایزشون رو به 17 پیکسل در طی مدت زمان 0.5 ثانیه تغییر بده
کد این بخش
.ads-text:hover a{ transition:0.5s; font-size:17px; }خوب اگر دقت کنیید میبینید در خط اول کدی که در قسمت های قبل گفتیم اضافه کنید رو قرار دادم این کد میگه که این عملیات طی چه مدت زمانی صورت بگیره که من برابر با 0.5 ثانیه قرار دادم
و در خط دوم گفتم که فونت رو تبدیل به 17 پیکسل کن
دمو کد تا به الان
http://tllg.net/44J6uT
حالا موقع اون رسید که مشخص کنیم وقتی موس رفت روی باکس علاوه بر کار بالا یک کار دیگه هم انجام بشه
.ads-text:hover{ transition:0.5s; box-shadow: 300px 0px #2980b9 inset; }در تکه کد بالا گفتیم وقتی موس رفت روی باکس طی مدت زمان 0.5ثانیه یک سایه از سمت چپ به سمت راست بیاد با رنگ
#2980b9
کار های بالا رو انجام دادیم حالا تقریبا کار ما تموم شد حالا میرسیم به استایل دادن به متن
نیوز برترین سایت رزبلاگی
.ads-text span{ font-size:10px; font-family: 'Byekan'; display:none; }در کد بالا گفتیم که اندازه فونت این متن برابر با 10 پیکسل باشه
در خط دوم گفتیم که فونت این متن برابر با بی یکان باشه چون دوست نداریم فونتش با فونت بقیه باکس یکی باشه
و همچنین چون ما میخوایم بعد از رفتن موس روی باکس این متن نمایش داده بشه اون رو مخفی مکنیم با کد خط سوم
اگر کد رو تست کنید میبینید که این متن مخفی شده و دیده نمیشه برای اینکه با رفتن روی باکس متن نمایش داده بشه لازمه که
از تکه کد پایین استفاده کنیم
.ads-text:hover span{ display:block; }در کد بالا میگیم با رفتن موس روی باکس این متن در یک خط به نمایش داده بشه
دمو کلی
http://tllg.net/t5rxRm
تمام این آموزش رو دستی تایپ کردم و دهنم سرویس شد:دی
آموزش همراه با کد هایی که قرار دادم نزدیک به 234 خط هست
پس با نظراتتون از بنده حمایت کنید
موفق باشید @font-face {font-family: 'Mj_Silicon';src: url('http://fontonline.ir/fonts/Mj_Silicon.eot?#') format('eot'),url('http://fontonline.ir/fonts/Mj_Silicon.ttf') format('truetype'),url('http://fontonline.ir/fonts/Mj_Silicon.woff') format('woff');} @font-face { font-family: 'Byekan'; src: url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan57477.ttf') format('truetype'), url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan918614.eot?#') format('eot'), url('http://up.skinak.ir/up/skinak/upload/93/7/1/BYekan650450.woff') format('woff');} .ads-text{ width:300px; text-align:center; border-left:5px solid #2980b9; background:#3498db; color:#fff; min-height:25px; line-height:1.9; font-family: 'Mj_Silicon'; font-size:13px; transition:0.5s; } .ads-text a{ color:#fff; text-decoration: none; transition:0.5s; } .ads-text:hover a{ transition:0.5s; font-size:17px; } .ads-text:hover{ transition:0.5s; box-shadow: 300px 0px #2980b9 inset; } .ads-text:hover span{ display:block; } .ads-text span{ display:none; font-size:10px; font-family: 'Byekan'; }
