How to Make Cool Show/Hide Spoiler Buttons on Blog

How to make a cool show/hide spoiler button on a blog - This article will explain how to make a show/hide or spoiler button, the spoiler function can hide some of the article content (content/widgets) this method saves space and optimizes loading so that it is responsive, spoilers are very familiar in kaskus institutions, can be created in AMP templates with HTML JavaScript or CSS code accessories.

Spoiler is a frame format to hide some text, images or code, Initially I wanted to make edit subtitles like Wikipedia on a mobile view but couldn't find a way because there is this method not much different.

How to Create a Show/Hide Spoiler Button on a Blog

Following are the steps:

• First go to Blogger > Themes > Edit HTML.
• Then add the code below just above the code ]]></b:skin> or </style>.

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{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:0 3px 0 0 #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:0}
.flippanel{padding:24px;display:none}

• Next, install this JQuery code just above the </body> code.

<script>
$(function(){
  $(".flippy").on("click", function(){
    $(this).parent().children(".flippanel").slideToggle("normal");
  });
});
</script>

• If you have, click Save theme.

How to Apply/Install Spoiler to Blog

To put a spoiler on a blog post, you just need to enter the code below in the post in HTML mode.

<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
_SPOILER_HERE_
</div>
</div>

• If so, save the theme
• Publish.