Cara Memasang Tombol Spoiler Di Postingan Blog

aryaproject.blogspot.co.id - Pada kesempatan kali ini saya akan membagikan Cara Memasang Tombol 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 kalian 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.

Tombol Spoiler juga sering kali dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu .

Membuat spoiler dengan isi teks

Contoh nya seperti ini :

Klik Show Untuk Membuka Spoiler

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

Cara pemasangannya , Kalian tinggal copy kan kode di bawah ini ke postingan jangan lupa sebelum memasangnya klik tombol HTML terlebih dahulu

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" 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 = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah  Inilah kode untuk membuat spoiler dengan teks </div></div></div>

Keterangan :

• Tulisan yang berwarna Merah bisa kalian ganti sesuai yang kalian inginkan 
• Dan untuk tulisan yang berwarna Biru pun bisa kalian ganti sesuai tulisan yang kalian inginkan

Membuat spoiler dengan isi Gambar 

Contohnya seperti ini :

Spoiler :

Cara pemasangannya sama seperti Membuat spoiler dengan isi teks di atas tinggal copy kode di bawah ini ke postingan Blog kalian , berikut kode nya

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<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>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSuyC5BN-cd4T1DwJqxNM70K4rsGdcGaxcybsmDuV5LxTfUKgGFJBGkpRMBpIzr8REwvtnNxFc1uHSAmKKDoMQf8Evl6KUBi4mCc6ozZAnj8b0pvlM9uIurbBBcVcq0JnphyvNenjt_v8/s400/FGFBFBF.jpg" border="0" alt="Post spoiler">
</div>
</div>
</div>

Keterangan :

• Kode yang berwarna Biru bisa kalian ubah dengan URL gambar kalian 

Selesai tinggal kalian posting Artikel nya dan lihat hasil nya :)

Sekian artikel saya tentang Cara Memasang Tombol Spoiler Di Postingan Blog . semoga bermanfaat untuk kalian . jika ada pertanyaan bisa tinggalkan komentar di bawah atau bisa kirim saya pesan melalui Contact Form atau Live chat :) dan jangan lupa klik tombol Share di bawah ini ya , Terimakasih 

Artikel Terkait