Home Blog Membuat Spoiler Animasi Keren di Blog Terbaru 2016

Membuat Spoiler Animasi Keren di Blog Terbaru 2016

by imadenews

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 iniSpoiler-Animasi_jimkkc

Login Blogger.com
Masuk ke Template > Edit HTML
Lalu Cari Code </head> lalu letakkan kode berikut di tepat atasnya

<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>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/suryadewa/Website/script/spoiler.css" />

Cara Memakai Spoiler :

  1. Buat Postingan baru dalam mode html
  2. 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>

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)

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More