Let's Share your experience!!!

Close (X)


Apakah Anda membutuhkan sistem aplikasi untuk data science, absensi, pertokoan, sistem mikrokontroler Arduino/ Raspberry Pi?
Kami menyediakan semua kebutuhan sistem penyimpanan data jurnal dan akuntansi untuk toko anda, Dapat dikembangkan untuk sistem koperasi, Apapun permasalahan pertokoan, kami solusinya.
Kami di sini semua
Silahkan daftar atau gunakan akses kami menggunakan username kasir dan pasword 123456

Thursday, November 10, 2011

Tips membuat spoiler di blogspot


Lagi sibuk banget nih akhir-akhir ini, jadinya blog saya deh yang kena dampak sindrom lama ga ada postingan. Akhirnya daripada nanti ketunda-tunda lagi, mendingan saya posting sesuatu aja deh, yang simpel-simpel aja lah. Soalnya tau enggak sekarang jam berapa? jam 01.05 dini hari lho! hehe Kayaknya saya udah kena penyakit insomnia nih. >.< Yaudahlah langsung aja sesuai judulnya. Terkadang kita pingin banget nampilin gambar-gambar di blog kita biar pengunjung menjadi jelas tentang kemana arah tutorial kita. Tapi penampilan gambar ini tampaknya bagai pedang bermata dua bagi para pengunjung(aseek bahasanya :D). Soalnya selain manfaatnya yang membuat petunjuknya jadi lebih jelas, mereka juga bisa membuat tampilan halaman blog kita jadi lama alias lemot alias lelet bin i hate slow :D. Nah akhirnya saya menyiasatinya dengan menyelipkan gambar tersebut didalam spoiler. Tau enggak apa itu spoiler? Yah elah masa ga tau sih, cari sendiri lah artinya hehe pelit mode on.

Nah untuk menampilkan spoiler ini cukup dengan memasukkan skrip berikut :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
Teks yang disembunyikan/yang berada di dalam spoiler
</div>
</div>
</div>


Nanti jadinya kayak gini nih :


Teks yang disembunyikan/yang berada di dalam spoiler


Kalo mau gambar yang di selipin ya tinggal ganti teks nya dengan url gambar. misalnya nih skripnya begini :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mylovefood.files.wordpress.com/2011/02/soto.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="353" width="500" src="http://mylovefood.files.wordpress.com/2011/02/soto.jpg" /></a></div>
</div>
</div>
</div>


Sedangkan hasilnya akan menjadi seperti ini nanti



Gimana? Mudah bukan? Semoga bermanfaat :)
Share:

0 komentar:

Post a Comment

Blog Archive