August 5, 2012

Dalam kesempatan ini saya akan membagi informasi cara membuat tombol buka tutup istilah tren dalam dunia blog atau web adalah spoiler, mungkin istilah tersebut sudah tidak asing lagi. Spoiler adalah script atau kode baris perintah yang dapat menampilkan dan menyembunyikan tombol bila di klik akan terbuka menu baru. Pada umumnya tujuan dari pembuatan spoiler digunakan untuk menyembunyikan isi posting yang akan di panjang atau berupa script video dan gambar yang terlalu memakan tempat sehingga dapat menghemat.
Cara membuat spoiler tidak begitu rumit, anda hanya cukup memasukkan kode di bawah ini di setiap halaman posting. Lansung lihat contoh dibawah.
Judul Spoiler:
Wee....ternyata ada gambar cewek seksi, lihat sampe puas karna kesempatan hanya datang sekali saja bukan dua kali maka manfaatkan waktu anda dengan baik, oh ternyata cewek cantik ini termasuk dalam kategori spoiler "ternyata oh ternyata' sabar ya mau bikin kopi dulu. bersambung sejenak..... Milford Sound in New Zealand Oke lanjut lagi...hehe
Untuk memasukkan tombol spoiler kedalam postingan anda silahkan copy kode script berikut: 
<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Disini tempat anda meletakkan teks atau kode script gambar dan video anda <br> </div> </div> </div>

Cacatan:
  • Tulisan yang berwarna merah silahkan anda ganti sesuai keinginan anda, boleh ganti dengan tulisan apa saja, Contoh diatas Judul Spoler Misalnya ganti dengan Photo saya, Buka ganti dengan Open, Tutup ganti dengan Close, yang dimaksud.
  • Update : Ganti Tulisan Disini tempat anda meletakkan teks atau kode script gambar dan video anda dengan teks atau kode script yang akan anda pasang.
  • Update : kode scrpt tersebut untuk deletakkan pada halaman posting.
Wah ternyata Cara Membuat Tombol Buka Tutup/Spoiler ini sangat mudah, Semoga bermanfaat. Sekian dan terima kasih.


Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Membuat Tombol Buka Tutup/Spoiler diposting oleh Kraeng Francisco pada August 5, 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

10 comments:

  1. Keren Sob, tampilannya terkesan bersih, jernih, dan adem sehingga enak dipandang.

    Untuk sementara, saran saya coba Edit HTML lagi kemudian cari kode .tabs-inner .widget ul { dan kemudian hapus kode background: #2074a5 none repeat scroll bottom; yang ada di bawahnya.

    Maksudnya menghapus kode tersebut adalah untuk menghilangkan warna dasar bilah menu. Atau kalaupun tidak dihapus, coba ganti dengan warna transparan seperti ini: background: #transparent none repeat scroll bottom;

    ReplyDelete
    Replies
    1. trima kasih sob, selalu memberikan pilihan terbaik untuk blog ini....

      Delete
  2. Replies
    1. @Planet Pengetahuan, Untuk Peletakan kodenya sudah saya jelaskan diatas pada halaman posting,jika sobat ingin penempatan kode pada sidebarpun bisa dan perlu di ingat tulisan : 'Disini tempat anda meletakkan teks atau kode script gambar dan video anda' silahkan sobat ganti dengan kode script yang ingin sobat pasang. untuk melihat hasilnya bisa sobat ke halaman ini http://kapten-blog.blogspot.com/

      Delete
  3. saya simpan dulu ya,, hehehe mungkin besok saya butuh...mksh

    ReplyDelete
  4. betul sekali sob....spoiler memeng sangat penting
    selain menghemat ruang juga dpt mempercantik tampilan blog.

    cewek dalam spoiler itu bikin ngiler aja sob...hehe
    happy blogging yo

    ReplyDelete
    Replies
    1. hehe mas adam, dinikmatin aja sob hehe, mksih

      Delete