How to add a flat spoiler to blogger



A few days ago I have posted a Spoiler for blogger and today I will be giving you a update for that spoiler which is known as  Flat Spoiler . This is more responsive and better for me .  To add this to blogger follow these steps

How to add this to blogger

  • Go to blogger >New post>HTML
  • Paste the following code

<style type="text/css">.spoilerbutton {display:block;margin:5px 0;}.spoilerbutton {border:2px solid;}.spoilerbutton {height:35px;}.spoilerbutton {width:54px;}.spoilerbutton {background-color:White}.spoilerbutton {border-color:Black;}
.spoilerbutton:hover{  -moz-box-shadow: 0 0 10px #ccc;  -webkit-box-shadow: 0 0 10px #ccc;  box-shadow: 0 0 10px #ccc; }.spoiler {font-family:arial;}.spoiler {overflow:hidden;background: #f5f5f5;}.spoiler {float:left;}.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> <body><input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';"><div class="spoiler"><div>PUT CONTENT YOU WISH TO HIDE HERE</div></div></body>

  • Replace The yellow text with your text
  • Copy the code and paste in the new entry in Edit HTML in place of the entry where you want to show.
Live Demo
PUT CONTENT YOU WISH TO HIDE HERE
Previous
Next Post »