This article will show how you can add a Open/Close or Show/Hide button to your blogger posts. So the concept is that some portion of your p...
This article will show how you can add a Open/Close or Show/Hide button to your blogger posts. So the concept is that some portion of your post say abc is hidden and in order to see that abc you have to click the Open/Close button. This button can be very helpful and can save your content from spammers, copiers etc. This button is made from CSS and HTML.
You can also change the text Open/Close as per your 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.
Adding HTML/CSS:
To add this button, you can use the HTML code given below.<div id="spoiler" style="display: none;">
ADD YOUR 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 />
Change ADD YOUR 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 like Show/Hide.
Thats it. Now your content is safe & is available only for your loyal readers and away from spammers and copiers.
