Cara Membuat Spoiler di Blog

MurliCyber    8/04/2015    Blogger , Tutorial    Comment   

Cara membuat spoiler di blog - Pada pagi ini saya akan berbagi bagaimana cara membuat spoiler di blog, sobat pasti nya tau dong apa itu spoiler? spoiler itu seperti tombol yang ketika di klik akan memunculkan sesuatu di dalam nya, seperti gambar, text,atau pun vidio, buat kalian yang sering jalan jalan ke forum pasti tidak asing lagi kan, apa itu spoiler?

Buat yang masih binggung saya akan memberikan contoh nya, seperti di bawah ini

Untuk membuat nya, ikuti tutorial di bawah ini

1. Login ke blogger, tekakkan css di bawah ini di atas kode ]]><b:skin

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

2.letakkan kode di bawah ini di atas kode </body>

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

3. Simpan template sobat, kemudian masuk ke bagian entri, buat post baru, letakkan kode di di bawah ini di bagian html

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

Sekian tutorial kali ini, semoga bermanfaat.