How to add Open/Close Button to Blogger

Today I will show how you can add a Open/Close button to blogger. So the concept is that your some file say xyz is hidden and in order to see that xyz you have to click the Open/Close button. This button can be a lot helpful and save your content from spammers, copiers etc. This button is made from CSS and HTML.

You can also change the text Open/Close to your desired choice. You can hide files like images, codes, audio files, upload links etc.with this button. In this tutorial the code is made from many CSS elements which will resize/cut big images. The demo of this design hack can be seen just below.

So as now you have seen the demo below are the steps to add this button to your blog.

Adding the HTML/CSS

To add this button to your post go to HTML tab in the post editor of Blogger and add the below code.

<div id="spoiler" style="display: none;">
ADD YOUR HIDDEN CONTENT HERE.
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button>
<br />

After adding the HTML just edit and add your hidden file which you can do by seeing the below step.

Setting up the button

Change ADD YOUR HIDDEN CONTENT HERE with the content you want to hide with the Open/Close button. 
Change Open/Close with the desired text you want to appear on the button.

Thats it. You are done now. Now your content is safe within your loyal readers and away from spammers and copiers.