Akang Putra Belajar dan terus mencari ilmu baru sudah menjadi hobi, menulis hanya sekedar menuangkan ide yang ada dalam benak pikiran. Suka Wisata, Suka Kuliner. Menjadi diri sendiri dalam berkarya agar bisa bermanfaat untuk orang banyak

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

3 min read

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:
Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan

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

Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan

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

Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan

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][Tutup]
Ini adalah contoh cara membuat spoiler untuk membuat tulisan terbuka jika di klik pada postingan

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-

Akang Putra Belajar dan terus mencari ilmu baru sudah menjadi hobi, menulis hanya sekedar menuangkan ide yang ada dalam benak pikiran. Suka Wisata, Suka Kuliner. Menjadi diri sendiri dalam berkarya agar bisa bermanfaat untuk orang banyak

Tips Menulis Konten Blog Dengan Baik dan Benar Cara…

BERANDA PRINGSEWU – Blog adalah sebuah web yang bersifat lebih ke arah pribadi, lebih informal, dan terus di update setiap waktu dengan postingan terbaru...
berandapringsewu
3 min read

Tips Mengatur Waktu Bermain Game pada saat Ujian Nasional

BERANDA PRINGSEWU – Selamat datang diblog saya. Nah kali ini saya akan membahas artikel mengenai Tips Mengatur Waktu Bermain Game Pada saat Ujian Nasional....
Akang Putra
1 min read

Kegiatan Yang Bisa Dilakukan Pada Saat Libur Menjelang Ujian…

BERANDA PRINGSEWU – Selamat datang di blog saya, Dimana pada artikel ini saya akan membahas tentang Kegiatan Kegiatan yang bisa Dilakukan Menjelang Ujian Nasional....
Akang Putra
1 min read

3 Replies to “cara membuat spoiler untuk membuat tulisan terbuka jika di…”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *