Membuat Spoiler pada Postingan Blog

Sedikit tip basi sehabis ngutak-ngatik gambar-gambar sambil iseng-iseng belajar nyari buat menguntungkan “membuat puntung” sebatang 234 sebagai pengganjal kelopak mata ketika belum mau merapat. Hanya berbagi sama yang belum tahu aja, barangkali masih ada yang belum mencobanya

Ingin menampilkan koleksi photo pada blog kadang-kadang mikir dulu kalau koneksi yang dihadapi tidaklah selalu stabil. Sedikit cara menyiasatinya agar tetap gambar-gambar tersebut dapat terpajang dengan menggunakan spoiler hingga tidak terlalu mempengaruhi bandwidth yang ada.

Membuat spoiler atau tombol buka/tutup pada blog yang dapat disimpan dalam postingan atau bisa juga di sidebar. Selain mempengaruhi akses blog, dengan adanya spoiler juga bisa menghemat tempat. Jika dalam forum kaskus cukup diawali dengan menuliskan

EASY SPOILER SHORTCODE ERROR

Check for misspelled parameters (case matters)

Check for new lines (all must reside on one long line)

Error near [0], [=Judul]

For assistance, please visit http://www.dyerware.com/main/products/easy-spoiler

cara membuatnya dalam blog cukup sederhana juga dengan menggunakan kode HTML seperti di bawah ini:

<div style=”margin-bottom: 2px;”><span style=”color: #000080;”><strong>Judul Spoiler </strong></span>

<div style=”margin-bottom: 2px;”>

<div style=”margin-top: 1px; text-align: left;”><input style=”margin-top: 5px; width: 60px; font-size: 10px;” 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” value=”Buka” /></div>

<div style=”border: 1px inset; margin: 0px; padding: 6px;”>

<div style=”display: none;”>Isikan materi (teks atau gambar) yang akan di spoiler disini</div>

</div>

</div>

Tulisan berwarna merah menunjukan tulisan yang akan nampak pada button atau tombol yang dibuat, tulisan atau nama tersebut bisa diganti sesuai dengan keinginan. Dan, untuk isi pokok dari spoiler bisa berupa teks atau gambar.

Semoga berguna, jangan lupa follow dan klik like pada fans page ya..!!

source : keepsains

Posted in: Tutorial Blog