Saturday, December 16, 2006

Update:
There are subtle changes in the script so that it now supports more than 31 quotes. The limit is now technically 365, which I think is more than enough. Please edit the widget and repeat Step 3 below. For those who are interested, the changed portions are in blue.

If you have visited my personal blog, (Cheap publicity here, I know ;) ) you might have noticed a "Quick Quote Quill's Quote of the day". Do I change the quote every day? No. It is automatic. It is one of my earliest javascript codes and not specific to blogger or even for blogs. However, I made it into a widget so you can use it in Beta Blogger.

This is more than a quote fetcher. You can add whatever quotes you want. (Even quoted by you!) This code cycles a set of quotes each day, i.e., it will display a new quote each day. When it reaches the last quote in your list, it starts from the first again. And all these quotes are added by you.

You can make it a widget in your Blogger Beta blog. How? Read along:

1. First thing you have to do is create a HTML/Javascript element from your Page Layout view. Create it anywhere you like.
You probably want it just below the blog title/description block, but will see that you are not able to add or drag elements to the area just below the blog title block.
To overcome that limitation, go to Edit Template and look for this code in there.
<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="no">
<b:widget id="Header1" locked="false" title="xxxxxx(Header)" type="Header">
</b:widget>
</b:section>
</div>

The part of interest is the red-colored one - showaddelement.
The name suggests it all. Make it yes and save. You will find the "Add element" region in your layout next time.

2. Give a name you like to be the title of your quote of the day.

3. Paste the following code inside the content area of the widget:
<script type="text/javascript">
var today= new Date();
var first = new Date(today.getFullYear(), 0, 1);
var day = Math.round(((today - first) / 86400000), 0);

var numquotes = 3;
quotes = new Array(numquotes+1);
authors = new Array(numquotes+1);
quotes[1] = "Quote_1";
quotes[2] = "Quote_2";
quotes[3] = "Quote_3";
authors[1] = "Author_1";
authors[2] = "Author_2";
authors[3] = "Author_3";
var ran = (day % numquotes) + 1;
document.write(quotes[ran] + '<p style="text-align: right"><i>' + authors[ran] + '</i></p>');
</script>

Note the red colored regions. This is where you make your customisations.
You can modify the text (Quote_1, Author_1 etc.) to the quotes of your choice.
You can leave the Author text blank, i.e. just the "".
(Technically, the quote text too, but that doesn't make sense, does it?)

4. You can even add new quotes.
I have given an example with 3 quotes. You can give as many quotes as you want.
For that, add a new line just below the last quote line (quotes[3] = "Quote_3"; in this case).
The line should read like quotes[4] = "YOUR_QUOTE";
(You know what to fill in instead of YOUR_QUOTE)
Similarly, add a new authors line.
authors[4] = "YOUR_AUTHOR";
Also change numquotes to 4.

Remember, you can add more quotes in a similar fashion.
Just make sure that the

numquotes=N;
quotes[N]="";
and
authors[N]="";

lines tally.

5. Save the widget. Save the template.

0 comments:

Post a Comment

By :
Free Blog Templates