Cara Penerapan Spoiler Di Postingan Anda

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

Yang harus kau lakukan yakni :

1. Buka blogger kamu


2. Kemudian Template


3. Edit HTML


4. Terapkan arahan CSS dibawah ini


5. </style> atau ]]></b:skin>


6. Untuk arahan 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 kau dapat terapkan arahan dibawah ini di postingan tab HTML

<script>

$(document).ready(function() {

$(“#flippy”).click(function() {

$(this).parent().children (“flippanel”).slideToggle(“normal”);

});

});

</script>

Kemudian terapkan arahan dibawah ini dipostingan tab HTML :

<div class=”centerflip”><buttonclass=”flippy”>cekidot</button>

<div class=”flippanel”>

—ISI KONTEN SPOILER ANDA DISINI

</div>

</div>

 

Anda dapat melihat artikel lainnya yang sama : Mengenal HTML5

semoga bermanfaat ya teman-teman..

By. Arlina Design

Sumber aciknadzirah.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: