Cara Memasang Spoiler Aikatsu Dengan Warna Tombol di Postingan

Kali ini saya akan berbagi tips gambar sederhana ini aikatsu 3 karakter ada ichigo, aoi dan ran apakah warna tombol pink, biru, merah siapa. cara membuat spoiler aikatsu dengan colour button dengan efek slide di postingan blog.

Berikut cara penerapannya :

Pertama, buka blogger > Template > Edit HTML > Terapkan kode CSS di bawah ini sebelum </style> atau ]]></b:skin> dan untuk kode jQuery terapkan sebelum </body>


/* Spoiler Flippy 1 */
#flippy1 {
    text-align: center;
}

#flippy1 button {
    background: #FFC0CB;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 20px 20px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #88C0CB;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy1 button:hover, #flippy1 button:focus {
    background: #FFB6C1;
    outline: none;
}

#flippanel1 {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

#flippanel1 {
    padding: 24px;
    display: none;
}
/* Spoiler Flippy 2 */
#flippy2 {
    text-align: center;
}

#flippy2 button {
    background: #0000FF;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 20px 20px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #000088;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy2 button:hover, #flippy2 button:focus {
    background: #ADD8E6;
    outline: none;
}

#flippanel2 {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

#flippanel2 {
    padding: 24px;
    display: none;
}
/* Spoiler Flippy 3 */
#flippy3 {
    text-align: center;
}

#flippy3 button {
    background: #800000;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 20px 20px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #400000;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy3 button:hover, #flippy3 button:focus {
    background: #8B0000;
    outline: none;
}

#flippanel3 {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

#flippanel3 {
    padding: 24px;
    display: none;
}

<script>
$(document).ready(function() {
    $("#flippy1").click(function() {
        $("#flippanel1").slideToggle("normal");
    });
});
</script>
<script>
$(document).ready(function() {
    $("#flippy2").click(function() {
        $("#flippanel2").slideToggle("normal");
    });
});
</script>
<script>
$(document).ready(function() {
    $("#flippy3").click(function() {
        $("#flippanel3").slideToggle("normal");
    });
});
</script>

Kemudian terapkan kode di bawah ini di postingan tab HTML

ichigo hoshimiya

<div id="flippy1"><button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCb2MkMlwoDKnH-5apa8UHIaZPc2vtZuWXPIA7LV4HXEKFkK9xh378V4yo5fZLIC2EtAAxfMXPwghlF3jC1H-361_ekqmByVtrO_gIl30qS0hLpwr549e2nHJ74Jfz0Ag1s0QMAnZTtFg/s1600/ichigo111.jpg" width="200"/></button></div>
<div id="flippanel1">
Hai Ichigo
</div>

Aoi Kiriya

<div id="flippy2"><button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAePBUVnMBZ3HGr0e_7Ujs_BENhDkLHb3VIZP6FobFeSGjggynunD4CHqlCmMIDSb2ch4PlIsmmTXNe9U1taXlZSJcqkkTLYVlFs7JLNCfIhbTIaKUm52OYQIBLs3-EzdxPLghXgvZNls/s1600/aoikiriya1111.jpg" width="200"/></button></div>
<div id="flippanel2">
Hai Aoi
</div>

Ran Shibuki

<div id="flippy3"><button><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV48Jw1xHlHOMRlzngJ_DymZ5-X81o96Y1-22_r6Sn4EOTgZ-VG57BtvbUzXE3HBI7UnJeFfUrbUmwrUHO3spybXwh9gQmsvJ-OuUcNGUGMThTgcobMDov3NR32EihWJsK1PZyDkVjzYc/s1600/ranshibuki111.jpg" width="200"/></button></div>
<div id="flippanel3">
hai Ran
</div>

Demo

Selamat mencoba dan Aikatsu! Idol Activity & Academy

Luar Lihat Blog Arlina Design Memasang Spoiler di Postingan