Create a Animated jQuery Quote Rotator

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:

You can't have a light without a dark to stick it in.

--- Arlo Guthrie (1947 - )

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="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>

<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>

 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

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>

</ul>

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

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.

http://www.mybloggerlab.com/2013/06/how-to-create-jquery-quote-rotator-in-blogger.html