Sometimes the article we write on our blogs needs to back up by quotes and we mostly placed them in quotation marks which is obviously the most common way of displaying equations in blogger blogs. Mostly the people which are running tech blogs or inspirational blogs used quotation on daily basis. Quotations we as blogger use in our blogs normally includes press release, some authorities has said some things on their product release or regarding an update of products or service. Quotes are a highlight point of your blog post which needs to be presented in a better way to grab reader attention. So today we will show you how to add a animated quote to blogger blog.

These are animated rotating quote which keeps on rotations and includes lots of effects such as fade in and fade out. See the demo of animate quote below with all possible effects that are told in this tutorial.



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

<!-- Probloggertricks 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.

Congratulations you have successfully added animated quotes in your blogger posts. Now your blog articles will look more professional and readers will enjoy too.

0 comments:

Post a Comment

we love comment

Related Posts Plugin for WordPress, Blogger...

Latest Update

Social Button


Like us on Facebook

Search





Total Pageviews