Penerapan Spoiler di Postingan Anda

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>

Penerapan Spoiler di Postingan Anda

#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;}

  1. 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

ADD YOUR COMMENT

Mau Belajar Bisnis Dan Internet Marketing
Dengan Expertnya ? Join Disini ya..

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

TitikDigital : Belajar Bisnis Dan Internet Marketing will use the information you provide on this form to be in touch with you and to provide updates and marketing.