Membuat Spoiler Open Close Keren di Blog

Membuat Spoiler Open Close (Show Hide) Keren di Blog - Spoiler merupakan sebuah fitur yang digunakan untuk menyembunyikan barisan text panjang, gambar dengan resolusi besar, video, atau widget dan pembaca bisa melihatnya dengan hanya meng-klik sebuah tombol. Pembaca juga bisa menyembunyikannya kembali dengan menekan ulang tombol tersebut.

Penggunaan Spoiler pada awalnya diterapkan di situs forum seperti kaskus, indowebster, dan forum lainnya untuk menyembunyikan tulisan atau gambar yang terlalu panjang. Namun seiring meingkatnya dunia blogging penggunaan Spoiler juga seringkali diterapkan di blog atau website.

Keuntungan menggunakan spoiler ini adalah menghemat space posting, dapat mempercepat loading halaman konten, dan secara otomatis akan menghemat kuota pembaca.

Masalahnya fitur spoiler ini tidak disediakan blogger pada panel editor posting seperti forum-forum yang menyediakan fitur spoiler pada panel editor posting menggunakan vbulletin. Tetapi jangan khawatir, walaupun blogger tidak menyediakan fitur ini, anda bisa menggunakan kode-kode untuk membuatnya saat akan melakukan posting. Berikut beberapa kode spoiler dengan tampilan berbeda-beda yang bisa anda gunakan di postingan blog.

Cara Membuat Spoiler Open Close Show Hide Keren di Blogspot

Spoiler 1

Text, URL Gambar, Video atau Widget anda Disni

<div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none repeat scroll 0% 0% RED; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: yellow; padding: 10px; text-align: justify;">
Text, URL Gambar, Video atau Widget anda Disni</div>
</div>
</div>
</div>

Spoiler 2

Text, URL Gambar, Video atau Widget anda Disni

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="background: none repeat scroll 0% 0% yellow; border: 1px dashed red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width: auto;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background-color: yellow; border: 2px dashed red; color: blue; padding: 10px; text-align: justify;">
Text, URL Gambar, Video atau Widget anda Disni</div>
</div>
</div>
</div>

Spoiler 3

Judul Spoiler :

Text, URL Gambar, Video atau Widget anda Disni

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b> : <input value="Buka" style="margin: 0px; padding: 0px; width: 70px; font-size: 15px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Text, URL Gambar, Video atau Widget anda Disni <br>
</div>
</div>
</div>

Catatan :
1. Anda bisa melakukan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute seperti bold/italic, dari Spoiler tersebut.
2. Isi dari Spoiler juga bisa dimasukkan kode div style seperti di bawah ini, sehingga bentuknya seperti tabel yg ada scroll bar-nya.

<div style="padding:10px; overflow:auto; width:200px; height:200px;" 1px="">
Text, URL Gambar, Video atau Widget anda Disni</div>

Cara Memasang Spoiler di Postingan
Masuk ke menu editor postingan, silahkan tulis artikel pada mode Compose dan ketika ingin memasukkan kode spoiler ke dalam artikel, silahkan ubah mode Compose ke mode HTML kemudian letakkan kode spoiler beserta isi spoiler ke tempat yang anda inginkan didalm artikel postingan.

Cara Memasang Spoiler di Sidebar atau Footer
Pada menu blogger atau dashboard, silahkan pilih menu Tata letak lalu klik Tambahkan gadget pada area yang anda inginkan baik itu di sidebar, footer, atau dibawah header tergantung letak link tambahkan gadget. Kemudian pilih HTML/JavaScript lalu letakkan kode spoiler beserta isi spoiler ke kotak konten.

Bagaimana sobat? Cukup mudah bukan? Kalian tinggal copy paste kode diatas apabila anda berminat dengan spoiler tersebut.

Demikian tutorial sederhana mengenai bagaimana cara membuat spoiler open close show hide keren di blogger. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG