Thursday, February 2, 2012

Random Quotes Widget for Blogger Blogs



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:
<p id="textrotator">(Loading...)</p>

<script language="JavaScript">

function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = '&ldquo; First Quote.&rdquo; - <a href="#">Author</a>';
Quotation[1] = '&ldquo; Second Quote.&rdquo; - <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>
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:

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


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:

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:



12 comments:

  1. 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??]

    ReplyDelete
  2. Unfortunately, all I get in the published Quotes widget is

    Loading...

    ReplyDelete
  3. 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?
    thank you in advance

    ReplyDelete
  4. Thank you! This is working a treat on my blog.

    ReplyDelete
  5. how can I change the color to red or blue, or how can i change the font?

    ReplyDelete
  6. This method really work well. Thanks for sharing!!

    ReplyDelete
  7. Awesome website! Your style is so fresh in comparison with most other people. Thanks for posting whenever you have the opportunity to, I will be sure to save your website! seo company in jalandhar
    | website designing in jalandhar | web designing in jalandhar | it company in jalandhar

    ReplyDelete

Random Posts

Visitors

free counters

Add Us in Your Circles

  © Ink of life 2017 | Privacy Policy

ProBlogger Template by Ourblogtemplates.com

Back to TOP