Cara Membuat Spoiler Di Posting Blog

Cara Membuat Spoiler Di Posting Blog. Sobat blogger, kali ini saya akan berbagi tentang cara membuat spoiler. Spoiler ini adalah kode efek show / hide yang sangat sederhana bagi anda untuk menyalin atau meletakan sebuah kode atau gambar bahkan video, hal ini bertujuan untuk menyembunyikan dan memunculkan sebuah pesan dengan efek show /hide. Anda dapat menggunakan kode ini di mana saja, baik itu di sidebar atau di posting blog Anda, selama Anda dapat menambahkan kode spoiler di dalamnya.

Contoh spoiler dengan kata-kata, bisa di isi dengan text,gambar,script atau video dari youtube, cukup sekian contoh spoiler di dalam postingnya.

Kode ini akan menambahkan sebuah tombol, mengklik dan akan memperluas atau memunculkan konten dan menunjukkan bagian tersembunyi, keuntungan menggunakan spoiler pada artikel adalah bisa untuk menghemat ruang dan mengurangi beban loading blog pada gambar atau video, selain itu juga artikel kita bisa terlihat lebih profesional.

Cara Memasang Spoiler Di Posting Blog

1. Buka akun blogger anda.

2. Pilih menu template dan klik edit HTML.

3. Selanjutnya, silahkan letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style> 

#flippy {
    text-align: center;
}
#flippy button {
    background: #aa65c7;
    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 #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
    background: #9e4fbf;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}

4. Selanjutnya, letakan kode di bawah ini tepat di atas kode </body>.

<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

5. Klim save / simpan template anda.

-Cara menggunakan : Letakan kode di bawah pada mode HTML saa membuat posting.

<div id="flippy"><button>Cekidot</button></div>
<div id="flippanel">
---ISI KONTEN ANDA---
</div>

Semoga bermanfaat.