Membuat Spoiler Animasi Keren di Blog Terbaru 2016

by imadenews · Published April 18, 2016 · Updated April 18, 2016

Berikut ini adalah cara Membuat Spoiler Animasi Show/Hide Keren di Blog Terbaru 2016. Spoiler ini bisa dipasang lebih dari 1 dalam 1 page atau post. Tulisan Show/Hide dalam Spoiler animasi ini bisa diubah ubah sesuai keinginan kalian. ok agar singkat silahkan simak tutorial mudahnya dibawah ini

<style type="text/css">
/* animated spoiler CSS by imadenews.com */
.imdspoilerbtn {
    display:block;
    margin:5px 0;
    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);
}
.imdspoiler {overflow:hidden;background: #eef0f2;}
.imdspoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.imdspoilerbtn[value="Reveal Hidden Contents"] + .imdspoiler > div {margin-top:-100%;}
.imdspoilerbtn[value="Hide Contents"] + .imdspoiler {padding:5px;}
</style>

/* animated spoiler CSS by imadenews.com */

.imdspoilerbtn {

display:block;

margin:5px 0;

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);

}

.imdspoiler {overflow:hidden;background: #eef0f2;}

.imdspoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}

.imdspoilerbtn[value="Reveal Hidden Contents"] + .imdspoiler > div {margin-top:-100%;}

.imdspoilerbtn[value="Hide Contents"] + .imdspoiler {padding:5px;}

</style>

Atau biar ga ribet bisa juga tinggal tambahin aja Code CSS tepat diatas </head>

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/suryadewa/Website/script/spoiler.css" />

1	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/suryadewa/Website/script/spoiler.css" />

Cara Memakai Spoiler :

Buat Postingan baru dalam mode html
Masukkan Code berikut dalam postingan mode HTML anda,

<input class="imdspoilerbtn" type="button" value="Reveal Hidden Contents" onclick="this.value=this.value=='Reveal Hidden Contents'?'Hide Contents':'Reveal Hidden Contents';">
<div class="imdspoiler"><div>

TEXT ANDA DISINI BISA MEMAKAI URL / IMG / DLL

</div></div>

TEXT ANDA DISINI BISA MEMAKAI URL / IMG / DLL

</div></div>

Anda bisa mengubah text diatas sesuai keinginan anda.

Penjelasan :

Kalian Bisa Mengganti “Reveal Hidden Contents” dan Hide Contents pada script diatas (CSS dan HTML POST) sesuai keinginan kalian
Jika ingin membuat Multi Spoiler/ Lebih dari 1 Spoiler pada 1 Post/page anda tinggal menambahkan HTML POST CODE Diatas.
Anda bisa Merubah Kecepatan Animasi dengan cara merubah durasi pada script CSS diatas (0.2s)