Cara Membuat Spoiler

Posted on
  • 30 Desember 2010
  • by
  • Alfiandika Nmp
  • in
  • Label:


  • Kali ini ane membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler kaya spoiler di KASKUS gan. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain. Misalnya saja Agan² punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah Agan² bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya Agan². Selain itu tombol spoiler ini tidak hanya berguna untuk tulisan atau teks, akan tetapi juga berguna untuk gambar, serta objek-objek yang dapat ditampilkan di blognya Agan² yang menggunakan jasa javaScript/ kode HTML. Nah kalau penasaran apa itu spoiler, bisa tuh langsung melihat contoh tampilan berikut ini,Cekidot gan:










    ISINYA DI SINI MAU DI TAROH GAMBAR ATAU SCRIPT APA JA BISA GAN,UP TO YOU DAHH
    Bagaimana, baguskan gan?

    Untuk membuat tombol spoiler, kita hanya membutuhkan script berikut ini gan:
    Ikuti langkah-langkahnya
    Bagi Agan² yang belum tahu cara memasangnya, bisa dilakukan melalui langkah-langkah berikut ini:

    • Login ke Blogger.com.
    • Klik Tata Letak.
    • Klik Tambah Gadget/Add Gadget
    • Pilih HTML/JavaScript.
    • Masukkan kode berikut ini, dan jangan lupa klik Simpan.

    <div><div style="margin: 5px;">
    <div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Show" 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'; }" type="button"/>
    </div>
    <div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
    <div style="display: none;">


    ISINYA DI SINI MAU DI TAROH GAMBAR ATAU SCRIPT APA JA BISA GAN,UP TO YOU DAHHH

    </div></div></div></div>





    NB : tulisan tg bercetak tebal silahkan ganti dgn kata2 agan,terserah mau di ganti apa.


    5 komentar:

    faisal_415z mengatakan...

    Mantep gan... ntar ane coba,,,
    eh, gan... ajarin buat smiles kaskus di blog?

    faisal_415z mengatakan...

    Sudah saya folow juga blognya gan... thanks

    alfiandikha mengatakan...

    wah maksih bnyak gan . . .

    guriearians mengatakan...

    tkyu gaN :17
    tapi ane mo bwt chatbox nya itu nymping :31

    Alfin Muhammad mengatakan...

    gan, kalo punya agan kan di post bisa di spoiler, nah kalo pake html kan cuma 1x pemakaian?

    Posting Komentar

    Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.

     
    (◕‿-) Designer By Alfiandika Nur Muhammad Putra
    Sponsored By Blog Newb1e