Cara Membuat Kotak Spoiler yang Bisa di Buka Tutup di Blog

Selamat pagi teman-teman hari ini Intan mau membagikan tutorial cara membuat kotak spoiler yang biasanya kita sering lihat di forum-forum. Kotak spoiler itu gunanya menyembunyikan gambar atau tulisan yang ingin kita tidak perlihatkan ke orang-orang tertentu atau mungkin hanya untuk menghemat halaman saja supaya tidak terlalu panjang. Kabar baiknya untuk kita semua, bukan hanya forum saja yang bisa menerapkan kotak spoiler, tapi kita sebagai blogger juga bisa memasang kotak spoiler di postingan blog. Intan sudah mencobanya di blog intan satunya. Hasilnya seperti ini:

Contoh penggunaan kotak spoiler di postingan blog sudah aku gunakan sebelumnya di blog review film. Untuk lihat demonya berkunjung saja ke Review Korean drama Gangnam Blues. Mengapa pakai spoiler? karena banyak orang yang tidak suka membaca ending film atau inti film sebelum mereka menonton sendiri film itu, jadi mereview sesuatu khususnya film jika kita akan menyebutkan cuilan-cuilan adegan kotak spoiler ini sangat diperlukan. Selain untuk menyembunyikan tulisan, kita juga bisa menyembunyikan gambar dalam spoiler. Banyak gunanya khan? Okay langsung saja deh kita mulai..

1. Masuk atau Log in ke Blogger.com

2. Lalu klik simbol pensil untuk menulis postingan baru

3. Pindah Tab Compose ke Html.

4. Masukkan kode berikut ini ke kotak Html postingan:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input 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'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Ganti dengan tulisan, gambar atau kode script<img border="0" /></div></div></div>

5. Contoh Kotak spoiler dengan gambar:

Judul Spoiler:

6. Ganti tulisan merah dengan tulisan, url gambar atau kode script anda sendiri.

7. Untuk memasukkan gambar caranya salin kode di bawah ini pada kata Ganti dengan tulisan, gambar atau kode script:

<a href="Tulis url (gambar) disini" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="Tulis url gambar disini" /></a>

8. Ganti tulisan biru dengan dengan url gambar anda sendiri, untuk url pertama bisa anda ganti dengan url kemana saja, bisa url gambar atau url blog anda atau lainnya.

Selain di postingan blog, anda juga bisa letakkan di sidebar blog dengan cara kopikan Layout dan copy paste code tersebut di Html/Javascript.

Kurang jelas? Lihat video di bawah ini:

Uploading...

Jangan lupa berbagi ilmu ke sesama dengan menekan tombol share dan bagikan ke teman-teman fb, twitter, atau lainnya. Yang mau langganan tutorial lewat email, isilah kotak di bawah artikel dengan email kalian. Oh iya mohon bantuannya juga untuk mengelike facebook fanspage, follow twitter, dan google+ follower agar blog ini bisa dibaca oleh masyarakat luas. Terima kasih. Semoga bermanfaat. Datang lagi yah teman-teman.. ^^ Jika ada pertanyaan, saran, kritik atau unek-unek dengan senang hati admin menerima komentar anda.

Baca Juga :