CILIBUR INSPIRASI: Cara Membuat Spoiler di Blog

Posted by IWAN MUTTAQIN Senin, 19 November 2012 2 komentar

Assalamualaikum wr wb, Sahabat Cilibur iNspirasi, kali ini Kami Akan membahas Tentang Bgaimana Membuat Spoler di Blog, Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
Contohnya:

Cilibur Inspirasi:

1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan teks atau kode script (gambar atau video) di sini <br> </div> </div> </div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Terimakasih Atas Kunjungan Sahabat Cilibur Inspirasi

Judul: Cara Membuat Spoiler di Blog
Ditulis oleh IWAN MUTTAQIN
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi Saahabat Cilibur Inspirasi, Jika Sahabat Cilibur ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://ciliburkerajan.blogspot.com/2012/11/cara-membuat-spoiler-di-blog.html. Terima kasih sudah singgah membaca artikel ini. Salam Sahabat Cilibur Inspirasi dan Sukses Selalau

Logo Cilibur inspirasi