Cara Membuat Spoiler Di Blog

Posted by

Assalam, baru saja saya posting Cara membuat Blockquote,
sekarang akan saya bahas lagi tutorial Blogging, kali ini saya bahas mengenai cara membuat spoiler.
Bagi yang belum tahu apa itu spoiler, coba klik button di bawah ini

Klik Disini --- > 
Inilah yang di sebut dengan spoiler, merupakan media untuk kita menyembunyikan teks, gambar, maupun video, sehingga tampilan postingan kita terkesan rapi,
sudah paham bukan, apa itu spoiler? klik lagi tombol "Tampilkan" untuk menyembunyikan teks ini
Untuk Spoiler diatas, di gunakan untuk menyembunyikan teks saja,
Berikut Scriptnya:


<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="color: red;">Bisa Diisi dengan judul spoiler</span>&nbsp;<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Tampilkan" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 5px;">
<div style="display: none;">
Masukkan teks Sobat Di Sini </div>
</div>
</div>
SCRIPT SPOILER UNTUK MENYEMBUNYIKAN GAMBAR
spoiler untuk menyembunyikan gambar ini agak sedikit lebih susah di banding spoiler isi teks,
1. Sobat Masukkan gambar terlebih dahulu ke postingan sobat, melalui menu insert image (Lihat Gambar Di bawah)

2. lalu klik menu "HTML" sebelahnya "Compose"
3. cari kode gambarnya, biasanya seperti ini
height="320" src="http://1.bp.blogspot.com/-dklyjgCv0PY/UMGubdLZM1I/AAAAAAAAAPE/99-bU7l3WTo/s400/namagambar.jpg" width="99"
4. Jika sudah ketemu biarkan saja, pastekan script berikut untuk membuat spoiler nya:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="color: red;">Gambar</span></i> <span style="color: red;"><i>-- &gt;</i></span>&nbsp;<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img alt="picture" border="0" class="center" height="320" src="http://3.bp.blogspot.com/-lsYZAqbRUf8/UMGNombzpWI/AAAAAAAAAOU/gLnBt9nrEXM/s320/namagambar.jpg" width="99" /></div>
</div>
</div>

teks yang berwarna merah di atas, gantikan dengan kode gambar yang sudah di temukan tadi, kalo sudah di copas, sobat bisa hapus gambar yang tadi di masukkan.
selesai tuh,
selamat mencoba,
Sekian Tutorial dasar blogging sore kali ini,
jangan lupa tinggalkan komentar,
wassalam...
^.^


FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Demo Blog NJW V2 Updated at: 3:41 PM

0 comments:

Post a Comment

Berkomentar lah dengan sopan, tidak menyinggung unsur SARA, Silahkan jika mau mencantumkan Link dan mohon untuk tidak mencantumkan Link yang mengarah ke website dengan konten dewasa.
Terima kasih sudah berkomentar.