Cara Membuat Spoiler di Postingan Blog

Spoiler adalah sebuah fitur dalam blog   fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali  dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

A. Membuat spoiler dengan isi teks

Klik Show Untuk Membuka Spoiler

Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Kode spoiler untuk isi gambar di atas;

<br /> <div class="MsoNormal"> <span style="font-size: 8pt; line-height: 115%;"><div style="margin-bottom: 2px;"><span style="color: red;">Klik Show Untuk Membuka Spoiler</span><br /> <div style="margin-top: 5px; text-align: center;"><input value="<span style="color: red;">Show</span>" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '<span style="color: red;">Show</span>'; }" type="button"> </div><br /> <div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><span style="color: blue;">Memasang spoiler di blog sangat mudah  Inilah kode untuk membuat spoiler dengan teks</span> </div></div></div</span></div> <div class="MsoNormal"> <br /></div> <div class="MsoNormal"> <br /></div> <h4 style="color: blue;">

B. Memasang spoiler dengan isi image atau gambar

Spoiler :

Kode spoiler untuk isi gambar di atas;

<br /> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;"> <br /></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"> <span style="font-size: 8pt;"><div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><br /> <b>Spoiler</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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><br /> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><br /> <div style="display: none;"></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in;"> <span style="color: blue; font-size: 8pt;"><img src="http://julak-project.googlecode.com/files/photos.png" border="0" alt="Post spoiler"></span></div> <div class="MsoNormal"> <span style="font-size: 8pt; line-height: 115%;"></div><br /> </div><br /> </div> </span></div> <div class="MsoNormal"> <br /></div> <div style="text-align: justify;">

Perhatikan cara memasang kode url gambar. Ganti http://julak-project.googlecode.com/files/photos.png dengan alamat gambar sobat sendiri yang sudah dihost.
Saat menulis artikel masuk ke menu  HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.

---

Mari Kita Saling Menghargai Sesama Blogger

Apabila anda merasa artikel ini bermanfaat, silahkan share dimana saja.

Dan jika berkenan mohon mencantumkan link sumbernya. Terima Kasih.

www.ip1n.blogspot.com

---

Related Post