Widget
spoiler adalah widget yang berfungsi untuk menyembunyikan tulisan atau
gambar yang ingin dishare di dalam sebuah artikel postingan. Jadi
tulisan atau gambar yang ada didalamnya jika diklik tombol spoilernya,
maka gambar atau tulisan tersebut akan terlihat. Apa kelebihannya?
Kelebihannya diantaranya adalah loading blog akan lebih ringan jika
gambar pada blog diletakan di dalam spoiler, lalu kelebihan yang lainnya
adalah akan menghemat tempat pada halaman yang diberi spoiler.
Bagaimana cara membuatnya? Cara pembuatannya cukup muda, silahkan ikui
langkah-langkah berikut untuk mencoba membuatnya.
Jika anda ingin menampilkan di postingan maka anda harus menuju ke postingan blog ada, caranya:
1. Login ke blogger dan menuju ke dasbor blog anda.
2. Pergi ke Posting lalu Entri Baru.
3. Pilih Edit HTML bukan Compose, seperti pada gambar berikut.
4. Lalu copy paste kode berikut ini di dalam kolom HTML.
<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Lihat teks atau gambar</span></i><input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">......>>>>>Isi dari widget spoiler disini<<<<<......</div></div></div></div>
Keterangan:
Warna merah --> Menunjukan
Warna merah --> Menunjukan
Warna biru --> Ganti dengan teks atau url gambar yang anda inginkan. Contoh spoilernya seperti berikut.
Source: http://superrefreshing.blogspot.com/2012/07/membuat-widget-spoiler-buka-tutup-pada.html#ixzz24tDLKVLM
Under Creative Commons License: Attribution Non-Commercial No Derivatives
5. Silahkan lanjutkan menulis posingan anda pada kolom Compose dan klik Terbitkan Entri jika sudah.
Lihat teks atau gambar
5. Silahkan lanjutkan menulis posingan anda pada kolom Compose dan klik Terbitkan Entri jika sudah.
>>>Selamat Mencoba<<<

0 komentar:
komen nya yang sopan yah :D