Bikin Spoiler Di Blogger (Spoiler Script)

Hari ini Bli Tyan akan menuliskan Gimana sih cara bikin spoiler di blogger, tapi sebelumnya saya tanya nih, Udah pada tahu belum nih spoiler itu apa??

Sebenarnya sudah banyak yang posting dan share. Akan tetapi, tidak ada salahnya juga kan jika Bli tyan ikut share tentang spoiler dan sedikit tentang kegunaannya :D

Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, dalam hal ini, "display:none;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks atau gambar yang sangat besar/panjang dan memakan space halaman atau untuk menyembunyikan kejutan bagi pengunjung (maka seringkali disebut pula sebagai "peek-a-boo", Indonesianya kurang lebih, "ci-luk-ba!", hehe)
Pada posting blog, spoiler dapat digunakan untuk memperpendek panjang halaman sementara sebelum di-klik oleh pengunjung, sehingga tampak tidak ruwet.

Konten Yang Disembunyikan

Contoh Spoiler :

Teks yang disembunyikan/yang berada di dalam spoiler

Script spoiler ini berfungsi untuk menyembunyikan sebagian tulisan di postingan blog kita, baik itu berupa link download, atau hanya sekedar ingin menyembunyikannya saja.

Biasanya spoiler banyak digunakan di forum-forum

Next ...
Cara Membuat Spoiler Di Blogger

1. Login ke blogger
2. klik add new post (buat artikel baru) kemudian isi artikel teman.

Salin semua kode berikut, kemudian masukkan ke posting atau tempat yang teman inginkan

<div id="spoiler">

<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">

</div>

<div style="background: #ffffff; margin: 10px auto;

border: 0px solid #000;

padding: 5px;">

<div style="display: none;">

Teks yang disembunyikan/yang berada di dalam spoiler

</div>

</div>

</div>

Keterangan :

Ganti tulisan dengan tulisan Teks yang disembunyikan/yang berada di dalam spoiler yang anda inginkan.

Please subscribe, leave a comment, follow this blog and share this article with your friends and colleagues.
by: http://blityan.blogspot.com

Share This On :

Tweet

Related Post :