Display Multi Text in Animation for blogger/Websites

Many times we share some text or inspirational quote on our blog. When we want to show multitext, we either show in the form of list or use <marque> HTML. But that techniques are quite old now a days. Lets think to change these text with quite nice animations based on  jQuery.
In this tutorial we will learn to display multi quotes like text which changes with different animations after a few seconds time span.

*LIVE DEMO CAN BE SEEN IN THE RIGHT SIDE OF THE HEADER OF THIS BLOG

Lets see how to add this to our Blogger Users.

1. Go to the blogger dashboard.
2. Chick on template and switch to template Editor.
3. Search for the </head> tag.
4. Paste the below code just above the </head> tag. 

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet" />
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>  

1. Once you have pasted it to Editor click on save Button.
2. Then go layout. And click on the Add a Gadget button on respectively place  you want to display text.
3. Choose HTML/JavaScript and paste the Below HTML part of the Widget.

<!-- BuildNextWeb Codes -->
<div id="words">
<ul class="word-container">
<li data-author="--- Aristotle" data-easeout="lightSpeedOut">It is the mark of an educated mind to be able to entertain a thought without accepting it.</li>
<li data-author="--- Nelson Mandela " data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>
<li data-author="---  Aristotle " data-easein="fadeInDown">The roots of education are bitter, but the fruit is sweet.</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>

Now, change the text as per your requirements and click save button.
Similarly same thing can be added to WordPress By placing the first Code under </head> and other code where you want ot place the Text.
Hope uhh enjoy our post.
Do a favor like us on Facebook, since we are new to Blogging
@BuildNextWeb