.:::. MSue RoomZ .:::.: Calendar Icon Pada Post Date Header

30 March 2010

Calendar Icon Pada Post Date Header

hak milik Sue

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaiamana nak buat Calendar Icon Pada Post Date Header .

1. Login ke Blogspot .

2. Klik Settings - Formatting

3. Cari Date Header Format

4. Setkan seperti dibawah .

YYYY-MM-DD

5. Save Setting

6. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

7. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

<head>

8. Copy kod dibawah ini .

<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'/>

9. Pastekan di bawahnya .

10. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

<data:post.dateHeader/>

11. Tukarkannya dengan kod dibawah ini

12. Cari kod di bawah ini atau seumpamanya .

/* Posts
-----------------------------------------------

13. Copy kod dibawah ini .

/* 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;
}

14. Pastekan diatasnya .

Note : Pada highlight gantikan ngn salah satu URL Kalendar dibawah .

KLIK SINI -->