I have two blogs: blog.susam.in (this one) and notes.susam.in. I use the latter to take notes without caring much about comprehensibility. I wanted a nifty TODO list somewhere in that blog to keep track of what I would like to learn or write about in future. However, I didn't want the TODO list to appear by default. I wanted it to be hidden like an easter egg. In this post, I'll explain how I solved this problem.

First, let me show you how the TODO list behaves. If you visit http://notes.susam.in/, you wouldn't find any TODO list anywhere in the web page. However, if you append ?todo to the URL or in other words visit http://notes.susam.in/?todo, you'll find a TODO list in the top right corner.

I created the TODO list as an HTML/JavaScript gadget. This could be done by visiting the Blogger dashboard, clicking the 'Design' link under the required blog, clicking 'Add a Gadget' under the 'Page Elements' tab and selecting the 'HTML/JavaScript' gadget.

Next, I moved to 'Edit HTML' tab and found that the id attribute of the new widget had a value of HTML7 in the blog template.
So, I edited the blog template to add this CSS.
#HTML7 {
    display: none;

#layout #HTML7 { display: block; }

The CSS for the #HTML7 selector ensures that the new gadget is not displayed when the page loads. However, this causes one problem. This makes the gadget invisible in the 'Page Elements' tab as well and hence makes it difficult for us to edit this gadget. So, I needed some way to make the widget visible in the 'Page Elements' tab only.

The panel in the 'Page Elements' tab where we can drag and rearrange gadgets is an HTML iframe element.

On viewing the source of this frame, I found that the body element had an id attribute with a value of #layout.

Thus, I came up with the CSS for #layout #HTML7 selector to make the gadget visibile in this frame.

So, with the gadget visible in the 'Page Elements' tab and invisible in the blog, I needed a quick way to make the gadget visible in the blog whenever I wanted. I wrote and appended the following JavaScript code to the HTML/JavaScript gadget I used to create the TODO list.

var todoGadget = document.getElementById('HTML7')
if (document.URL.search(/[?&]todo\b/i) != -1) {
    todoGadget.style.display = 'block'
} else {
    todoGadget.style.display = 'none'


TeCh_GuY said:

Awesome post and was wondering if you mind me putting a link to this page on my blog? Going to add a "How to" gadget list on it. www.pcrtechsc.net

Susam Pal said:


Please feel free to put a link to this page on your blog. As far as I know, you don't need to ask the author of some content on the web to put a link to it. It's only while copying or redistributing content that you need a proper license or permission from the owner of the content.

Post a comment