Cara Memasang Spoiler di Postingan Blog

Cara Memasang Spoiler di Postingan Blog - Spoiler di Postingan ya Spoiler di Postingan Blog. Mungkin para blogger membutuhkan Spoiler untuk mempercantik postingannya masing - masing. Maka dari itu saya akan share Tutorial Cara Memasang Spoiler di Postingan Blog. Perhatikan dengan teliti.

Cara Memasang Spoiler di Postingan Blog

Pertama, buka blogger
Pilih Menu Template
Pilih Edit HTML
Terapkan kode CSS di bawah ini sebelum </style> atau ]]></b:skin> dan untuk kode jQuery terapkan sebelum </body>

CSS

#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;
}

JQuery

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

Kemudian letakkan kode ini di postingan HTML

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

selamat mencoba dan semoga bermanfaat.
Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell