Membuat Spoiler pada Blog

Spoiler merupakan salah satu cara yang dipakai oleh para pengguna forum untuk menyembunyikan/menampilkan gambar, tulisan, link, dll.

Dengan adanya spoiler ini maka akan memudahkan para pembaca untuk memahami isi tulisan.

Sekarang, mari kita buat spoiler tersebut pada blog kita. Perhatikan langkah-langkah berikut ini.

1. Login pada account Blogger anda.

2. Setelah itu, buatlah sebuah postingan baru yang akan anda sisipi spoiler.

3. Setelah selesai membuat postingan, klik pada tab “Edit HTML”.

4. Pilih tempat, dimana anda akan menyisipkan spoiler. Jika sudah, copy code di bawah ini.

<div> <div class="spoiltitle"> <b>Spoilers (bisa diganti):</b>  <input class="spoilbtn" onclick="javascript: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 = 'Klik untuk buka/tutup (bisa diganti)'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Click to View Content(bisa diganti)'; }" onfocus="this.blur();" type="button" value="Klik untuk buka/tutup(bisa diganti)" /> </div> <div class="spoildiv"><div style="display: none;"> <div> <br /> <img align="middle" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWdsozBhpKv2nGj1vbWVWMrAZdX184t16j_ZopPQQEoHyEzzJw_Wn0R46NRYN9TjPlIDgDJc-gnlUlk13kWEtV5DfmSEmTxfjKbGssymn-6ozuQsGgqCdOS3jqncksRh2SrxbocZz3KoXj/s320/Jurassic_Park_Operation_Genesis_B01.jpg" width="400" /> (bisa diganti) <br /> <br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA3SWyqE7e4GnG9QaMyV-S44hZsm7W-cI9ddxRjsOCHlmKNAGTp2pTF31RsbKhYwTb_S_RIeKaSXp1ykxvfS5C0vAZk3ATVE_cvHybNXQrcfhyphenhyphenisnIRBQLktLCBFgX0PnA0C7pkGmEk9JO/s320/Jurassic-Park-Operation-Genesis_3.jpg" width="400" /> contoh link (bisa diganti)</a> <br> <br> Visit <a href="fr-ee-it.blogspot.com"> me</a> , (bisa diganti) </div> </div> </div> </div>

5. Pembuatan spoiler sudah selesai.

Catatan :

Jika anda ingin merubah isi dari spoiler tersebut, anda harus mengubah isi di antara tag “<div style="display: none;"> ” dan “</div>(yang terakhir)”. Atau kalian bisa lihat, yang ada tulisan "bisa diganti", berarti itu bisa kalian edit sesuka kalian.

Untuk menulis kata, anda bisa langsung menulisnya diantara tag tadi. Jika ingin ganti baris ketikkan “<br>”.

Untuk mengisinya dengan gambar, ketikkan code berikut.

<img src="tempat online dimana anda menyimpan gambar">

Untuk mengisinya dengan link, ketikkan kode berikut.   

<a href="isi dengan link yang dituju">Tulisan yang ingin ditampilkan</a>

Satu lagi, jika anda ingin pada saat pertama load page, spoiler menampilkan isinya, maka anda harus merubah ““<div style="display: none;">” menjadi ““<div style="">”.