November 10, 2006

Random message widget (no Edit HTML!)

Phydeaux3 and Hoctro discovered the unannounced Blogger's feature that allows third party widgets to be added to your blog with just a click of a button! Only HTML/Javascript widgets can be added like this. Other type of widgets like Label etc don't seem to be supported (atleast as of now). I was thinking about how to make best use of this feature. This is mainly helpful for those who don't have much clue about HTML etc. I thought if the widget is customizable, it will make a big difference. I have developed one such widget with which you can display your choice of quotes/messages randomly (changes with every page view/refresh). I have the widget in my sidebar showing randomly chosen Einstein quotes.

While I was wondering what would be a good hack using this feature, I came across Annie's hack to generate random quotes. I thought this is a good hack that people would want to use, preferably without the hassle of editing HTML. Before trying it, I would suggest you to first go through Phydeaux3's post and familiarize yourself with this new Blogger feature.

Got the idea? Now, goto this widget creator page which allows you to specify your own choice of upto 10 messages. Click on "Generate code" button and then add the widget to your blog (If you understand what's going on, you can even edit the code). After you add the widget, it will appear in your blog sidebar (with the title that you specified). You can use the layout editor to move it wherever you want. As always, your feedback is most welcome.

By the way, Vivek has a few nice hack posts too - one that explains how to display widgets only on post pages (which have more free space than main page) and another to add a wider sidebar like the one I have. He has explained them both in much detail and so it will be easy to understand.


Diego said...

I switched to beta just few days ago and I'm working to a new layout in order to exploit at the best the possibilities offered by the new Blogger.
Your blog is my favourite source of inspiration and I'm learning a lot!

Anonymous said...

Nice job madman!

A great example of the usefulness of these new widgets. Excellent work.

Unknown said...

Thank you senior!

Hoc Tro Viet said...

Excellent, Ramani, you got it down in one page with your short, concise writing style as always.

I think I saw some code in my fav book "DHTML Utopia: Modern Web Desing using JavaScript & DOM" chapter 2, an example on "signing up for free beer" where one could dynamically add a new input field from an "Add another friend" button. Check it out when you have some free time.

This idea is brilliant though, generate code to send to the button!!! I'm amazed!!! This does open all kinds of possibilities. Thanks for providing yet another source code example.



Vivek Sanghi said...

Ramani, I was wondering if this hack can also be made into some thing that generates quote in real time. It keeps cycling through the quote without having to refresh at a fixed time interval. I see in your blog's widebar, you have readers comments (the text, not the links). This can be put into such a quote generator thus saving space on widebar. what say?
Anyways nice hack, interface to enter the quotes and generate the code and nice quotes as well :)

Unknown said...

Hoctro, you could come up with some such dynamic widget too.

You seem to be quoting several nice books. Google is my only source of examples as I don't read any books for this.

Unknown said...

Vivek, as always you have a nice twist over my idea. I will try it when I get a chance.

Sharon Pickering said...

Ramani, great way to spruce up the code!

LOUI$$ said...

ramani,thanks a lot,but what is the use of this hack??

Unknown said...

OMG, louiss. The use is that you can show your own set of quotes randomly in your blog without bothering to edit HTML etc.

LOUI$$ said...

i m a noob for this subject,thanks to your explaination!i have learn a lot from you!

Jessi said...

Ramani! it's been a while, great new hacks you have come up with! while trying to do the label/peekaboo drop down, i think i messed up somewhere? :( I did it fine a few months ago on my usual blog, but now im lost again.

any suggestions? thanks so much!

Unknown said...


You seem to have removed peekaboo code in your wedding blog. Is it because it didn't work? I wonder what was broken.

So, you're getting married, hah! Congratulations!!

Priya said...

Ramani, I am fine with the quotes and works well. Just wanna know how to add few images when the quotes are displayed random. It is so plaina nd just wanna add few images like flowers.

Unknown said...


Right now i don't have the ability to add an image.

Jenni said...

Hi Ramani,

I went to the Widget Creator Page and followed the steps, but only the title is actually showing on my blog (no quotes). Any ideas?

Thanks so much

Unknown said...


You seem to have used double quotes for each quote. I didn't expect that. You have to use single quote instead. Sorry about that.

kelana61 said...

hi.... check it at my blog....

nice hack, thanks :)

Women on the Verge said...

I used your generator, but nothing showed up on my blog:
I am very new at this... any suggestions?

Women on the Verge said...

Found the issue.... sorry to bug you! I had double quotation marks... stupid!

Women on the Verge said...

After driving annie nuts I finally got the peekaboo post hack to work. I also used the random quote generator with success. Okay, so I'm a newbie and waaay too proud of myself. To get to the point, is there an EASY way to add more quotes? I'd like to have more than ten...

Alain said...

Random Quotes Display Device For New Blogger— A Button Option?
Hi Ramani,

I have a special request for improving a very original and cool blogger toy. I don’t know if this Random Quotes Diplay Device works with Neo Template.

I'm using a Random Quotes Display Device on my blog Union Point in the section entitled Orientation Express. This hack called Quote a Day Widget for Blogger has been created by Yogi.
The Random Quotes Display Device version from Yogi that I'm using displays a new quote each time a page is loaded or refreshed. The quote storage in a blog post seems limitless.
I really enjoy this easy to manage Random Quotes Display Device but I would like to add to it a button option that would allow the possibility to display a quote on request without loading or refreshing the page when a visitor choose to use the button.

I have requested that option to Yogi and he has answered me that it was something easy to do —a question a few simple lines of codes to add he wrote—and that he was going to do it. For some reason not totally clear to me he has announced recently that his blog was now closed. The button solution might be easy but I'm not a hacker and I can't figure out how to do it on my own.

Would you please help me with this button option? No rush!

I would like to preserve the function that allow to display a new quote each time a page is loaded or refreshed and add the possibility to display a quote on request without the refreshing of the whole page. Visitors would then have two possibilities for displaying a new quote: 1) loading or refreshing a page and 2) using a button that would only display a new quote without loading or refreshing a page.
Here is a model of the Modified Random Quotes Diplay Device that I’m trying to describe.

Are you willing to give a try?