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

11 comments

3 May 2013 at 07:39

Test Comment ! :)

Reply
Rook Blonko Author
3 May 2013 at 11:27

Lol text comment,But Why?

Reply
Rook Blonko Author
3 May 2013 at 11:27

test*

Reply
isla Author
13 August 2013 at 18:45

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!

Isla

Reply
14 August 2013 at 05:04

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

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

Reply
15 October 2013 at 05:42

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

Reply
chillarparty Author
28 November 2013 at 05:53

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.

Reply
2 December 2013 at 01:40

Visit this blog gives great tips and tricks of computer :
melechtech.blogspot.in

Reply
Aryan Poudel Author
16 December 2013 at 04:12

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

Reply
Edo Musran Author
13 April 2015 at 03:23

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

something like this..

Spoiler title,,, (Open/Close)
thx

Reply
30 July 2015 at 12:22

5+

Reply

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 |