Cara membuat spoiler ala wikipedia

Mei

12

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara membuat spoiler ala wikipedia dan semoga artikel ini bermanfaat.

---

Pada kesempatan ini Belajar Komputer melalui Internet ingin share tentang cara membuat spoiler ala wikipedia. Terkadang memang pada saat kita posting yang pada postingan tersebut mempunyai isi postingan cukup panjang ada perasaan bagus ga ya nanti hasilnya apabila postingan kita panjangnya memang benar-benar panjang dan untuk membacanya memerlukan waktu lama? nah untuk mengatasi maslah itu alangkah baiknya kalau kita membagi postingan tersebut kedalam beberapa bagian sehingga akan terlihat lebih bagus, umpamanya kita buat seperti daftar isi atau kita buat topik utamanya unyuk ditampilkan dan isi keseluruhan disembunyikan. Itu semua dapat dilakukan dengan membuat spoiler dimana dengan spoiler tersebut kita bisa membuka dan menyembunyikan postingan yang diantaranya seperti pada situs wikipedia, kaskus dan banyak lagi situs yang menggunakan metode seperti ini.

kali ini Belajar Komputer Melalui Internet akan berbagi beberapa Kode HTML untuk spoiler yang diantaranya:

Spoiler Ala Wikipedia, contohnya seperti dibawah ini:

Judul Spoiler Ala Wikipedia:

Ini kode spoilernya silahkan Copy paste...
<div style="background: #f9f9f9; border: 1px solid #ccc; padding: 3px;"> <div style="font-family: arial; font-size: 12px; margin-bottom: 0px;"> <b>Judul Spoiler Ala Wikipedia:</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="background: #f9f9f9; border: 0px solid #000; color: blue; font-family: arial; font-size: 12px; height: 16; margin: 0px;" type="button" value="Buka" /> </div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px;"> <div style="display: none;"> <br /> ISI SPOILER</div> </div> </div>
Isi dapat berupa teks atau gambar untuk mengisi gambar, buat kode <img src="http://www.situs.com/file-gambar.jpg" /> Untuk memasang kode ini silahkan copy &amp; paste kode berikut:

Judul Spoiler Soft:

ISI SPOILER Isi dapat berupa teks atau gambar untuk mengisi gambar, buat kode <img src='http://www.situs.com/file-gambar.jpg'/> Untuk memasang kode ini silahkan copy & paste kode berikut: <div style="padding: 10px; border:1px solid #ccc;background:#e9eef2"> <div style="margin-bottom: 2px;"><b>Judul Spoiler Soft:</b> <input value="Buka" style="border:0px solid #000;margin:0px; width: 60px;color:#fff; font-size: 10px; height:20px; background:#323c47" 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 style="margin: 10px; padding: 0px; border: 0px inset #fff;"> <div style='display:none'>ISI SPOILER</div> </div> </div>

Judul Spoiler Biasa :

ISI SPOILER Isi dapat berupa teks atau gambar untuk mengisi gambar, tuliskan kode <img src='http://www.situs.com/file-gambar.jpg'/> <div style="padding: 10px;"> <div style="margin-bottom: 2px;"><b>Judul Spoiler Biasa :</b> <input value="Buka" style="border:2px inset ;margin:0px; width: 60px;color:#000; font-size: 10px; height:20px;" 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 style="margin: 10px 0 0px 0; padding: 5px; border: 2px inset #fff;"> <div style='display:none'>ISI SPOILER</div> </div> </div>

Bagi anda yang ingin memasang Spoiler seperti ini kemudian didalamnya akan dimasukan beberapa kode HTML agar kode tersebut tampil dalam bentu text maka kita harus meng uncode dulu kode HTML nya karena kalau tidak kode tersebut tidak akan tampil. karena memasang spoiler ini harus pada mode HTML bukan pada Compose.
untuk menguncode kode HTML silahkan kunjungi situs http://www.centricle.com/tools/html-entities/ kemudian copy kode yang akan disimpan di dalam spoiler dan pastekan disitu tersebut selanjutnya kode yang telah di Unhide anda copy dan pastekan didalam spoiler.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara membuat spoiler ala wikipedia kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 23:27