Menyembunyikan dan Menampilkan Sebagian Konten Tulisan (Spoiler) dalam Blogspot

Temen-temen mungkin pernah melihat tulisan dalam website atau forum dimana bagian beberapa bagian dalam tulisannya tidak muncul tapi diganti dengan link shortcut untuk memunculkan bagian yang disembunyikan tersebut (misalnya buat yang biasa membuka Kaskus pasti sering melihat ikon Spoiler, dimana saat kita klik ikon tersebut maka akan muncul gambar atau tulisan yang disembunyikan).

Tulisan saya kali ini berkaitan dengan Spoiler (dalam tulisan ini saya menganggap Spoiler = menyembunyikan dan menampilkan bagian tulisan) tersebut, hanya saja kita menerapkan Spoiler tersebut dalam Blogspot. Dengan adanya Spoiler ini kita bisa menghemat tempat pada tulisan kita (kita dapat menyembunyikan bagian tertentu dalam tulisan yang panjang, jika pembaca ingin melihat maka pembaca dapat mengklik shortcut Spoiler ini untuk melihatnya). Spoiler ini sendiri mirip dengan Read more, hanya saja Read more muncul pada halaman Home atau halaman Kategori tertentu, sedangkan Spoiler ini bermanfaat saat membuka halaman tulisan tertentu.

Untuk lebih jelasnya, berikut saya informasikan langkah-langkah pembuatannya.

Pertama kita masuk ke panel Edit Html, pada menu Layout, jangan lupa aktifkan Expand Widget Templates, kemudian cari tag < /head >.

Kemudian masukkan script berikut ini di atas tag < /head >, klik Preview (jika Preview blog kita muncul berarti script kita sudah benar, sebaliknya jika tidak muncul alias error, silakan cek kembali apakah ada script yang terlewatkan). Simpan templates jika sudah benar.

<style type='text/css'>
.spoilerhide {display:none}
.spoilershow {display:inline}
</style>
<script type='text/Javascript'>
function spoiler (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=='spoilershow') { whichpost.className='spoilerhide'; } 

else { whichpost.className='spoilershow'; }
} </script>

Langkah berikutnya adalah memasang script lain pada tulisan yang kita buat dan ingin kita pasangi Spoiler. Untuk pemasangan script ini kita tentukan dulu bagian mana dari tulisan yang ingin kita sembunyikan terlebih dahulu, setelah itu kita masuk ke mode Edit HTML. Selanjutnya kita masukkan script berikut ini. Bagian yang akan kita sembunyikan berada di tengah script yang kita pasang ini (Bagian yang disembunyikan). Link title sendiri kita isi dengan nama link shortcut.

<a href="javascript:spoiler('Spoiler')" title="click to expand">

Click here to view more</a>
<div class="spoilerhide" id="Spoiler">
Bagian yang disembunyikan
</div>

Gambar berikut adalah tulisan dalam Blogspot sebelum dipasang script Spoiler.

Gambar berikut adalah tulisan yang sama tapi sudah dipasangi script Spoiler. Dalam tulisan ini bagian Key Features tidak terlihat tapi ada tambahan shortcut Click here to view more. Saat kita klik shortcut tersebut maka otomatis Key Features akan muncul, dan saat kita klik kembali shortcut tersebut, maka Key Features akan disembunyikan kembali.

Bagian tulisan yang kita sembunyikan bisa berupa teks ataupun gambar. Untuk contoh langsung, temen-temen bisa mencoba mengklik short cut di bawah ini.

Demo (Spoiler berisi teks Link dan gambar)