How to Integrate a Google Calendar into Your Blog

| April 25, 2011

Today, I will share how you can embed a Google Calendar into the sidebar of your blog. Featuring a calendar on your blog allows for more interactivity between you and your readers. Use it to feature upcoming events, showcase a speaking/design schedule, or highlight significant events your readers might be interested in.

In Your Gmail Account

Note: This tutorial assumes you have a Gmail account. If you don’t, consider signing up for one today.

1. After logging into your Gmail account, click Calendar in the top navigation bar.

2. A new window will open. Click the drop down arrow next to the calendar you wish to embed.

3. In the sub-navigation that appears, click Share this Calendar.

4. In the next window, make sure your calendar is marked public. Save your settings.

5. Click Calendar Details.

6. Create a distinguishing name for your calendar (if you haven’t already).

7. In the Embed this Calendar section, click Customize the color, size, and other options.

8. Choose which features you would like to appear. From a design perspective, I recommend keeping things minimalistic. I prefer to only mark Title and Date. If you are featuring events you’d like people to attend, consider also marking Time Zone.

9. Set the Width and Height of your calendar. If you are placing the calendar in your blog’s sidebar, make sure the width is smaller than the width of your sidebar. It tends to work best to make the height the same.

10. Copy the updated HTML code.

In Your Blogger Account

Note: This tutorial assumes you have a Blogger blog.

1. After logging into your Blogger blog, click Design.

2. In your sidebar area, click Add a Gadget.

3. A pop-up will appear. Scroll and find the HTML/JAVA SCRIPT gadget.

4. Click the Plus sign to add the HTML/JAVA SCRIPT gadget to your sidebar.

5. In the content area, paste the code you just copied from Google. *You can give the gadget a title if you want, but it’s not necessary, since you already gave your calendar a title. Blogger lets you leave the title blank if you choose. I recommend leaving it blank.

6. Save your changes and preview your new look. You will now see your calendar on your sidebar!

Did you find this tutorial helpful? If you followed this tutorial, leave me a comment with a link to your blog that now showcases a embedded calendar!

How To Integrate Google Calendar With WordPress | Elegant ...

How To Integrate Google Calendar With WordPress | Elegant ...