Cara memasang menu spoilers/open-close

0 comments
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 iiiiiiiiiiiiissssssssssssssiiiiiiiiiiiiiites123

    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

    Sumber: fajarnoverdi.blogspot.com

    0 comments: