Animated-Rotating text quotes

I'm a huge fan of inspirational quotes and have been on the lookout for "scripts" 
This one seems to work well so far and will generate a new quote automatically or until you change the page.

Create a new Posts >> Edit HTML Tab and just paste the following JavaScript
 and CSS Codes within the Blogger HTML Editor.

Add these 3 lines

<!-- MyBloggerLab Quote Rotator -->

<link href="https://drive.google.com/open?id=0B1Fxft67CB1zdkZ3YldjMlgxNWM" rel="stylesheet"></link>

<script src="https://drive.google.com/open?id=0B1Fxft67CB1zcFN6UldvSlFQTWc" type="text/javascript"></script>

 <script>

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

  $('#words').quoteRotator();

 });

 </script>

<!-- MyBloggerLab Quote Rotator -->

Then add the following HTML code into the Blogger HTML Editor so that you can create the rotating and animated text quotes such as... 

<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.</li>

</ul>

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

mybloggerlab.com
http://www.jqueryscript.net/rotator/jQuery-Quote-Rotator-with-A-Slim-Progress-Indicator-simpleQuote.html


EXAMPLE::
.cbp-qtrotator { width: 800px; height: 180px; position: relative; float: left; margin: 0; padding-top: 11px } .cbp-qtcontent { width: 100%; height: auto; position: absolute; min-height: 180px; top: 0; z-index: 2; display: none } .cbp-qtrotator .cbp-qtcontent.current { display: block } .cbp-qtrotator blockquote { margin: 40px 0 0 0; padding: 0 } .cbp-qtrotator blockquote p { font-size: 2em; color: #888; font-weight: 300; margin: 0.4em 0 1em } .cbp-qtrotator blockquote footer { font-size: 1.2em } .cbp-qtrotator blockquote footer:before { content: '― ' } .cbp-qtrotator .cbp-qtcontent img { float: right; margin: 50px 0 0 50px } .cbp-qtprogress { position: absolute; background: #47a3da; height: 1px; width: 0%; z-index: 1000 }

Quote 1

Author 1

Quote 2

Author 2

Quote 3

Author 3

...