Menambah Spoiler Tag Pada HTML

1.03.2010



Apakah anda tahu apa itu Spoiler ? Spoiler yaitu tab BBCode yang biasa digunakan banyak forum, dan versi html nya pun masih sedikit. Berikut saya akan berbagi bagaimana tag tersebut dipasang dan dipakai.



Untuk Kode CSS nya :



 <style type="text/css">
body,input
    {
    font-family:"Trebuchet ms",arial;font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style> 
 
Untuk Scriptnya :

  <script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>





Untuk Menampilkan Spoiler :

 <div class="spoiler">
    <input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>


Akan Berbentuk Seperti Ini :



Tidak ada komentar:

Posting Komentar

 

Informasi Penting

Langganan

Ikuti Saya di Facebook

Ikuti Saya di Twitter

Follow saya di Twitter

Paling Sering Dibaca

Tags

Android (10) Android Apps (3) Andromax U (1) Antivirus (2) Ayodance (10) Bahasa Assembler (1) Bisnis (1) Blogger Tips (8) CCA (4) Cloud Computing (1) CSS (2) Custom ROM (1) Desain (7) Desktop (1) Download (31) E-Book (3) Emulator (1) Facebook (8) Forum (1) FOSS (8) Freebies (1) Gadget (1) Galaxy Y (4) Games (14) Google+ (2) Hacking (2) Hardware (1) HTML (3) Info (6) Info Seminar (1) Internet (14) iPhone (1) ISO (4) Java (1) Jual Beli (2) KLuC (3) Komputer (9) Kupon Udemy (1) Lain-Lain (4) Linux (7) Marketing (1) News (17) OOT (1) PCMedia (2) PHP (6) Programming (7) Project (1) Pump It Up (2) Software (6) Stepmania (2) Tips Trik (25) Tutorial (14) Twitter (1) Ubuntu (11) UKM (1) Web 2.0 (3) Windows (10) Wine (2)