How to Create a Animated jQuery Quote Rotator in Blogger

Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate and precise. Therefore, they always count on a reliable source. Stuffing your articles with too many quotations might make your blog posts look lengthy, but you users might feel difficult to scroll too much. How about a jQuery Quote rotator and animator, which would not only make your quotations look remarkable but will also gather all the quotes at one place. In this article, we will show you How to create a jQuery Quote Rotator in Blogger?

Here is the preview of the widget:
  • Blogging is not about earning. Its about serving the Humanity.
  • Don't choose Blogging as your profession, unless you really have no choice!!!
  • Education is the most powerful weapon which you can use to change the world.
  • The Lift is too short, Live it or be dead.
  • Progress is the product of human agency. Things get better because we make them better. Things go wrong when we get too comfortable, when we fail to take risks or seize opportunities.
  • You can't have a light without a dark to stick it in.
  • You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty.
  • When I do good, I feel good; when I do bad, I feel bad, and that is my religion.
  • Half the money I spend on advertising is wasted; the trouble is I don't know which half.

The First thing you need to do is to login into your blogger account. Now from the blogger dashboard go to Create a new Posts >> Edit HTML Tab and just paste the following JavaScript and CSS Code within the Blogger HTML Editor.

<link href="" rel="stylesheet"></link>

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

 jQuery(document).ready(function($) {

After adding the above coding, you need to add the following HTML code into the Blogger HTML Editor so that it would help you in creating rotating and animated quotations. You can change the animation transaction depending upon your needs.

<!-- MyBloggerLab Quote Rotator -->
<div id="words">

<ul class="word-container">

<li data-author="---  Syed Faizan Ali" data-easeout="lightSpeedOut">Blogging is not about earning.
Its about serving the Humanity.</li>

<li data-author="---  Syed Faizan Ali">Don't choose Blogging as your profession, unless you really have no choice!!!</li>

<li data-author="---  Syed Faizan Ali" data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>

<li data-author="---  Syed Faizan Ali" data-easein="fadeInDown">The Lift is too shorT, Live it or be dead. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>


<div class="quote">
<div class="quote-content">
<cite class="quote-author"></cite>

Congratulations: Now publish your article and enjoy the magic. The quote would rotate automatically. However, you can skip to the next quote with ease. It would keep on rotating until you move to another webpage.

We hope this tutorial has helped you in learning how to create a Jquery quotation Rotator in Blogger. Do let us know what you think about this widget. Share your thoughts and opinions through the comments below.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


June 9, 2013 at 12:18 PM

WOW ! Awesome creativity man. Keep it up.

June 9, 2013 at 1:47 PM

where do we add the second code na

Editorial Team MOD
June 9, 2013 at 2:13 PM

You need to add both codes in Blogger Post Editor!

June 9, 2013 at 2:26 PM

you menan i should add the both codes on my post editor before writing my post? pls if there is anything to cahngen in the code pls let me know

Editorial Team MOD
June 9, 2013 at 2:45 PM

Not really, just change the quotation and that's all

June 9, 2013 at 8:04 PM

This rotate randomly, not that far.

<script type='text/javascript'>
var myTextQ = new Array();
myTextQ[0]="Quote 1"
myTextQ[1]="Quote 2"
myTextQ[2]="Quote 3"
myTextQ[3]="Quote 4"
myTextQ[4]="Quote 5"
myTextQ[5]="Quote 6"
var random=Math.floor(6*Math.random());
document.write("<div style='background:url( no-repeat top left;margin:1px 0px;padding:2px 0px 2px 4px;'>");
document.write("Quote: ");

June 9, 2013 at 8:20 PM

That Is Awesome

June 9, 2013 at 8:25 PM

well done syed ! keep it up !

June 10, 2013 at 3:09 AM

Awesome post , but professional bloggers wouldn't use this widget instead they would use the same space for advertisement !

June 10, 2013 at 4:26 AM

really nice!

June 10, 2013 at 9:02 AM

Nice But i am not going to use it

June 12, 2013 at 6:26 AM

i dont know why. this is not work on my blog.

June 12, 2013 at 8:17 PM

Thanks so much... But why I can't edit margin-botton, add background in CSS?

June 19, 2013 at 8:38 AM

can you please elloborate ??
i cannot understand ??? where to paste the code ??

June 19, 2013 at 8:45 AM

My blog too :( so sad for that :'(

June 20, 2013 at 1:56 AM


June 25, 2013 at 1:23 PM

Wow this is excellent, thanks so much!

June 29, 2013 at 6:28 AM

it's amazing and very cool.. I will try it in my blog.. thanks before

July 6, 2013 at 9:03 AM


July 13, 2013 at 10:29 PM

Can we add a next and forward button ??

August 3, 2013 at 12:57 PM

how to create database excelsheet in my blogger for direct entry
so tell me my email id is

Editorial Team MOD
August 3, 2013 at 1:08 PM

Here's a nice tutorial for that

August 11, 2013 at 7:03 PM

very nice block quote. But I need to make speed more slow. How to set up that

April 15, 2014 at 11:39 PM

the quotes are odd . .

June 4, 2016 at 3:49 PM

Again, the link does not work:

Could you give us the files for download please?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.