How To Add Smooth Content Spoiler (Hide/Show Button) In Blogger Posts

Views:

This is a post about to add a hide/show button (Content Spoiler) in your blogger post. It is mainly used to hide unimportant details or save content spaces. Now i share a smooth Hide/Show button for you. It is a useful option. This new option made-up with CSS code. So it shows a slow transition property, When we try to click on show button.But animation property not works with Internet Explorer. You can add multiple content spoiler in one page. You just need to add two codes. One is CSS code and other is HTML code with your content. Do you want to add this on your blogger pages. Please follow this post and obey instruction strictly..

LIVE DEMO

This is Internet Explora Under Master Hacks. Please Follow this blog Facebook: https://www.facebook.com/internetexplora

First Log in your Blogger account.

1) Add CSS code

Select Template option.

Click on Edit HTML button.

Then find (CTRL+F) </head> tag.

Copy below CSS code and paste it before </head> tag.

<style type="text/css"> /* animated spoiler CSS by Internet Explora (Master Hacks)*/ .spoilerbutton {display:block;margin:5px 0;} .spoiler {overflow:hidden;background: #f5f5f5;} .spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;} .spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;} .spoilerbutton[value="Hide"] + .spoiler {padding:5px;} </style>

Change RED color, If you want to add your own text in hide/show button.

Save your Template.

2) Add HTML code

Then go to your Post.

After that copy below code and past it on blog post HTML part or anywhere you want to add this option.

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';"> <div class="spoiler"><div> YOUR-CONTENT-HERE</div></div>

Change RED color with your content.