Mari Belajar.
Mari kita bersama belajar sesuatu yang berguna di sini

Membuat Spoiler

Labels:
Spoiler atau boleh juga di bilang tombol otomatis " Menurut saya " banyak sekali manfaat yang bisa di ambil dari tombol spoiler tersebut.

Fungsi spoiler pada blog, mempercantik penatataan blog, menghemat tempat, mempersingkat loading blog.

Spoiler juga dapat di gunakan saat membuat posting video atau gambar dan lainnya, dengan maksud agar saat para pembaca yang ingin membaca artikel kita, tidak membutuhkan waktu yang lama untuk loading ke artikel tersebut.

Cara membuat Spoiler sangatlah mudah, anda tinggal copy dan paste kode spoiler di bawah ini.
by : diary Osi




Membuat spoiler seperti di atas, anda cukup meletakkan kode buku tamu di antara kode spoiler.

<center><div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="font-weight: bold; color: rgb(0, 102, 0);">

KODE SCRIPT BUKU TAMU, ATAU KODE GAMBAR/VIDEO, ATAU KODE SCRIPT YANG INGIN DI TAMPILKAN DALAM BENTUK SPOILER LETAKKAN DI SINI.


</span></div></div></center>



Untuk mengatur warna rgb teks spoiler yang di inginkan silahkan ke Google

Untuk membuat spoiler teks tidak berkedip, anda tinggal hapus kode <blink>
dan </blink> pada kode spoiler di atas.

Satu hal lagi yang sangat perlu anda perhatikan, jangan lupa untuk mengganti teks
" J U D U L S P O I L E R " sesuai dengan yang anda inginkan


Ini kode sript untuk membuat spoiler satu lagi

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

</div></div></div></div>


Tampilkan" 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'; }" type="button"/>




Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat


Ket:
-.Biru: Silahkan anda ganti dengan kata-kata yang anda inginkan misal: Munculkan, atau show!
-.Orange: Anda bisa menggantinya dengan kata yang anda inginkan, misal: Hide, atau hilangkan!
-.Hijau: Silahkan disisipi dengan teks atau kode yang memang perlu disingkat.

Oh yaaa..... satu hal lagi yang sangat mutlak dan wajib adalah, jangan lupa di save setelah selesai bikin spoiler.
He...he...he.....

Selamat mencoba.
0 comments:

Post a Comment

Tanks atas kunjungannya ke blog ini


Followers

Site Info

free counters

Comment