Cara Penerapan Spoiler di Postingan Anda

Spoiler adalah tombol yang digunakan untuk menyingkat tempat atau menyembunyikan konten teks, foto atau video dengan buka tutup. Sebagian orang pastinya sudah tahu apa itu spoiler apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan spoiler di postingan kamu?

Yang harus kamu lakukan adalah :

1. Buka blogger kamu
2. Kemudian Template
3. Edit HTML
4. Terapkan kode CSS dibawah ini
5. </style> atau ]]></b:skin>
6. Untuk kode jQuery terapkan sebelum </body>

#flippy {text-align: center;}
#flippy button {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); transition: background 0.1s ease-in-out;}
#flippy button:hover, flippy button:focus {background: #9e4fbf; outline: none}
#flippanel { padding:1px; text-align: left; background: #f5f5f5;border: 0px;}
#flippanel {padding: 24px; display: none;}

7. Lalu kamu bisa terapkan kode dibawah ini di postingan tab HTML

<script>
$(document).ready(function() {
$(“#flippy”).click(function() {
$(this).parent().children (“flippanel”).slideToggle(“normal”);
});
});
</script>

Kemudian terapkan kode dibawah ini dipostingan tab HTML :

<div class=”centerflip”><buttonclass=”flippy”>cekidot</button>
<div class=”flippanel”>
—ISI KONTEN SPOILER ANDA DISINI
</div>

</div>

Anda bisa melihat artikel lainnya yang sama : Mengenal HTML5

semoga bermanfaat ya teman-teman..

By. Arlina Design