22 Juni 2012

Membuat Spoiler Buka Tutup

Membuat Spoiler buka tutup ini dapat diterapkan di blog untuk menghemat tempat, dimana sebelumnya teks/gambar yang di spoiler disembunyikan jika di klik tombol maka akan munucul.

Untuk contohnya seperti ini :

Lihat Gambar :
winnie the pooh


Kodenya seperti ini :
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Lihat 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;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZS9wuMRIhA6OpXnZeAQ11HRKHq248fl79tW7SEUAQWw2U_kbHJ6KUiG-j2rIe2Jhdk9rK2LRd2PN4V13lPR4ocv7Of4cij1MF51TmpCamd7G2pLsiffpdeGcLCC_vVdR2PdguUaQDzU/s1600/winnie+the+pooh.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="winnie the pooh" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZS9wuMRIhA6OpXnZeAQ11HRKHq248fl79tW7SEUAQWw2U_kbHJ6KUiG-j2rIe2Jhdk9rK2LRd2PN4V13lPR4ocv7Of4cij1MF51TmpCamd7G2pLsiffpdeGcLCC_vVdR2PdguUaQDzU/s320/winnie+the+pooh.jpg" width="320" /></a></div>
</div>
</div>
</div>
Yang diberi tanda merah merupakan kode yang diganti dengan keinginan sobat, dapat berupa teks biasa, kode ataupun gambar.


5 komentar:

  1. wao.....akhirnya gue nemuin nih tuttorial disini..langsung terapin dah...thank ea sob infonya sangat membantu saya ...ijin copy script code nya ea sob...

    Owh yaaa Gue juga udha follow this blog sob..jangan lupa follow back ea sob...saya tunggu ..salam kenal..salam blogger.................

    BalasHapus
  2. Terimakasih sobat, triknya sudah diterapkan pada blog saya!
    Hasilnya bagus
    Dan saya suka

    BalasHapus
  3. Betul tuch kata agan Ahmad Alqurniawan, tutorial yang kaya gini akhirnya ketemu juga.
    Ga salah dech bergabung di Fb: Persatuan Bloger Indonesia
    makasih gan

    BalasHapus

Popular Posts

Copyright@2015 999 Blog || Designed ByBlogger Templates-Blogger