Cara Memasang Spoiler di Postingan Blog

1. Masuk, buka > Template > Edit HTML

2. Terapkan CSS berikut sebelum ]]></b:skin>

/*spoiler Andalution*/

.centerflip{display:block;margin:0;padding:0;}

.flippy{text-align:left}

button.flippy{cursor: pointer;outline: none;border-radius: 2px;-moz-border-radius: 2px;color: #080808;font-weight: bold!important;background: #fff;width: 100%;border: 1px solid #e3e3e3;padding: 7px 17px;border-right: 0;border-left: 0;margin-bottom: 27PX;margin-top: 7px;justify-content: space-between}

button.flippy:hover,button.flippy:focus{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px}

button.flippy:after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" fill="%23000"/></svg>');width:30px;height:30px;display:block;margin:-5px 27px;float:right;}

button.flippy:focus::after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float: right;}

.flippanel{padding:0;text-align:left;background:none;border:0}

.flippanel{padding:0;display:none}   

3. dan JQuery sebelum </body>

<script>

//<![CDATA[

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

//]]>

</script>

4. dan dalam Postingan Tampilan HTML

<div class="centerflip"><button class="flippy">Lihat Gambar</button>

<div class="flippanel">

---Isi Konten Disini---

</div>

</div>

5. Preview and Save

6. Done.