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.

11 comments:

  1. Lol text comment,But Why?

    ReplyDelete
  2. 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

    ReplyDelete
    Replies
    1. 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.

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

    ReplyDelete
  4. 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.

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

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

    ReplyDelete
  7. nice tip,,
    n how to add title to spoiler??

    something like this..

    Spoiler title,,, (Open/Close)
    thx

    ReplyDelete