How to Add Spoiler in Your Blogger Post

Hello Bloggers! Today I will be teaching you on how to add a spoiler within your article in blogger. You can actually use this in your page or even widget, It's basically a basic one so just expect basic :P anyway, for whatever reason or purpose this spoiler thing may served you, your highness, I hope this will be useful on your end. So let's get started.

DEMO : 

Your Content Here, Content you wish to be on the spoiler.

Step #1 , Create a post.

Step #2 , copy and paste this on your post :

Important Note : Make sure you are on HTML View not Compose View when you paste this and never go back to Compose View again, doing so will ruin the spoiler.

Suggestion : Add this spoiler on the last part of your writing so you can still edit things on Compose View.

CODE

<style type="text/css"> 
/* Visit www.thegreatowl.blogspot.com for more blogger tutorials */
.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>

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
Your Content Here, Content you wish to be on the spoiler.
</div></div>

Customization :
Yellow - Background color, use HEX color
Green - Refers to the word 'Show'
Aqua - Refers to the word 'Hide' 
Note : When you want to add image inside the Spoiler use the  < img > code in html.