Multi Spoiler Blogger

Malam sob kali ini saya ingin berbagi tutorial Cara Pasang Multi Spoiler Pada Halaman Postingan. Spoiler sendiri berguna untuk menyembunyikan konten dan menampilkan konten jika kita klik. Spoiler berguna untuk membuat konten di postingan jadi semakin terorganisir dengan maksud agar tidak terlalu banyak konten yang di tampilkan , contoh nya saja seperti list gambar, kode html,javascript dll.
bagaimana cara pasang nya , mari langsung kita mulai.

Pertama kita buka draft.blogger.com lalu pilih tab template , lalu pilih edit html.
cari </body> CTRL + F lalu tambahkan kode di bawah ini di atas kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Multiple Spoiler By Agiel Triono
$(function(){
var e = $(".post-body > spoiler"),
    d = "<div class='spoiler'><span>Spoiler</span></div>",
    c = "spoiler-panel spoiler-hide";
    e.before(d);
    e.addClass(c);
$('.spoiler').click(function (){
  if ($( this ).next().is(".spoiler-hide")) {
    $(this).next().removeClass("spoiler-hide");
    $(this).next().addClass("spoiler-show");
  } else if ($( this ).next().is(".spoiler-show")) {
    $(this).next().removeClass("spoiler-show");
    $(this).next().addClass("spoiler-hide");
  }
 });
});
//]]>
</script>
</b:if>

Setelah itu tambahkan kode CSS di bawah ini sesudah tag ]]></b:skin> gunakan CTRL + F untuk mencari.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Multi Spoiler Agiel Triono */
.spoiler{text-align:center}
.spoiler span{text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;display:inline-block;margin:0;background:#aa65c7;color:#fff;text-align:center;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;vertical-align:middle;cursor:pointer;user-select:none;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.spoiler span:hover,.spoiler span:focus{background:#9e4fbf;outline:none}
.spoiler-panel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.spoiler-panel{padding:24px}
.spoiler-hide{display:none}
.spoiler-show{display:block}
</style>
</b:if>

Oke Simpan Template.

Kode Pada Postingan.

<spoiler>KONTEN ANDA DI SINI</spoiler>

Ganti KONTEN ANDA DI SINI dengan konten yang ingin anda sembunyikan.

Silahkan kreasikan sendiri jika ada kekurangan. Semoga tutorial ini dapat bermanfaat untuk sobat.

Go to Link