Cara Membuat Spoiler di Blogspot

Cara Membuat Spoiler di Blogspot

Mungkin anda ingin menyembunyikan gambar/banner, teks ataupun video di blog dimasksudkan untuk menghemat lahan atau space di blog anda, kita bisa menggunakan Spoiler untuk mengatasi hal tersebut.

Kalau kita suka memasang gambar/banner yang besar yang mungkin waktu loadnya lama, otomatis waktu loading blog kita pun akan menjadi lama, itu bisa sedikit kita atasi untuk mengurangi waktu load blog kita dengan menyimpan gambar/banner tersebut di dalam Spoiler ini.

Oke langsung saja, dibawah ini adalah kode untuk membuat Spoiler di blogspot:

<div style="margin-bottom: 2px;">Judul Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

ISI SPOILER

</div></div></div>

Keterangan:
=>> Tulisan yang berwarna merah bisa kita ganti sesuai keinginan dan kebutuhan kita.

=>> Tulisan yang berwarna biru, itu untuk isi Spoiler. Jika spoiler ingin berisi gambar, anda upload dulu gambarnya ke hosting gambar seperti photobucket, tinypic, imageshack dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload. Jika spoiler ingin berisi video, ganti 'isi spoiler' dengan embed kode video.

Hasilnya seperti dibawah:

Judul Spoiler

ISI SPOILER

Anda baru saja selesai membaca artikel di EpulJapanese Blog yang berjudul: Cara Membuat Spoiler di Blogspot

dengan URL: http://epuljapaneseblog.blogspot.com/2011/01/cara-membuat-spoiler-di-blogspot.html

Apabila anda menyukai artikel ini atau merasa bermanfaat silahkan bagikan artikel ini di Facebook, Google+ dan Twitter anda dengan meng-klik tombol-tombol Share yang ada diatas postingan ini.

Dapatkan artikel EpulJapanese Blog terbaru langsung ke email anda. Silahkan masukkan alamat email anda:

Related Post

Tips Trik Tutorial Ms.Office

• Cara Agar Dokumen Ms.Word Tidak Bisa di Copy dan di Edit
• Cara Agar Postingan Blog Tidak Bisa Copy Paste, di Blok dan klik Kanan
• Cara Dokumen Ms. Word Tidak Bisa di Edit
• Cara Menampilkan Kotak Komentar di Blogspot
• Cara Membuat Tabel di Postingan Blog Dengan Menggunakan Google Dokumen
• Memasang Windows Alert di Blog
• Cara Men-disable Klik Kanan dan Block di Blogspot
• Cara Mengganti Cursor di Blog Dengan Gambar
• Memasang Tombol Like Facebook di Blogger
• Beberapa Variasi Tulisan Chat di CBOX
• Indonesia Siap Bersaing di SERP
• Label di Klik Tampil Hanya Judul Postingan
• Cara Memasang Balas Komentar Pada Komentar di Blogspot
• Cara Membuat Scroll Pada Daftar Komentar di Blogspot
• Cara Memasang Status Yahoo Messenger ( YM ) di Blogspot
• Cara Menampilkan Background Pada Postingan Blogspot
• Cara Membuat Kotak Iklan Di Blog
• Cara Setting Blog Di blogger / Blogspot
• Cara Membuat Related Post di Bawah Postingan Blog
• Cara Membuat Slideshow Album Foto dan Menampilkannya di Blogspot
• Mendaftarkan Blog atau Web ke Search Engine
• Cara Membuat Scroll pada Label, Arsip Blog Atau Widgets Lain
• Cara Menampilkan Code HTML di Postingan Blogspot
• Cara Membuat Blog di Blogspot