Cara memasang menu spoilers/open-close

Salam ne sobat.. udah lama juga ane g' posting.. apalagi tentang tips blogger.
 maaf y sobat2 smw. minggu lalu saya telah 
mempost tentang Cara buat text di navbar berjalan 


dan sekarang saya ingin mempost dulu tentang 
cara memasang menu spoilers/bukatutup. hehe
saya akan menjelaskan dulu secara singkat apa itu spoilers.


Spoiler adalah sebuah kolom yang bisa dibukadan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat 
ruang halaman saat mempostinggambar atau  


tulisan  yang banyak sehingga terlihat tertata dan rapi.


Caranya :



  • Login terlebih dahulu ke Blogger ID Anda.
  • Masuk ke Tata Letak/Rancangan.
  • Lalu klik tambah Gadget



  •      Dan ini Contoh Scriptnya :

    <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px;padding: 0px; width: 55px; font-size: 11px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
    </div>
    <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
    <div style="display: none;">



    Isikan kode, script, HTML atau teks Anda disini !!
    <br>
    </div>
    </div>
    </div>

    Dan hasilnya akan seperti ini.
    Spoiler:
    Percobaan iiiiiiiiiiiiissssssssssssssiiiiiiiiiiiiii tes 1 2 3

    NB  :
    1. Tulisan Open dan Close bisa Anda ganti yang di suka
    2Width : 55px = lebar spoiler
    3Font-size11px = besar tulisan pada kotak spoilers
    4. Tulisan Spoiler adalah judul,bisa ganti sesuai keinginan Anda
    5. Tulisan yang berwarna biru bisa juga Anda ganti sesuai dengan tulisan yang ingin Anda tuliskan pada kolom bagian dalam spoiler.



    Baca juga : Cara membuat 3 kolom di bawah header blog
                           Cara membuat Link warna-warni di blog

    …Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.




    Artikel terkait:

    { 6 komentar... read them below or add one }

    sibutiz mengatakan...

    wach mantabs nich ka spoilernya...

    fajarnoverdi mengatakan...

    makasih banyak sobat..
    :D

    Anonim mengatakan...

    my bro thank ya..

    tips yang keren.. hehe

    fajarnoverdi mengatakan...

    @bgjal :
    makasi banged sob..
    dan makasi juga sudah berkomentar sob..

    ALI MACHTUM mengatakan...

    sobat ane kutan mencoba yach

    fajarnoverdi mengatakan...

    @ali..
    oke thx y sob..
    thx jga dh mw mampir dn berkomentar.
    hehe

    Posting Komentar

    terima kasih telah berkunjung sobat.
    Silahkan komentar,kritik dan sarannya
    setidaknya tegur sapa.heheh