Want To Insert Calander Bar at Side Of Yours Post iN blogger Then it is Possible, Just you Have to Do is to Log on to your Blogger Profile First after that Follow Below Steps.
1. Open the Dashboard >> Settings >>Formatting
2. Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
3. Save settings.
That gives the correct Date format to work with this script. Let's continue.
1. Open the Dashboard >> Template >> Edit HTML.
2. Check the Expand Widgets Template box.
3. Find the <Head> tag and paste the following code under it.
<!-- 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 -->
Next you will locate this code in your template:<data:post.dateHeader/> And Replace It With Below Code.<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
Last step >> This is where you can customize the font used, color of font, float the icon to the left or right, and where you add your calendar image. In the CSS Style Sheet, Add Below code:
/* 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;
}
If you have a calendar icon upload it to your webhost (Like for Ex Ripway). Put your Calendar Image URL in the above code. Or, Download this set of icons and take your pick.!!
Previous
Home
0 comments:
Post a Comment