Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 10, 2007

Digg This Story

JavaScript for Quote of the Day

If you are wondering whether I manually add a Quote of the Day, the answer is no. I have used a simple JavaScript to display a new Quote everyday. There are a few JavaScript codes written by several people - some make you pay to buy their program, while others allow you to tap on to their Quotes database. I was looking for something simple, and unfortunately a number of those I found online do not work.

In the end, I looked up books and came up with a simple JavaScript which stores quotes and authors in a format called “arrays”. I keyed in 31 quotes and the script will display a new quote every day of the month.

If you would like to add one, go to Template ->Page Elements and click “Add a Page Element” to the place you want your Quote of the Day to appear. Add a "HTML/JavaScript".

The JavaScript I have used for the Quote of the Day you see in this site is as follows:-

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<!-- http://tips-for-new-bloggers.blogspot.com/ -->

<table border="1" cellpadding="20" bordercolor="#ADD8E6">
<tr>
<td bgcolor="#E0FFFF">
<a href= "http://quotes-motivational-inspirational.blogspot.com/"> Quote of the Day</a>
<p></p>

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[1]="Friendship is far more tragic than love. It lasts longer.";

quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";

quotes[3]="";

quotes[4]="";

quotes[5]="";

quotes[6]="";

quotes[7]="";

quotes[8]="";

quotes[9]="";

quotes[10]="";

quotes[11]="";

quotes[12]="";

quotes[13]="";

quotes[14]="";

quotes[15]="";

quotes[16]="";

quotes[17]="";

quotes[18]="";

quotes[19]="";

quotes[20]="";

quotes[21]="";

quotes[22]="";

quotes[23]="";

quotes[24]="";

quotes[25]="";

quotes[26]="";

quotes[27]="";

quotes[28]="";

quotes[29]="";

quotes[30]="";

authors[0]="Erma Bombeck";

authors[1]="Oscar Wilde";

authors[2]="Josh Billings";

authors[3]="";

authors[4]="";

authors[5]="";

authors[6]="";

authors[7]="";

authors[8]="";

authors[9]="";

authors[10]="";

authors[11]="";

authors[12]="";

authors[13]="";

authors[14]="";

authors[15]="";

authors[16]="";

authors[17]="";

authors[18]="";

authors[19]="";

authors[20]="";

authors[21]="";

authors[22]="";

authors[23]="";

authors[24]="";

authors[25]="";

authors[26]="";

authors[27]="";

authors[28]="";

authors[29]="";

authors[30]="";

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</td>
</tr>
</table>


Allow me to elaborate what the script does.

1. I have defined a table for the Quote of the Day to be displayed in. You can of course change the “bordercolor” and “bgcolor” (background color) to whatever suits you. For a complete list of color values, you may refer to the Color Chart.

2. If you do not want a table but just a line of the Quote, simply remove these elements from the above script:-

<table border="1" bordercolor="#ADD8E6" cellpadding="20" bgcolor="#E0FFFF">
<tr>
<td>

</td>
</tr>
</table>


3. The first element of the arrays are [0]. I have for the purpose of this example entered the first 3 Quotes together with the corresponding authors' names. You can enter your favorite Quotes to fill up the remaining arrays. I have used Quotes from this Famous Motivational and Inspirational Quotes site.

4. Towards the bottom you will see this script:-

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');


What it does is to call for the numerical date. For example, the date of this posting is 10th February. The script “quotes[d.getDate()-1]” will call for the number “10” and minus 1 from this number. The result is that the Quote displayed will be the one keyed in under “quotes[9]”. The reason for having to deduct 1 is because, as mentioned above, arrays must begin with [0]. Hence, if the date were the 1st February, deducting 1 will give you a value “0”, and the displayed quote will be the one that appears under “quotes[0]”.

Once you have saved the JavaScript, refresh your Blog page, and you should now have a Quote of the Day automatically displayed on your Web Page.

Important Note: When you key in the quotations or names, do not use characters like " or ; and do not press “Enter” within the quotation marks. These are special characters which are used by JavaScript.

Change Font type, size and color

Should you want to change the font face, size and color of the quotes, you can insert the <span style> tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-

<span style="color: rgb(255, 0, 0);">TEXT</span>


Insert these tags (highlighted in red) into the above JavaScript for Quote of the Day at these places:-

<span style="color: rgb(255, 0, 0);">
<script language="javascript" type="text/javascript">
|
|
|
</script>
</span>


If you want to change the font type or color, you can do the same. Type any word in the “Compose” mode, highlight it and change the type or color through the toolbar. Go to “Edit HTML”, copy the <span style> code and insert that into the place shown above.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

40 comments:

Bichara said...

I see that you should have an url where you should have saved your quotes!
Have you got an idea on how to get a scrolling quote of the day?
thanks again

Bichara said...

hello
I have already made one!
I took the code from the script of another site, and I changed the quotes!
have a look at it!

bizwhiz said...

Hi

If you want a text to scroll, the HTML tag is one called marquee. You can control the behavior, direction, speed, width, height, etc. If it is useful for readers, I might in due course write an article on that. :)

JaN said...

Thanks for the easy to follow instrucions! I had my "quotes" up and running in no time!

Thanks again!

Gregorio said...

Thank you so very much... Easy to follow instructions! This was what I was looking for a long while. An idea for an improvement could be to have a central repository or database of quotes (something like the fortune package) and have the JavaScript look on it for new quotes. This would be great if you wanted to have more than 31 quotes stored. Thanks again and have a great day!

Gail said...

Hi

I like your quote box. I was wondering if you could help me. I would like something the same as this but would like to change the quotes to something else. I would like to change the quotes to my own messages. Can I do this and how?

Thanks
Gail

bizwhiz said...

Thanks JaN and Gregorio.

Hi Gail - If you are thinking of storing a set of your messages and have the code generate one new message a day, you can use this code, and keying in the messages into the space for quotes. If you don't want the name of author to appear, you can delete the references to author.

Cheats said...

Hi,

Is there anyway I can extend the number of quotes to exceed a month?

Is it possible to display a new quote everyday of a quarter let's say?

Thanks

bizwhiz said...

Hi cheats

I understand where you are coming from, but it is not possible using the code in this article. Let me check it out and I'll post the update. Thanks.

S said...

I'm trying to figure out how to justify the quote text I use. I've tried to change the "text-align: right" to "text-align: justfy" but haven't had any luck. Can you post the correct code?

bizwhiz said...

Hi S

I suppose you had typed the word "justify" with an "i".

Anyway, some browsers interpret "justify" as aligning left or right, not center. A number of sites have discussions on how it works on different browsers. It is a browser issue, nothing wrong with the code.

If you want the entire quote to appear in the center, it may be better to use "div" tags. Since we can't post HTML tags here, you may want to look at the examples in the "Add Digg Button" article and choose the style as "center".

Raymond said...

thanks for your share!

Susan Borgas said...

Hi there! I would like to thank you for the work that you put into your codes on your 'Tips for New Boggers' blog. I have 'tweaked' the html of your Quote of the Day widget to display a 'Pastel Hint of the Day' on my art blog. I have left your blog address intact in the code.

Also you might like to check out a post I have written about this widget at the following address. http://susanborgas.blogspot.com/2007/05/love-my-widgets.html

Thanks for sharing.

Harrison Kamau said...

Hi, i just tried installing the quote for the day on my blog,but what i get is the box with heading '' quote for the day'' but no quote. i have included quotes and authors from no. 15 and changed the [d.15]
where could i have gone wrong?
please help.

bizwhiz said...

Hi Harrison Kamau

Did you change the code from [d.getDate()-1] to [d.15]? If so the script won't work. You may want to leave the script unchanged.

If you simply want to try the script, you can insert a quote corresponding to the date of your system. If it is July 16, it will show the quote corresponding to quotes[15].

Kamau Harrison said...

I have used your quote of the day on my blogger and its great,thank you.I wish to use the same at myspace, but it specifies that it must be in CSS format and not javascript, could you give me the format in css?
Harrison

bizwhiz said...

Hi Harrison

Presently, we do not have a MySpace account to try it out. Perhaps when we have one in due course, we shall post articles on it.

Little Robin Hood said...

Hi, Jim:

Great post, what if I want to put different quote? Is that what I have to do is change URL address and type in my own quote?

Thanks

bizwhiz said...

Hi Little Robin Hood

You have to insert your quotes. The three quotes we have inserted are only examples to guide you.

Little Robin Hood said...

Dear Bizwhiz:

Thank you. See my quote at my http://story4children.blogspot.com

you made my day.

Little Robin Hood said...

Dear Bizwhiz:

The quote appears fine in my others blogs, but this one is giving me problem, http://full-time-mothers.blogspot.com
the quote font is too small to be seen, I have another "Bible womenhood box" below also too small.

Could do you help me to change it bigger?

Thank you so much
Fanny

bizwhiz said...

Hi Little Robin Hood

If you find the words small, you can enlarge them by inserting this -
<span style="font-size:130%;">

before -
<script language="javascript" type="text/javascript">

and inserting this -
</span>

after -
</script>

Little Robin Hood said...

Thank you so much. Now you can see so much clearer.

=)
Fanny

Knecht Ruprecht said...

How can I change the color of the text? Great hack, aynway ;)

bizwhiz said...

Hi Knecht Ruprecht

We have now included that into the article.

Rene23 said...

Great information!!! Can you show me how to change the code so the quote changes weekly instead of daily?

cluffgirl said...

I have tried a million times to get this to work on my blog and it just wont. I copied and pasted the format into the add a page element box and then copied and pasted the quotes I wanted. Was it bad to copy and paste? All that shows up is Quote of the day, but no quote or anything else. I followed the instructions good, i think. I put in the date and everything like you said but it wont work. Help! Please! It's such a cute idea.

bizwhiz said...

Hi cluffgirl

In Javascripts, the characters and signs like ( ) " ' have to be followed strictly. Try not modifying the code and you should be able to see your quotes.

There is nothing wrong with copying and pasting the text of the quotes or the authors' names into the space allocated, as long as the text does not contain these characters mentioned above. You can leave the authors' names blank if you don't want them.

kimof911 said...

hi

i have the same problem

i did all i can

copy paste..........didnt work
modifying.............didnt work

i really need that script but how can i get it work

thank u anyway

bizwhiz said...

Hi kimof911

You may want to doublecheck the code you typed. For example, in-

quotes[0] - you omitted the semicolon at the end
quotes[16] - there is an additional semicolon in the quotation
quotes[24] - also additional semicolon and "
quotes[25] - you omitted it altogether. If you have no quote for this day, leave the quotation blank but do not take out this code.

The above are just some errors I saw. There could be more. Go through the code. Do not enter a hard-return in between " and " You can have spacing but not hard returns.

Once the errors are corrected, you should see the quotes.

The Antiques Diva™ said...

I just wanted to say thanks for all these extremely useful tips - you're the best resource I've found!

HaCkEr said...

hello

i tried ur javascript quote in my blog but only the heading is coming but no quotes are comin...d placee is blank and it's but giving d link 2 motivational blog....
plzz help me..

bizwhiz said...

Hi HaCkEr

1. If you have followed our advice not to use characters like " or ; and hard returns within the quotations;

and

2. If you have not altered the code we have provided;

the widget should work.

Seriously Fun Self-help! said...

Hi - love the script! I'm looking for something like this for AspireNow, but I want to have 365 days, so it can be a quote of the day for a year - will that work with your script? Also, I want to add two things:

"get this widget" so that someone can rebroadcast the quotes on their website, google bar, whatever, and second, a link to www.AspireNow.com so that the quote widget drives traffic back into my website or blog.

Ideas? And, super-duper-mucho-gratitude!!!! - Scott (http://aspirenow.blogspot.com

Mattheous said...

I have a few questions:

1. How did you make the spaces between the title (Quote of the Day), the quote itself, and the author?

2. How do I change the font color, format (bold, etc) and remove the hyper link in Quote of the Day? It messes the code up whenever I try to do it.

3. How did you make the spaces in your Feeds and Bookmarks widget? I can't seem to figure out how to do it on mine.

Since it's a bit hard to explain, could you please look at my blog and see if there's a way to fix it?

http://lairofthebookworm-mattheous.blogspot.com/

Jae Baeli said...

Mine worked great until i added more quotes to it later, and now it just shows the link to my quotes, but the quotes themselves don't appear in my blog widget like they did before. I checked to make sure i entered the last ones just as i did the first ones. Can you tell me what might be wrong?
thanks,
Jae Baeli
htp://usedbythemuse.blogspot.com

Jae Baeli said...

Strike my last comment--i found an extra quotation inside the quote. When i got rid of it, the quotes showed up again.
Thanks!!!!!!!!

Jae Baeli said...

This is great, thank you.
I just have one tweak i need to do--how do i get rid of the "author" part? All the quotes are from me, on my page (so far) and so having my name under every one of them is redundant. I removed the author references in the body of the script, and then "undefined" appeared below each quote, so I tried removing the "author" text at the bottom code, in this snippet:

+ authors[d.getDate()-1]

And now the letter "y" shows up under each quote...i thought it was just printing as text and there was an extra letter in there...but no. Couldn't find anything with a y. I even looked at the text of the quote in case it was my type--but no, again--so i assume this is some coding thing, for which i have little knowledge.

Could you tell me how to do this properly?

(oh--and P.S., is there a trick to posting code here so that it won't be rejected when we need to show you the details? I know there has to be some trick to that as i see code posted elsewhere).

Thanks for your great work here.
Jae Baeli

Lorraine said...

hello.ur blog has been a very good help to me.i even put ur link in my blog. =).i was wondering is there anyway i can change the time from 1 day quote to like every 5 hours it will change quotes?

HATE LOVE said...

helow..

i want to show older post first in my blog...how it is possible>??