Cara Membuat Spoiler Berisi Gambar di Blog

Caranya :

1. Login ke Blogger
2. Pilih New Post atau Entri Baru
3. Kemudian pilih mode HTML (selain Compose) saat membuat entri baru
4. Sisipkan kode script di bawah ini untuk membuat spoiler :
<div id="spoiler"> <div> <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT'; }" style="font-size: 11px; margin: 5px 0px 20px; padding: 1px; width: 55px;" type="button" value="LIHAT" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 0px 0px 0px 0px; padding: 0px; width: 100%;"> <img alt="spoiler pada blogspot" class="aligncenter" height="250" src=" LINK GAMBAR " width="250" /> </div> <div id="hide"> </div> </div>
5. Ganti tulisan LINK GAMBAR dengan link gambar anda sendiri, misal :
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvsKMWSK6RP57WHY_y8b_REgwkvnIQQk1BrHNOCyYvCV_0B1gzOxogJFfdF5_AdsdiDb3jTI7hJmgyV6oe_ErFqZPKV9FepB1PlTid4TBAzYMbehkyxiQg72Mx0hlb8pr3i8llqZkeRjq/s1600/zombie.gif
6. Kemudian klik Publish atau Publikasikan dan lihat hasilnya
7. Contoh :

Semoga bermanfaat, selamat mencoba...

Related Post: