Tuesday, September 04, 2007

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 -->
<br><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></center>
<center><a style="font-size: 3mm" href="http://www.free-blog-content.com/">Free Blog Content</a></center></br>

Update 11 March 2010: <center> and </center> has been deprecated and should be replaced by <div style="text-align:center;"> and </div>. Further, all tags must be closed by matching closing tags or be self closing so either get rid of <br> or replace it with self-closing <br />

The script above thus become:

<!-- 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.

12 comments:

  1. hey, i wana ask what is "technorati"?? wat is the use?

    ReplyDelete
  2. thanks for answering my concern on calendars! where do i insert the code though, if i'm using a template instead of the blogger layouts?

    ReplyDelete
  3. =isleng=- said...

    thanks for answering my concern on calendars! where do i insert the code though, if i'm using a template instead of the blogger layouts?
    --------------------------------

    When you say template, I assume you are using the old classic Blogger template. Refer to Add content via the template for a guide as to where you should paste it.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  4. Hi Peter!

    Thanks for leaving a comment in my blog Rant and Rave particularly in my post, Zazzafooky. I had to remove your comment, though. It split my template into three! Plus there’s a huge black line to the left of my screen…

    ReplyDelete
  5. Hi =isleng=

    Sorry about that. I think it must have been caused by a long unbroken URL I forgot to remove. Must take care to remember next time.

    Peter (Blog*Star)
    Alternatives to AdSense

    ReplyDelete
  6. Do you know if there is any calendar that I can add events and when people scroll over the dates, they are able to see what events available? :)

    ReplyDelete
  7. Hi Ren,

    Sorry, haven't come across any calender like that.

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  8. hey tell me in detail how to add a calender or cloak in my blog

    ReplyDelete
  9. The way to do it has already been described in this post. However, I will update it so that the script will be in compliance with XHTML plus add the word gadget for page element plus put link to explain Blogger gadget (page element)

    ReplyDelete
  10. Peter - If you are still answering questions, I want a birtday and event calendar gadget that allows for RECURRING events (birthdays, anniversaries, etc.) This would be a way to click on an event on the calendar, wish someone happy birthday, or add a comment. Is there anything like this in Google to add to my blog page?

    Thanks in advance

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics