[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...
-
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...
-
A couple of months ago I indited an article on 10 Reasons To Stop Visually Watching TV. I was half expecting resistant replies, but was sur...
-
Still on the Infinix Hot X507 android smartphone, here is an interesting tutorial that would aid those who intend using glo bis on the devi...
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