How to Add
Spoiler or HideShow Button in Blogger
First, go to blogger> Templates> Edit HTML> Apply
CSS code below before </ style> or ]]> </ b: skin> and to apply
jQuery code before the </ body>
CSS
#flippy { text-align: center; } #flippy button { background: #aa65c7; color: #fff; text-align: center; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin: 10px auto; font-size: 14px; font-weight: bold; box-shadow: 0px 3px 0px 0px #883da7; vertical-align: middle; cursor: pointer; text-shadow: 0 1px rgba(0, 0, 0, 0.3); transition: background 0.1s ease-in-out; } #flippy button:hover, #flippy button:focus { background: #9e4fbf; outline: none; } #flippanel { padding: 1px; text-align: left; background: #f5f5f5; border: 0px; } #flippanel { padding: 24px; display: none; }
jQuery
<script> $(document).ready(function() { $("#flippy").click(function() { $("#flippanel").slideToggle("normal"); }); }); </script>
