Calendar for your blog

If you want a calender for your blog like the one second from the top of the right sidebar (position may change as I add or take away Page Elements) of Technology Articles, this is how you can do it.

Go go Plain Calendars, chose the calendar you like (note that at the top of the page, there are other categories of calendars, so if you don't like the example calendar I chosed, you can always go for a different one). Below the example of the calender is a box containing the script to display the calendar. Click on the inside of the box and press ctrl+A (or right-click on your mouse and select "select all") to highlight all the script, click ctrl+C (or right-click on your mouse and select "copy") to copy the script into clipboard, and I think it is advisable to open a Notepad file and paste the script into Notepad (probably best to do it twice so you have an original and you have one you can edit. The calendar I selected for the above post has the script

<!-- FREE-BLOG-CONTENT.com -->
<div style="text-align:center;"><iframe src="http://www.free-blog-content.com/Calendars/calendar00411.htm" width="120" height="150"
marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"></iframe></div>
<div style="text-align:center;><a style="font-size: 3mm" href="http://www.free-blog-content.com/">Free Blog Content</a></div>

Note that the width and height of the calendar is 120 and 150 respectively (highlighted in red above). The width of the sidebar of Natural Remedies is 150 pixels, so I would like to change its width to 148 pixels. (To learn how to find the width of your blog sidebar, refer to How to find the width of your blog Header, sidebars, main column (click BACK button to get back to this page). I opened Irfanview (click BACK button to get back to this page). I then click IMAGE > CREATE NEW (EMPTY) IMAGE from the menu bar at the top and then input the image width=120 and image height=150. Click OK and a new empty image will be created. I then click IMAGE > RESIZE/RESAMPLE and then keeping the "Preserve aspect ratio" ticked, I edited the width to 148 and the height automatically changed to 185 to keep the aspect ratio constant (that is, the calendar will not be distorted). With the edited script, I then sign into Blogger (Dashboard) and click LAYOUT for the relevant blog from the list of blogs. I click ADD A PAGE ELEMENT in the left sidebar and selected HTML/Javascript. I pasted the edited script for the calendar into the box and click "Save changes" and a new HTML/Javascript Page Element appear at the top of the left sidebar of the LAYOUT. I drag and drop the new HTML/Javascript Page Element to the second from the bottom of the left sidebar, then click "Save" at the top right of the LAYOUT. The result is as you see it.

I originally wanted to demonstrate this in the blog Computers, Internet and Search Engine Optimization (SEO) but found out that the blog uses a fluid width sidebar (which means the width of the sidebar changes with the screen resolution of the visitor. This complicates matter because I will then have to size the calendar to the smallest screen (resolution) to avoid problems. I have a way of doing it, but I think I will leave that for another post. Posted by Peter @ Enviroman