Using a Calendar Icon as the Post Date Header

به اين تصوير توجه کنيد براى قراردادن اين چنين آيکنى براى تاريخ در وبلاگ خود مراحل زير را دنبال کنيد:

مرحله اول

1) ابتدا به قسمت Dashboard | Settings | Formatting برويد

2) فرمت تاريخ را به مانند زير تبديل کنيد YYYY-MM-DD يا (2008-01-12)
3) تغييرات را ذخيره کنيد

مرحله دوم

1) به قسمت Dashboard | Template | Edit HTML. برويد
2) بررورى تيک عبارت Expand Widgets کليک کنيد
3) به قسمت برويد و کد زير را در قسمت زيرين آن قرار دهيد

<!-- orangevolt calendar widget -->
<script src='http://anniebluesky.googlepages.com/fastinit.js'/>
<script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
<script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

کد زير را در قالب خود پيدا کنيد
<data:post.dateHeader/>

5) کد زير را با عبارت بالا تعويض نمائيد
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>

6) در نهايت کدهاى‌ِ زير را به قسمت CSS قالب خود اضافه کنيد

/* Calendar
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}

span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}

span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}

به جاى لينک قرمز بالا تصوير زير را دانلود کنيد و هر کدام از اشکال گرافيکى دالخواه را توسُط برنامه گرافيکى فتوشاپ جداکرده و استفاده نمائيد


Download

منبع