Membuat Spoiler Sederhana Pada Blog

Mungkin sudah banyak yang membahas tentang cara membuat spoiler. Coba saja search di Mbah Google. Namun saya akan mencoba membahas dengan cara saya yang lain. Ketika kita menulis artikel yang lumayan panjang dan mencantumkan beberapa gambar, apalagi gambar tersebut memakan memori yang cukup besar a.k.a BW a.k.a Bandwith Killer. Yaitu menyebabkan loading menjadi lama alias lama.

Kalau kita melihat di forum-forum seperti : Kaskus, Indowebster, dll. Maka, untuk mengatasi hal tersebut di buatlah spoiler. Jika di Kaskus untuk menampilkan sebuah spoiler hanya mengetikan tulisan : [spoiler=judul spoiler] isi judul [/spoiler]. Apakah bisa kita terapkan hal seperti itu di blog? Jawabannya tentu bisa, kita hanya perlu mengcopy-paste artikel di bawah ini :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i>Judul Spoiler </i><input value="Show" style="margin: 0px; padding: 0px; width: 80px; 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="">

Isi Posting / Artikel

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

Copy-paste kode tersebut di halaman posting.
Tulisan berwarna Merah di isi untuk Judul Spoilernya.
Sedangkan Tulisan berwarna Biru, untuk Isi Posting / Artikel

Contoh :

Judul Spoiler

Isi Artikel / Posting

Akan tetapi cara di atas, mungkin agak sedikit rumit bagi dan terkesan kurang simple. Apakah ada cara yang lebih simple, seperti yang ada di forum-forum selama ini? Tentu ada. Tetapi cara ini membutuhkan pengaturan di CSS. Bagi yang sudah paham, mungkin mudah. Akan tetapi bagi yang belum, nggak usah takut. Selama mengikuti langkah-langkah yang ada.

1. Login ke akun blogger anda,
2. Klik "Layout / Rancangan",
2. Klik "Layout/Rancangan"
3. Klik "Edit HTML"
4. Sebelumnya, backup dulu template anda apabila terjadi kesalahan. Klik "Download Template Lengkap"
5. Setelah itu beri tanda centang "Expand Widget Templates"
6. Lalu carilah kode
]]></b:skin>

7. Setelah itu letakan kode berikut ini di atas kode yang tadi disebutkan,
.commenthidden {display:none;}
.commentshown {display:inline;}

8. Setelah itu, letakan kode berikut ini :

<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

} </script>

di bawah kode ]]></b:skin>

9. Maka hasilnya akan seperti ini :

.commenthidden {display:none;}
.commentshown {display:inline;}

]]></b:skin>

<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

} </script>

10. Setelah itu Save

Langkah selanjutnya adalah kita kembali ke postingan yang ingin di beri atau di tambahkan spoiler. Adapun langkah-langkahnya adalah :

1. Klik "Entri Baru/New Entry"
2. Dalam pembuatan artikel/posting klik "Edit HTML" bukan "Tulis"
3. Lalu ketikan/copy kode berikut ini :

<a aiotitle="click to expand" href="javascript:togglecomments('spoiler1')">Judul Spoiler</a>
<div class="commenthidden" id="spoiler1">Isi Spoiler</div>

Tulisan Judul Spoiler yang berwarna biru, bisa di ganti sesuai keinginan dengan judul yang ingin diberikan, lalu tulisan Isi Spoiler yang berwarna merah, adalah tempat dimana artikel/posting akan diletakkan.

Hasilnya:
Judul Spoiler

Isi Spoiler

(Coba di klik tulisan Judul Spoiler nya)

Lalu, bagaimana jika kita menggunakan banyak spoiler, perhatikan tulisan spoiler1 yang berwarna hijau, di situ adalah tempat perubahannya.

Contoh :

<a aiotitle="click to expand" href="javascript:togglecomments('spoiler1')">Judul Spoiler 1</a>
<div class="commenthidden" id="spoiler1">Isi Spoiler 1</div>

<a aiotitle="click to expand" href="javascript:togglecomments('spoiler2')">Judul Spoiler 2</a>
<div class="commenthidden" id="spoiler2">Isi Spoiler 2</div>

Hasilnya :
Judul Spoiler 1

Isi Spoiler 1

Judul Spoiler 2

Isi Spoiler 2

(Coba di klik tulisan Judul Spoiler nya)

Akhirnya jadilah spoiler yang lebih simple. Akan tetapi hal ini tergantung dari pembaca, manakah yang lebih enak di gunakan. Untuk mengcopy codenya, kode berada di kolom komentar. Terima kasih