Disappearing Text Effect To Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

You can now disappear a text with a click in blogger post. It also a cool effect on blogger. Disappearing text effect is an effect which allows readers to vanish a test or a post with one click. The text or article confines to a Box and there is a cancel button. If you click on the cancel button the text in the box will be disappeared.

Watch A Demo

Find the following code [ F3 or CTRL+F ]

]]></b:skin>

Now add the following CSS code just before the code mentioned above

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

Now find the the below code

</head>

Now copy and paste the below code Just above or before the code mentioned above

<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>

Save the template and done

Now write a post and paste the following code and publish the page

<div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;">
<img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GCtc_ktNQt1fGq_7MfQpRN3CHZgwhphmn8_rzzx2Z4h7pZy1FvWyioVLP8afhBDzx4djLganqGNiSAUr4LrRh5ot6ibbInNKv516VjL73G7GnxsQDjY7B_u4JXq6RkPWbtkYUgig1MXP/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.edutechnology.net ! We've more interesting  tutorials out there! So, go check out the site right now!!!!</div>

After seeing the newly published page you will be able how to dell with the tutorial.

If you want to change the border color change the rgb value highlighted with green color. Change the heading which is highlighted in blue and content body which is highlighted in pink

If you like the article then please share. Thank you

Tweet

You can now disappear a text with a click in blogger post. It also a cool effect on blogger. Disappearing text effect is an effect which allows readers to vanish a test or a post with one click. The text or article confines to a Box and there is a cancel button. If you click on the cancel button the text in the box will be disappeared. Watch A Demo Find the following code [ F3 or CTRL+F ] ]]></b:skin> Now add the following CSS code just before the code mentioned above .pane { margin:0; padding:0; } .pane .delete { position: absolute; padding-left:560px; cursor: pointer;} Now find the the below code </head> Now copy and paste the below code Just above or before the code mentioned above <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> Save the template and done Now write a post and paste the following code and publish the page <div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;"> <img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GCtc_ktNQt1fGq_7MfQpRN3CHZgwhphmn8_rzzx2Z4h7pZy1FvWyioVLP8afhBDzx4djLganqGNiSAUr4LrRh5ot6ibbInNKv516VjL73G7GnxsQDjY7B_u4JXq6RkPWbtkYUgig1MXP/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.edutechnology.net ! We've more interesting tutorials out there! So, go check out the site right now!!!!</div> After seeing the newly published page you will be able how to dell with the tutorial. If you want to change the border color change the rgb value highlighted with green color. Change the heading which is highlighted in blue and content body which is highlighted in pink If you like the article then please share. Thank you