Welcome, Guest. Saling Tukar link yuk? klik di sini ×
Cara Memasang Spoiler di Postingan Blog

Pasang Spoiler di Blog
Pasang Spoiler di Blog
Ini ada cara memasukkan spoiler di postingan Blog, dengan efek Slide atau dengan efek kebawah seperti ber-animasi.

Tutorial




  • Simpan kode CSS berikut ini, diatas 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;
}


  • Selanjutnya, Simpan kode JQuery berikut diatas kode </body>

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


  • Kemudian, Terapkan kode berikut ini di postingan blog mode HTML

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



Sumur : http://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html
CARA MARKUP DI KOMENTAR :

* Khusus Disqus
    Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
    Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
    Untuk menulis huruf underline silahkan gunakan <u></u>.
    Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
    Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
DILARANG SPAM & FLAMMING !!!

Post a Comment Blogger Disqus

Tidak ada Komentar, jadilah yang Pertamax!
 
Top
Silahkan Pilih :
Login