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:
Be Informed Whenever a New Post is Published.
If you enjoyed this article, SUBSCRIBE now for FREE to get regular updates delivered to your E-mail inbox.Your E-mail is safe with us - No spam, we promise.
your 'quotes' widget works fine for me. Even after getting about 200,000 visitors to my http://badaqga.wordpress.com blog, I am still learning how to do the same with my blogger blog http://badaga.in [and make some money - sob sob??]
ReplyDeleteUnfortunately, all I get in the published Quotes widget is
ReplyDeleteLoading...
It will work great but how do i display single line in multi-line and auther name in middle at the last line all in bigger font size and different color?
ReplyDeletethank you in advance
thanks you..
ReplyDeleteThank you! This is working a treat on my blog.
ReplyDeleteGreat tutorial. Thanks for nice sharing.
ReplyDeleteCute Love Quotes | Love Failure Quotes | Fanous Movie Quotes
how can I change the color to red or blue, or how can i change the font?
ReplyDeleteThis method really work well. Thanks for sharing!!
ReplyDeleteAmazing Healthy Tips
ReplyDelete