cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan

Sahabat BP (Beranda Pringsewu) bukan Bambang Pamungkas ya,, Kali ini akang akan memberikan tips dan trik cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan. tentunya sahabat BP sudah ada yang tahu caranya atau sama sekali belum tahu caranya,, cara membuat spoiler sebenarnya sudah banyak di ulas dan di bahas di blog blog yang ada di internet. nah berikut ini akang mencoba mengarsipkan cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan di blog Beranda Pringsewu ini. yukkk... disimak

Apa itu Spoiler??? berikut ini penjelasannya

Spoiler adalah posting konten dapat berupa (teks, foto atau video) tersembunyi yang dapat dilihat apabila pembaca meng-klik tombol spoiler (buka/tutup) atau Show-Hide. Pembaca juga dapat menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca.

Untuk dapat menerapkan kode buka/tutup spoiler di blog ini sahabat dapat menggunakan mode HTML pada saat menulis posting. Caranya; Login ke Blogger > New Post atau Entri Baru > Pilih mode HTML, kemudian terapkan kode berikut ini untuk membuat spoiler (buka spoiler di bawah ini).

Contoh Model Spoiler Pertama

Judul:

Berikut ini adalah kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul: </span></i><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="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan</div>
</div>
</div>
</div>

Silahkan ganti yang berwarna merah sesuka sahabat BP, dan ganti juga tulisan yang berwarna biru sesuai dengan keinginan sahabat BP.

Contoh Model Spoiler Kedua

Berikut ini adalah Kode untuk membuatnya :

<div id="spoiler"><div><input
style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;"
onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display
= '';
this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display
= 'none'; this.innerText = ''; this.value = 'TUTUP'; } else {
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display
= 'none';
this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display
= ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT"
/></div><div id="show" style="border: 1px solid white;
display: none; margin: 5px; padding: 2px; width: 98%;"><p
style="text-align: justify;">Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan</p></div><div id="hide"></div></div></div>

Silahkan ganti kata yang berwarna biru sesuka sahabat BP, dan ganti juga tulisan yang berwarna merah sesuai dengan keinginan sahabat BP.

Contoh Model Spoiler Ketiga

Berikut ini adalah kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;"
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'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan</div></div></div>

Silahkan ganti kata yang berwarna ungu sesuka sahabat BP, dan ganti juga tulisan yang berwarna orange sesuai dengan keinginan sahabat BP.

Nahh,, Apabila sahabat BP ingin membuat spoiler tanpa tombol atau hanya teks aja gunakan kode ini :

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Buka]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Tutup]</a><br /> Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan </span>

Silahkan ganti kata yang berwarna ungu sesuka sahabat BP, dan ganti juga tulisan yang berwarna orange sesuai dengan keinginan sahabat BP.

Berikut ini Hasilnya:
[Buka]

Itulah tutorial cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan. Silakan tulis di kolom komentar apabila sahabat BP memiliki pendapat, ingin berbagi cerita keberhasilan menerapkan spoiler pada posting blog, ataupun ingin berbagi unek-unek karena gagal menerapkannya. Semoga bemanfaat untuk kita semua.

-Selamat Mencoba-

Label: Blogger, Tips dan Trik