How to Add a 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.

CSS CODE

/* 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.