Menampilkan Fungsi Spoiler Pada Postingan

Padapostingan ini saya akan share sedikit mengenai cara menampilkan spoiler pada postingan
spoiler pada postingan ini sangat membantu untuk menampung kode yang terlalu panjang pada postingan kita jika agan berminat menggunakannya silahkan ikuti angkah dibawah ini...

Caranya sangat gampang gan
silahkan agan sisipkan kode dibawah ini pada postingan agan

<div id="spoiler" style="display:none">

Kode yang ingin disembunyika

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button>

Catatan kode berwarna kuning adalah kontan yang ingin disembunyika
             kode berwarna merah silahkan ganti dengan kata kata agan sendiri

 Nah jika selesai silahkan dipublikasikan postingannya hehehe...

saya kira penjelasannya sudah cukup dimengerti selamat mencoba semoga bermanfaat......

Membuat Spoiler Sederhana Untuk Blog

Pada kesempatan ini saya akan share mengenai tata cara membuat spoiler sederhana untuk blog anda
ada beberapa blogger yang memakai widged terlalu banyak pada halaman blog mereka sehingga akan merusak pandangan padatampilan blog tersebut nah untuk itu spoiler ini sangat bermanfaat untuk menampung widged yang berlebihan pada blog anda misalnya banner sahabat ataupun widged lain jika anda berminat menggunakannya silahkan ikuti langkah dibawah ini...

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f  untuk memudahkan pencarian
jika sudah ketemu letakan kode dibawah ini diatas tag  ]]></b:skin>

input.trigger {
  display:inline-block;
  margin:0;
  padding:0;
}

.spoiler {
  overflow:hidden;
  background-color:white;
  margin:10px 0 0;
  padding:0 30px;
  height:0;
  visibility:hidden;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  padding:15px 30px;
  visibility:visible;
  height:300px;
  overflow:auto;
}

Selesai simpan template anda terlebih dahulu...

Untuk Menjalankan fungsi Spoilernya tentunya memrlukan kode pemanggil
Nah masuk pada halaman tata letak/add gadged
kemudian letakan kode dibawah ini pada box yang tersedia

<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Letakan Konten/kode di sini.....!!!
</div>

Catatan silahkan ganti kode berwarna merah dengan  konten/kode widged yang ingin anda gunakan

Saya kira penjelasa tentang spoilernya cukup jelas selamat mencoba semoga bermanfaat...