How To Make Responsive Spoiler On Blog - Spoiler on the blog is a frame format that is used for framing or hide text, pictures, video, and anything to be hidden in the blog. Later visitors can see the contents of the spoiler by clicking on the buttons provided. Spoiler useful to hide the text and save space.
Spoiler is usually used in a forum like Kaskus. And whether it could be applied in a blog? How to make it?
How To Make Responsive Spoiler On Blog :
- Go to your Blogger Dashboard ›› Template ›› Edit HTML.
- Add the script below before ]]></b:skin> or </style>
- Add the JQuery code below before </body>. Then, click Save Template.
/* Responsive Spoiler by infoBlog */
#infoblogspoiler {
#infoblogspoiler {
text-align: center;
}
#infoblogspoiler button {
background: #056f00;
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 #2baf2b;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#infoblogspoiler button:hover, #infoblogspoiler button:focus {
background: #056f00;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: #056f00;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}
<script>
$(document).ready(function() {
$("#infoblogspoiler").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>
$(document).ready(function() {
$("#infoblogspoiler").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>
To use that Spoiler, you can add the code below to your post . .
<div id="infoblogspoiler"><button>Spoiler Name</button></div>
<div id="flippanel">Put Text, Video, Image, etc. Here</div>
<div id="flippanel">Put Text, Video, Image, etc. Here</div>
For Result :
Put Text, Video, Image, etc. Here
Enough of tutorial about How To Make Responsive Spoiler On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.
Thanks For Your Visiting 
EmoticonEmoticon