Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup

Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup - Bagi anda yang sering posting artikel yang menyajikan kode-kode HTML, Javascript, dll saya yakin sering menggunakan kotak-kotak spoiler untuk menamlikannya agar terlihat lebih menarik. Memang jika menggunakan kotak-kotak seperti itu membuat artikel yang kita posting lebih elegan.

Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup

Sekarang banyak jenis-jenis kotak spoiler tersebut yang dibuat semenarik mungkin, sehingga pengunjung blog anda akan tidak cepat bosan jika membaca dan mempraktekan artikel-artikel yang anda posting. Artikel saya kali ini tentang Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup dan akan langusng saya jelaskan cara memasang nya di postingan dan di menu gadget dengan design yang polos-polos saja yang penting Seo Friendly, hehe :)

Cara Membuat Kotak Spoiler Buka Tutup di Postingan Blog

  • Pertama, pada menu pos, klik "Entri Baru", kemudian disana ada dua tombol yaitu Compose dan HTML, anda pilih yang HTML, lihat gambar di bawah :
    Membuat Entri Baru di BlogMemilih Halaman HTML di Dalam Postingan Blog
  • Kemudian copas kode di bawah ini pada halaman postingan anda, ini juga merupakan hasil jadinya nanti seperti di bawah ini :

    <!---Start code show hide by;"dikaeuphrosyne.blogspot.com"--->
    <div style="margin-bottom: 2px;">
    <div style="margin-top: 5px; text-align: center;">
    <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="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div>
    <div style="background-color: #cccccc; border-bottom: 1px solid #ff0000; border-left: 4px solid #ff0000; border-right: 1px solid #ff0000; border-top: 1px solid #ff0000; margin: 0px; padding: 6px;">
    <div style="display: none;">
    <span style="color: black; font-style: italic;">
    (TULIS DESKRIPSI DISINI)
    </span></div>
    </div>
    </div>
    <!---End code show hide by;"dikaeuphrosyne.blogspot.com"--->


  • Keterangan :
    • #cccccc; ini merupakan warna background nya, silahkan di ubah sesuai selera anda.
    • (TULIS DESKRIPSI DISINI) Silahkan tulis deskripsi yang ingin anda buat dalam kotak spoiler buka tutup ini, jika ingin menampilkan gambar silahkan copas url gambarnya, jika ingin menampilkan kode HTML, dll silahkan di copas disini, biasanya saya kalau ingin menampilkan kode HTML di kotak spoiler ini saya merubah kode "<" menjadi "&lt;" (tanpa tanda kutip) dan kode ">" menjadi "&gt;". Jika sobat blogger tahu cara yang lebih sederhana, silahkan share di kolom komentar :) hehe..

Cara Memasang Kotak Spoiler di Menu Footer Dengan Tombol Buka Tutup

  • Pertama, silahkan  cari menu Tata Letak, lalu pilih "Tambah Gadget".
    Mencari menu Tata Letak di Blog











  •  Setelah itu cari dan klik tanda + "HTML/Javascript". Seperti pada gambar di bawah :
    Mencari Menu Edit HTML/Javascript di Blog 
  • Setelah terbuka menu konfigurasi HTML/Javascriptnya, copas kode kotak spoiler yang di atas tadi ke menu konfigurasi HTML/Javascript.
  • Ubah tulisan (TULIS DESKRIPSI DISINI) dengan gambar atau tulisan yang anda inginkan, jika sudah maka klik "Selesai". Contoh seperti yang saya gunakan pada halaman footer blog saya ini :
Site Info Blog dikaeuphrosyne.blogspot.com

Sekian artikel saya tentang Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup mudah-mudahan bermanfaat bagi sobat blogger semua, Terima Kasih^_^
Cara Membuat Kotak Spoiler di Blog Dengan Tombol Buka Tutup
4/ 5
Oleh

Berlangganan via email

Suka dengan postingan di atas? Silakan berlangganan postingan terbaru langsung via email.

47 komentar

Tulis komentar
avatar
30 Oktober 2013 02.55

sepertinya keren ya kalau dalam postingan ada spoilernya. Jadi kita bisa menyembunyikan gambar ataupun kode script html. selama ngeblog saya belum pernah pasang spoiler di dalam postingan karena nggak tahu heheh :D. Tapi ini bisa dicoba nich tutorialnya :)

Reply
avatar
30 Oktober 2013 03.13

supaya lebih keren gitu kelihatannya, hehe :)
silahkan di coba mbak tutorialnya..

Reply
avatar
30 Oktober 2013 04.03

blognya sudah saya follow ya hehe. artikelnya seksi haha

Reply
avatar
30 Oktober 2013 06.25

bisa meminimalkan space blog nih, bisa juga bikin rapih tampilan blog juga :) trims

Reply
avatar
30 Oktober 2013 07.20

@Baskoro Suryandriyo : haha :D seksi dari mana nya ?

@Intan Sudibjo : hehe :) iya sob, buat variasi juga bagus, :D

Reply
avatar
30 Oktober 2013 08.11

postingan jadi rapi ya bro , , ,
izin pake script nya, , , ,


mampir di http://nawayhac.blogspot.com

Reply
avatar
30 Oktober 2013 10.40

Kayaknya selama ini saya belum pernah menggunakan kotak spoiler deh, wah harus dicoba juga nie sob :) thanks udah share tutorialnya

Reply
avatar
30 Oktober 2013 17.51

@ini QiiNoY : silahkan sob, menuju ke tkp..

@Marnes Kliker : oke sob, silahkan dicoba dulu, hehe :)

Reply
avatar
30 Oktober 2013 18.37

Selain keren apakah akan mempengaruhi waktu loading blog gan ?
Terimakasih sudah share , salam sukses

Reply
avatar
30 Oktober 2013 19.30

klo dibilang mempengaruhi loading blog itu pasti sob, tapi pengaruh nya sedikit..

Reply
avatar
30 Oktober 2013 20.46

jadi variatif kelihatan dinamis blognya klo pake spoiler ini

Reply
avatar
30 Oktober 2013 21.39

bener sob, menghemat tempat juga, hehe :)

Reply
avatar
31 Oktober 2013 00.15

Keren juga nich bisa bikin postingan jadi ramping :)

Reply
avatar
31 Oktober 2013 02.34

iya sob, lumayan untuk menghemat tempat, hehe :)

Reply
avatar
31 Oktober 2013 06.13

tapi saya sering kesulitan untuk memasangnya enyah kenapa.
follow nalik di blog saya ya mas. firdausquotes.com

Reply
avatar
31 Oktober 2013 06.18

variasi buat blog? boleh juga mas :)

Reply
avatar
31 Oktober 2013 06.50

@faisal firdaus : apakah kesulitan saat memasukan deskripsi ke dalam kotak spoiler nya itu ?? atau yang lain sob ??

@Intan Subidjo : iya Sob, lumayan buat variasi, seperti di bagian footer blog saya ini, buat ngumpetin site info nya, hehe :)

Reply
avatar
31 Oktober 2013 06.51

script nya saya simpan dulu sob.trims!

Reply
avatar
31 Oktober 2013 07.30

oke sob, silahkan disimpan dulu..

Reply
avatar
31 Oktober 2013 08.23

biasanya digunakan untuk artikel bergambar ya mas, jadi loadingnya lebih cepat :)

Reply
avatar
31 Oktober 2013 08.29

iya sob, bisa mempercepat juga, tpi biasanya ini digunakan untuk script2 HTML, javascript, dkk...

Reply
avatar
31 Oktober 2013 19.29

oke nih blog,,,

~kunjungan perdana, langsung follow

Reply
avatar
31 Oktober 2013 23.22

saya tunggu artikel barunya :)

Reply
avatar
1 November 2013 03.45

Dalam kebutuhan tertentu spoiler memang diperlukan.. bisa jadi bahan referensi nih...

Reply
avatar
1 November 2013 04.51

Dengan adanya kotak spoiler, maka kita bisa menyembunyikan gambar dan juga bisa meringankan loading blog ya mas. Luar biasa spoiler ini. Jadi penasaran saya ingin mencobanya :)

Reply
avatar
1 November 2013 05.02

Dari dulu pingin coba spoiler ini..cuma baru tau cara nya se karang..
Perlu di tester nih :)

Reply
avatar
1 November 2013 06.45

@Baskoro Suryandrio : oke sob, mudah2an cepet bis aposting artikel lagi, tadi sempet sibuk di dunia nyata soalnya -_-

@Adjie Umbara : betul sob,spoiler seperti ini biasanya juga diperlukan untuk menunjang dalam pembuatan artikel, dll.

@Mbak Ririn : Betul sekali mbak, silahkan dicoba mbak spoiler nya, hehe :)

@Budi os 19 : ayo sob, di test dulu spoiler nya,hehe :)

Reply
avatar
1 November 2013 09.43

Ternyata dengan menggunakan spoiler pada blog bisa membantu meringankan loading blog ya sob...

Reply
avatar
1 November 2013 17.10

iya sob, jika menggunakan gambar yang berukuran lumayan besar dalam potingan itu bisa di buatkan spoiler ini,

Reply
avatar
23 Desember 2013 17.08

permisi numpang promosi
yang mau download software mampir ke
http://softwar3zone.blogspot.com/

Reply
avatar
30 Desember 2013 17.22

Mantap bro .. jangan lupa kunjungan baliknya ya sob http://pengalamankunews.blogspot.com/

Reply
avatar
6 Januari 2014 05.11

keren gan,..kunbal yaa,..masih newbie

http://ivankvalentine.blogspot.com

Reply
avatar
16 Januari 2014 07.31

Nice Info Jhondt Jangan Lupa Mampir Ke BLog Dika : http://rasdikahaw.blogspot.com/ .

Reply
avatar
11 Februari 2014 06.17

Like this

Mampir ke blog ku gan http://airbeauty886.blogspot.com
Tukar Link juga ya ,thanks

Reply
avatar
15 Februari 2014 06.40

Saya selalu memakai kota spoiler untuk file-file dalam posting yang memang perlu saja. Tapi boleh diposting dong Mas kapan-kapan mengenai spoiler yang unik tadi, seperti yang di atas ada gambar logo blogger

Reply
avatar
17 Februari 2014 17.45

Sangat bermanfaat, terimakasih udh share.. Moga nanti bisa diaplikasikan keblog ane yg baru belajar..

Reply
avatar
21 Februari 2014 12.15

weh mantap ni.. bisa ane cobain di

MajalahGreen.blogspot.com

yang banyak gambar-gambarnya sehingga kurang rapih

Reply
avatar
24 Februari 2014 22.56

mampir ya bang
http://cybermanlink.blogspot.com/

Reply
avatar
4 Maret 2014 04.57

Pengen juga sesekali memanfaatkan spoiler di postingan, salam kenal aja & terima kasih buat sharenya.

Reply
avatar
26 Maret 2014 05.32

terimakasih mas, Allhamdulillah membantu saya

Reply
avatar
27 April 2014 23.41

Makasih atas info berharganya gan, sekalian minta izin copy-paste buat dipraktekin di blog ane..

Reply
avatar
10 Mei 2014 18.19

artikel ya sangat bagus makasih ya

Reply
avatar
4 Juli 2014 20.14

izin ane terapakan gan

Reply
avatar
7 Juli 2014 04.17

Mantap bagi saya yg newbie....
thank's mas bro...!!!

lihat...http//cv-kanaanjaya.blogspot.com...jg ya...

Reply
avatar
8 Mei 2016 06.30

Trima kasih informasinya, bagi saya sangat bermanfaat dan nambah pengetahuan, ok Mas.

Reply

Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>