Wednesday, 26 February 2014

Tagged under: ,

How to add a Animated Quote to Blogger Blog

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
  • It is the mark of an educated mind to be able to entertain a thought without accepting it.li>
  • 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.

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

3 comments:

  1. You are making my blog better and better! really like this :D Keep bringing more!

    ReplyDelete
  2. thank u for code keep going

    ReplyDelete
  3. That idea is flawless, bookmarked. Thank you :)

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism