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
Login Blogger.com
Masuk ke Template > Edit HTML
Lalu Cari Code </head> lalu letakkan kode berikut di tepat atasnya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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> |
Atau biar ga ribet bisa juga tinggal tambahin aja Code CSS tepat diatas </head>
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,
1 2 3 4 5 6 | <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> |
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)