Wednesday, 23 April 2014

How to Add Animated Quote in Blogger

Most of the times we usually share any value point, insipration, quote or anything which we need to show to all of our visitors. Mostly the people which usually are running technical blogs as well as inspirational websites used saying on every day basis. Quotations many of us as blogger used in our websites normally includes press release, some authorities has explained some things on their product release or about an update of items or support. Quotes are a highlight point of your blog submit which has to be presented in a means to grab reader interest. So right now we will disclose how to add an animated quote to blogger blog.
You can check the live demo of this amazing and interesting widget below in this post.

LIVE DEMO

  • It is the mark of an educated mind to be able to entertain a thought without accepting it.
  • Education is the most powerful weapon which you can use to change the world.
  • The roots of education are bitter, but the fruit is sweet.
  • It's fine to celebrate success but it is more important to heed the lessons of failure.
  • You can't have a light without a dark to stick it in.
  • If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.

How To Add A Animated Quote To Blogger Blog



  • To add animated quotes to your blogger blog first you have to create a new post >> HTML tab and add the following piece of codes.

<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>

  • Once you are finished with adding above code also adds the following code at that place of post where you want the quotes to be rendered.

<!-- MyBloggerBuzz Quote Rotator -->
<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>

You can change the quote to your own quotes these are added just to guide you.


Final Words:

Congratulations you have successfully added animated quotes in your blogger posts. Now your blog articles will look more professional and attractive than before. It's your turn now to share this post with your friends and write your views in comments till then Happy animating.

No comments:

Post a Comment