Wednesday, 31 July 2013

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

No comments:

Post a Comment