Simple Disappearing Effect Using Jquery

Disappearing-effect-blogger
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!

    Other Recommended Posts

  • Blogger Tutorials, jQuery
Beben Koben said on July 23, 2011 at 5:08 PM :

so interest...btw your CSS is clash...
we can't add position absolute, that make float: right no work!
try it...
.pane {
border: 1px solid rgb(9, 68, 136);
padding: 10px;
}
.delete {margin: 3px 3px;
cursor: pointer;
float: right
}
.pane p {
text-align: justify;
padding-top: 10px;
}
This HTML
<div class="pane">
<img class="delete" src="http://2.bp.blogspot.com/-NPBNBvzaABI/TiKdofaU0qI/AAAAAAAABUc/_msXzLYi-Ls/s1600/btn-delete.gif" />
<p>
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!!!!
</p>
</div>
nice to meet you ☺

REPLY
Mukund said on July 23, 2011 at 5:42 PM :

@Beben Koben: Well, your right! I forgot to update the codes after fixing the stuffs on the demo blog. I guess it should work fine now! More over, it is not necessary that you need to mention absolute in the CSS part. It'll work even without that! You may try it and let me know! By the way, thanks for the comment:)

REPLY
SHREE MADHAN said on July 24, 2011 at 8:11 AM :

wow awesome i hav been searching for this code since last year thanx
http://smahkin.blogspot.com/

REPLY
Mukund said on July 24, 2011 at 10:22 AM :

@SHREE MADHAN: I'm glad that you found what you wanted on my blog! I would like to see the application of this effect on your blog! So, let me know once you implement this on your blog! Anyway, thanks for the comment buddy!

REPLY
SHREE MADHAN said on July 24, 2011 at 2:55 PM :

my idea is to make a sticky bar on top of my blog
can you tell me how to add that thing
and tell me how to add google adsene code in centre of each post
http://smahkin.blogspot.com/

REPLY
Mukund said on July 25, 2011 at 1:47 AM :

@SHREE MADHAN: Well, that's a good idea! You may refer to the previous articles on my blog to add a sticky bar - use the archives page to search for better results. Regarding the Adsense stuff, ping me on gtalk. I'll help you out there!

REPLY
Anonymous

learned a lot

REPLY
Rajib Kumar said on July 25, 2011 at 12:11 PM :

Hey Mukund, please share how to create 404 page and how to use them.

REPLY
Mukund said on July 25, 2011 at 1:25 PM :

@Rajib Kumar: Yup! I'm not sure if it is possible on blogger but I'll try to find a solution and let you know if it possible!

REPLY
Mobile Themes World said on July 26, 2011 at 8:01 PM :

Thank you for this awesome tutorial

REPLY
Mukund said on July 26, 2011 at 11:08 PM :

@Mobile Themes World: Yup! I hope you enjoy the upcoming tutorials as well! Thanks for the comment!

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]