How to add Open/Close Button to Blogger

Posted On // 11 comments

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;">
<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.


Dhiraj Author
3 May 2013 at 20:09

Test Comment ! :)

Unknown Author
3 May 2013 at 23:57

Lol text comment,But Why?

Unknown Author
3 May 2013 at 23:57


isla Author
14 August 2013 at 07:15

This is great! Just what I want and need for my site. I got a problem though. The button only works on the first post I used it on. I want to add different content to the button on individual posts. Can I do that?

Also, is it possible to put live links inside the content?

Thanks for this button code!


Dhiraj Author
14 August 2013 at 17:34

Yes you can add Live Links in it. Just add <a href="">Text</a> in the CONTENT AREA.

If the button still now works in all posts just reply here with your blog's link.

15 October 2013 at 18:12

Hi..this is great! How to do open close for comment section? It is possible?

chillarparty Author
28 November 2013 at 19:23

Well, I encountered some problem as I wanted the same for many topics in the same post. When I clicked the button of the 1st topic the contents of the first topic opened but when I click the 3rd topic the contents of the 1st topic only opened not of the 3rd topic. Finally I found the solution.I am just giving the solution so that it may help someone.

Well the difference is that for the first topic let the code be as it is. But for the 2nd topic make some changes to the name "spoiler" where ever you see in the codes for 2nd topic. Make another change to the name "spoiler" different from the 2nd for the 3rd topic. And go on doing this for all the topics you want.

Well don't think I am trying to be smart, but just trying to help others.

Unknown Author
2 December 2013 at 15:10

Visit this blog gives great tips and tricks of computer :

Unknown Author
16 December 2013 at 17:42

how to make like button like yours which slides out from button... plz share it too ... ♥♥

Admin Author
13 April 2015 at 15:53

nice tip,,
n how to add title to spoiler??

something like this..

Spoiler title,,, (Open/Close)

31 July 2015 at 00:52



Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| How to add Open/Close Button to Blogger |