mehdi.web
Member
با سلام خدمت تمامی دوستان خوبم . چند روز پیش داشتم با سیستم میهن بلاگ ور میرفتم و نسخه جدیدش رو تست میکردم که یکدفعه یه دکه مظرمو به خودش جلب کرد . این دکمه ارسال مطلب توی میهن بلاگ نسخه جدید خیلی قشنگ طراحی شده . اولش فکر میکردم که طراحیش خیلی سخته ولی بعد از یه سری سوالاتی که توی توییتر از دوستان پرسیدم ، فهمیدم کار زیاد سختی هم نیست درست کردن این دکمه . بعد افتادم به جون CSS بعد از حدود ۱۵ دقیقه کار تونستم درش بیارم که هم کد هاشو این زیر توضیح میدم و هم واسه دانلود میزارم .توضیح کد ها :خب اول از همه یه فایل HTML درست کردم و توش چند تا دایو (div) تعریف کردمو و بهش کلاس دادم
[HTMLS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>دکمه ارسال مطلب در میهن بلاگ | مهدی خسروی</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--از این قسمت کد های مربوط به دکمه شروع میشه -->
<div class="menu_ver2_top">
<a href="http://mihanblog.com/blog/post/new"
title="" class="" target="_self">ارسال مطلب</a><br /><br /><br /></div>
<!--اینجا هم کد های مربوط به دکمه تموم میشه -->
</body>
</html>[/HTMLS]
بعد از این کار رفتم توی سی اس اس (css) و شروع کردم به استایل دادن به دکمه و لینک هاش :
[CSSS]/******************************این قسمت کد های سی اس اس مربوط به دکمه شروع میشه
******************************/
.menu_ver2_top{
margin-top:20px;
}
/******************************
تنظیماتی که وقتی موس روی دکمه میره
******************************/
.menu_ver2_top a:hover{
box-shadow: 0px 0px 3px #555;
background-color: #49B300;
direction:rtl;
}
/******************************
تنظیمات حالت معمولیه دکمه
******************************/
.menu_ver2_top a{
background-color: #49B300;
border: 1px solid #358300;
color: #FFF;
padding: 7px;
width: 100px;
text-align: center;
border-radius: 2px;
text-decoration:none;
font-family:tahoma;
font-size:12px;
padding-right:10px;
padding-left:10px;
float:right
}[/CSSS]
و نهایتا نتیجه رو میتونید از اینجا به صورت آنلاین ببینید .
یه اینکه توسط لینک های زیر دانلود کنید :
دانلود با لینک مستقیم
دانلود از سرور پیکو فایل
دانلود از سرور مدیا فایر
دانلود از سرور دروپل
دانلود از سرور گوگل داکس
روی سرور های مختلف آپلود کردم تا اگه یکی از لینک ها مشکل داشت اون یکی سالم باشه
موفق باشید
مهدی
آخرین ویرایش:
