How to Add a Spoiler on Blogger

Spoiler is a hidden stylish text box on anyone click on the Spoiler button the code box is shown and if the person again clicks on the button it hides the text box. So I in this article we will discuss how we can add a spoiler on blogger.

You can see the preview on this spoiler by clicking on the below demo button.

DEMO

How to install this spoiler on Blogger

It's so easy to install this spoiler on your blogger blog. So fast go to the blogger dashboard and then go to theme HTML edit and search for </style> tag and add the below CSS code after </style> tag.

/* Spoiler Button by Rendiansyah.com */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

After adding this CSS code search for </body> tag now add the below code after the </body> tag.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

And also add the following jQuery code above </body>. If the following code is included in the template you don't need to add it.

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Now your work is 90% complete just save your theme.

How to add this spoiler on post/page

It's so easy to add this spoiler on post or page. Just shift HTML view of your post editor and use this below code to add this box on post or page.

<div id='soore-spoiler'>
<button>See This</button>
</div>
<div id='soore-spoiler-content'>
••••
</div>

Now add your spoiler button name on the See This text and add your content on •••• text.

Ending Of this post

I hope you enjoy this article well. So this box is not made by me it's made by rendiansyah. So thanks for reading us...