Membuat Spoiler Open Close Keren Di Blog

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

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

Keuntungan memakai spoiler ini yaitu menghemat space posting, sanggup mempercepat loading halaman konten, dan secara otomatis akan menghemat kuota pembaca.

Masalahnya fitur spoiler ini tidak disediakan blogger pada panel editor posting menyerupai forum-forum yang menyediakan fitur spoiler pada panel editor posting memakai vbulletin. Tetapi jangan khawatir, walaupun blogger tidak menyediakan fitur ini, anda sanggup memakai kode-kode untuk membuatnya ketika akan melaksanakan posting. Berikut beberapa isyarat spoiler dengan tampilan berbeda-beda yang sanggup 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 sanggup melaksanakan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute menyerupai bold/italic, dari Spoiler tersebut.
2. Isi dari Spoiler juga sanggup dimasukkan isyarat div style menyerupai di bawah ini, sehingga bentuknya menyerupai 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 hidangan editor postingan, silahkan tulis artikel pada mode Compose dan ketika ingin memasukkan isyarat spoiler ke dalam artikel, silahkan ubah mode Compose ke mode HTML kemudian letakkan isyarat spoiler beserta isi spoiler ke kawasan yang anda inginkan didalm artikel postingan.

Cara Memasang Spoiler di Sidebar atau Footer
Pada hidangan blogger atau dashboard, silahkan pilih hidangan Tata letak kemudian 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 kemudian letakkan isyarat spoiler beserta isi spoiler ke kotak konten.

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

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

Sumber https://harmansh.blogspot.com/

Berbagi :