Tuesday, April 17, 2012

Disappearing Text Effect To Blogger


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

View 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

    0 comments:

    Click Here To add Comment