Display Automatically Rotating Quotes on any Webpage

Many websites tend to display these sorts of widget on their blog that provides plenty of useful, mind developing information like quotes and messages from famous people. Well you can even rotate your own written quotes and messages using this simple script. So this script I am providing will automatically rotate all the quotes with fixed time interval. So this could be pretty useful for your readers if you working on a blog to show them some good work.

You can see a working demo of this script above in the image and I hope I might be still using this on my blog, so you can check the live version working above. Or you can even check the embedded version of this script below. I tried implementing this in this post itself.

How to Display Automatically Rotating Messages in any Website or Blogger Blog

Now either you are on Blogger or Wordpress platform or you want to implement this in any of your Website, this is going to work without any issues in any platform.

1. If you are on Blogger then embedding this rotating quotes and messages is a breeze, you just need to copy and paste the below code into your HTML/JavaScript Gadget.
2. You can navigate to Blogger > Layout > Add Gadget, choose HTML/JavaScript Gadget.
3. Add below code into it and Save the Gadget.

   <style type="text/css">#HUquotes{background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Ww_-ppAlmIdsbooXYZMqUffxrWLCtcDtS4jtTC1mM_g0Cwr0fVKblT7eSfLuPjJFTttrTMLJj3uIQL6bM9ogEoSM2Xsbljsn07blIys5geHC5YAns55KKGEe7i2abIXhgFte2uXGdMaJ/s1600/bg.jpg)no-repeat;background-size:cover;min-height:25px;padding:20px;font-family:times new roman;font-size:16pt;text-shadow:1px 1px black;letter-spacing:2px;text-transform:uppercase;text-align:center;vertical-align:middle;color:#ffffff}</style>

    

   <script type="text/javascript">//<![CDATA[
   var quote=new Array();
   quote[0]='"Happiness is when what you think, what you say, and what you do are in harmony."';
   quote[1]='"The best way to find yourself is to lose yourself in the service of others."';
   quote[2]='"Live as if you were to die tomorrow. Learn as if you were to live forever."';
   quote[3]='"It is health that is real wealth and not pieces of gold and silver."';
   quote[4]='"A nations culture resides in the hearts and in the soul of its people."';
   quote[5]='"Prayer is the key of the morning and the bolt of the evening."';
   quote[6]='"The greatness of a nation can be judged by the way its animals are treated."';
   quote[7]='"Three things cannot be long hidden - the sun, the moon, and the truth."';
   quote[8]='"The mind is everything. What you think you become."';
   quote[9]='"You will not be punished for your anger you will be punished by your anger."';
   var speed=2000;var q=0;function showQuote(){document.getElementById("HUquotes").innerHTML=quote[q]; q++;if(q==quote.length){q=0;}}setInterval('showQuote()',speed); //]]></script><div id="HUquotes"></div>

4. Now I have highlighted all the messages above with the color, you can change them according to your need and you can also increase the amount of messages as you like. Just copy the and paste the codes as you can see above.
5. If you want to implement this on a normal webpage, then you need to include the CSS mentioned in a separate Styles.CSS file and then add the code where ever you would like to display the widget.

---

So guys I hope you enjoyed this another awesome tutorial on how to implement automatically rotating quotes and messages in your blogger blogs or even a webpage, do comment if you face any problems implementing this script, I would be happy to help you out with implementing this easily.