0
Tags:
Blogger gadgets,
jquery,
Tricks,
widgets
Fade out effect for blogger using jQuery
Past few months I had been studying jQuery , And also I worked hard and made a simple fade out using jQuery . Fade out effect is very easy to use and it is also very stylish . When I started studying jQuery i had aim that I should at least do a simple widget for blogger . Within 3 days in studying i created a simple fade out effect for blogger . You can either use in blogger posts nor as a widget .
Demo
<script src='http://code.jquery.com/jquery-latest.js'/>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'/>
Step 4: Save your template
While posting go to Edit Html tab and add the following
<p>Your Text here</p>
<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
Rename the Text in black with your text .
Remember that the text you entered must be inside the tags <p> and </p> , If you enter the text without <p> tag it will not work .
That's it Fade out effect had been added to your blog's side bar and to posts! . Wait for my next post , in my next post I will tell how to add fade in as well as fade out to posts and widgets . If you can't wait subscribe to our blog and get it as email .
 |
| jQuery Fade out |
Demo
How to add it ?
Step 1 : Go to Blogger Dashboard-->Design-->Edit Html
Step 2: Click on the expand widget templates
Step 3: Find </head> and Paste the below code before it
<script src='http://code.jquery.com/jquery-latest.js'/>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'/>
Step 4: Save your template
How to add it to posts and as a widget?
Adding to posts
While posting go to Edit Html tab and add the following
<p>Your Text here</p>
<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
Rename the Text in black with your text .
Remember that the text you entered must be inside the tags <p> and </p> , If you enter the text without <p> tag it will not work .
Adding it as widget
Adding it as widget is easy . Follow the instructions below
- Go to blogger dashboard-->design-->Page elements
- And click add gadget and select Html/JavaScript
- And paste the code with your text.
Subscribe To Get FREE Tutorials!
Tags:
Blogger gadgets,
jquery,
Tricks,
widgets
Subscribe to:
Post Comments (Atom)
Share your views...
0 Respones to "Fade out effect for blogger using jQuery"
Post a Comment