[TUTORIAL] How To Add A Animated Quote To Blogger Blog
06:37
| Posted by
GameHack
|
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.
Subscribe to:
Post Comments
(Atom)
Latest Update
-
There is this thing that is bothering me about our so called network provider, I don't know if you feel the same........ Let's co...
-
No matter how important or easy the shortcuts are, we often forget or ignore some of them due to reasons like very little use or awkward p...
-
According to SEO perspective blog page title or post title is the most important factor. Post titles play major role in ranking your bl...
-
T oday am going to explain to us how we can install cyanogenmod on HTC Desire This guide will walk you through the process of taking the de...
Categories
- affordable data subscription (7)
- free browsing (6)
- free live tv (2)
- hacking (2)
- live streaming (2)
- making money (3)
- mobile cheat (8)
- pc cheat (13)
- seo (2)
- success tips (6)
- wealth creation (3)
Like us on Facebook
Archives
-
►
2016
(3)
- ► 06/05 - 06/12 (3)
-
▼
2015
(18)
- ► 05/03 - 05/10 (1)
- ▼ 04/19 - 04/26 (3)
- ► 03/22 - 03/29 (1)
- ► 03/01 - 03/08 (1)
- ► 02/22 - 03/01 (1)
- ► 02/01 - 02/08 (5)
- ► 01/25 - 02/01 (3)
- ► 01/18 - 01/25 (1)
- ► 01/11 - 01/18 (2)
-
►
2014
(10)
- ► 12/28 - 01/04 (3)
- ► 12/21 - 12/28 (2)
- ► 12/14 - 12/21 (1)
- ► 08/24 - 08/31 (1)
- ► 04/13 - 04/20 (1)
- ► 04/06 - 04/13 (2)
0 comments:
Post a Comment
we love comment