Memasang Spoiler Di Postingan Blog

 

 Memasang Spoiler di postingan blog- Kali ini saya akan share memasang spoiler di postingan blog, kalo anda sering berkunjung ke kaskus atau forum lain, pastinya anda sudah tidak asing lagi dengan yang namanya spoiler ini. Langsung saja ikuti langkah langkahnya di bawah ini.

Langkah-langkah memasang spoiler:

Pertama, buka blogger-> Template -> Edit HTML, letakkan code CSS ini sebelum </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;
}

Kedua, letakkan code jquery ini sebelum tag </body>   

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

Untuk penerapannya anda bisa memasukkan code dibawah ini pada tab HTML 

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

Lalu, Simpan dan Publikasikan.

Mudah kan? Sekian dulu postingan saya pada kali ini, semoga bermanfaat bagi kita semua. Terima Kasih.


source :  http://arlinadesign.blogspot.com/2014/11/memasang-spoiler-di-postingan.html

• Tweet
• Share
• Share
• Share
• Share

About Admin

Student and Blogger. I Love Programming

Related Post