Simple Disappearing Effect Using Jquery

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 11 Comments

We can tweak our blogs run on blogger/blogspot with simple jQuery scripts to make it more unique and attractive. One such attractive effect is the disappearing effect. In this article, I'll explain a simple disappearing effect that you can apply to any widget on your blog. So, let's get started. Just click on the link below to see a live demo of the hack.

SIMPLE DISAPPEARING EFFECT - LIVE DEMO

Interesting, is it? Let's see how it works! Before I start off, I would like to inform you that this tutorial is just an example to illustrate the disappearing effect. You may apply the same to any widget on your blog provided the code is wrapped with a div tag that calls the class 'pane'.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned step 1.

.pane { margin:0; padding:0; }
.pane .delete { position: absolute; padding-left:560px; cursor: pointer;}

Note: You may change the padding as per your wish.

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");});
});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog. I suggest you to use the Google hosted jQuery files as mentioned in the coding above for better loading time.

5. Now, just insert the tag class="pane" with any div tag on your blog. Next, include a tag say class="delete" with your image or anchor tags and save your template. To better understand what I blabbered in the last line, take a look at the following example (the code which I used on the post editor to show you the live demo).

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;">
<img class="delete" src="http://2.bp.blogspot.com/-NPBNBvzaABI/TiKdofaU0qI/AAAAAAAABUc/_msXzLYi-Ls/s1600/btn-delete.gif"/>
<h3>Sample Heading</h3>
<div style="text-align: justify;">
This is just a sample post to check out the disappearing effect on blogger. If you like this effect, then read the tutorial on www.newbloggingtipz.com! We've more interesting tutorials out there! So, go check out the site right now!!!!</div>
</div>

Note: You may use the above coding in your post editor and realize the same effect on your blog, as well. To change the border color, change the color codes (highlighted in green). Change the heading (highlighted in blue) and content part (highlighted in pink) as you want! I guess the other customizations are pretty self-explanatory. So, give it a shot & I bet you'll like it!

I used the disappearing effect for the subscription box on my demo blog. Where do you intend to use this on your blog? Let us know via comments! Let's see the creativity in you:)

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Tutorials, jQuery