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/AVvXsEjIGmcYTLcCWGhREMSqSqj3jNpBbAViWpyRHmme_YzRE69q0VBUc61yo2wUU_lSPsqqEqKgjt4MNzeAAdcNxLqYVcf061maimp8FLcJpNQ7FQEC0R62BMEOM05_srSPsCTNXsmSqZFK1jI/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/AVvXsEjszS2HF7_qbQnQA6oO_E59CojpHxkBSq4KdCnyWM3r7J3cefXBbHkFByXL_lbSet70FTGQYHg7gRmkZRSGTe7WH9_qrIMo7CrRwyvg2fbzomliJClmkjKbsAzSKrR3YbyE39Sq6SQGv3s/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/AVvXsEjPuKY8dA1TVx35UcUblHFZ-JXUvH-CApA5c-OB1fYa03ky8ZtU0A41t1cidHec7g9mUs0U1Stun6xHuwyBDOYiVk8d9bTpqqSouYbDBfYY1D6m7a004X_v7RsZ8hQJE1IhzgBaQ1zsrgM/s1600/ranshibuki111.jpg" width="200"/></button></div>
<div id="flippanel3">
hai Ran
</div>