I wanted to show random quotes on my blog’s sidebar but unfortunately I could not find a single widget for this purpose. Then I found a few Java Scripts on Random Texts and Random Quotes. All of them were not good for the job. Then finally I got a code from www.JavaScriptBank.com which I was able to adapt for Blogger. Let's see how to install and customize it.
Installation
The installation is simple, just take a HTML/JavaScript gadget and copy and paste the following code on it:
1. Log into the blogger Dashboard
2. Click on the Design tab
3. Click on Add a Gadget in your desired location (on click a new window will appear)
4. From the new window Select HTML/JavaScript
5. Give a Title of the Gadget if you wish, such as: Random Quotes
6. Paste Random Quotes Widget code under Content section
7. Click Save
<p id="textrotator">(Loading...)</p>Save it and you are done. In case, you are new on Blogger and don’t know how to add a gadget then follow the undermentioned procedures:
<script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()
// QUOTATIONS
Quotation[0] = '“ First Quote.” - <a href="#">Author</a>';
Quotation[1] = '“ Second Quote.” - <a href="#">Author</a>';
var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];
setTimeout('rotateEvery('+sec+')', sec*1000);
}
rotateEvery(2);
</script>
<span style='font-size:75%;float:right;'>Powered by <a href='http://inkoflife.blogspot.com/'>Ink of Life</a></span>
1. Log into the blogger Dashboard
2. Click on the Design tab
3. Click on Add a Gadget in your desired location (on click a new window will appear)
5. Give a Title of the Gadget if you wish, such as: Random Quotes
6. Paste Random Quotes Widget code under Content section
7. Click Save
Customization
Changing Quotes
Write your quote in the place marked in red and the author's name in the place marked in green:
Number of Quotes
You can add as many quotes as you wish. By default I have provided provision for two quotes. You can include more quotes in the following way:
Adding Hyperlink
You can add a link to your individual quotes with related pages. To do so just replace the # with the desired link:
That means after addition of the link your code will look like something like this:
You can increase or decrease the timing if you wish. For Example in the following example I have set the duration to 12 seconds:
Changing Duration
By default the duration is set to 2 seconds. For example:
You can increase or decrease the timing if you wish. For Example in the following example I have set the duration to 12 seconds:
Some Issues
By chance your quote contains any apostrophe then replace it with this code:
