Home » , » Cara Membuat Spoiler Pada Postingan Blog

Cara Membuat Spoiler Pada Postingan Blog

Written By Ku Copas on Saturday, 21 July 2012 | 7/21/2012 03:43:00 am

KUCOPAS - Cara Membuat Spoiler Pada Postingan Blog. Kali ini saya akan kasih trik lagi tentang tutorial blog, yaitu cara membuat Spoiler dipostingan blog. Ada sedikit pencerahan untuk sobat, jika mungkin sobat pernah berkunjung ke forum-forum online dunia cyber seperti kaskus atau yang lainya, pasti sobat sudah tidak asing lagi dengan yang namanya spoiler.

Fungsi dari Spoiler itu sendiri adalah merupakan cara yang di gunakan untuk menyembunyikan suatu element seperti, link, teks, gambar atau juga video. Prinsip dari spoiler adalah sistimnya buka tutup atau show hide, karena jika spoiler dalam keadaan tertutup, lalu tombol spoiler di klik atau di tekan maka element yang di sembunyikan di dalam spoiler itu akan tampil atau terbuka dengan sendirinya, begitu juga sebaliknya jika spoiler dalam keadaan terbuka lalu kemudian tombol spoiler di klik atau di tekan maka element yang ada di dalam spoiler akan di sembunyikan atau tertutup kembali.

Cara Membuat Spoiler Pada Postingan Blog

Tujuan dari membuat spoiler adalah untuk menghemat tempat, ruang atau space di dalam suatu postingan blog. Selain itu menggunaan spoiler juga bermanfaat untuk mengurangi beban loading halaman blog apabila spoiler di gunakan untuk menyembunyikan file foto, gambar atau video yang tentunya menguras bandwidth data internet.

Spoiler juga dapat di terapkan pada blog Blogger dan Wordpress. Caranya membuat dan memasangnya dipostingan blog sangatlah mudah, karena sobat hanya cukup dengan menambahkan Kode Script pada halaman atau page yang ingin di pasangi spoiler.

Cara membuat Spoiler untuk menyembunyikan teks atau tulisan dipostingan Blog

Cara membuat spoiler dipostingan blog untuk menyembunyikan teks, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Isi teks atau tulisan sobat di sini</div>
</div>
</div>

Catatan:
  • Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
  • Cara membuat Spoiler pada postingan Blog, silahkan sobat tambahkan kode diatas pada teks editor tampilan mode HTML dan bukan Compose.
  • Ganti teks tulisan warna BIRU ( Isi teks atau tulisan sobat di sini), dengan teks atau tulisan yang sobat inginkan.
Contoh spoiler untuk menyembunyikan teks atau tulisan. (Klik saja sobat.!!!)
Contoh Spoiler Untuk Menyembunyikan Teks atau Tulisan

Cara membuat Spoiler untuk menyembunyikan Gambar atau Foto dipostingan Blog

Cara membuat spoiler di blog untuk menyembunyikan Gambar atau Foto dipostingan Blog, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAFA;">
<div style="display: none;"><img class="aligncenter" src="http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/378409_143736929067750_100002943326264_209514_2113713558_n.jp" alt="Hihihihi..." width="500" height="400" /></div>
</div>
</div>

Contoh Spoiler untuk menyembunyikan Gambar atau Foto. (Klik saja Sobat.!!!).
Spoiler Pada Postingan Blog

Catatan:
  • Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
  • Cara membuat Spoiler pada Postingan Blog, silahkan Sobat tambahkan kode diatas pada teks editor tampilan HTML post.
  • <>Ganti teks tulisan warna PINK, dengan alamat URL Gambar atau Foto yang sobat inginkan.
    Cara membuat Spoiler untuk menyembunyikan Video dipostingan Blog

    Cara membuat spoiler untuk menyembunyikan Video dipostingan Blog, silahkan sobat Copy dan Paste atau tambahkan kode dibawah ini.

    <div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <b>Contoh:</b>&nbsp;<input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
    <div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">

    <div class="separator" style="clear: both; text-align: center;">
    <object class="BLOG_video_class" contentid="209a1b1ea11d2563" height="226" id="BLOG_video-209a1b1ea11d2563" width="320"></object></div>

    </div>
    </div>


    video

    Catatan:
    • Cara membuat Spoiler pada Homepage atau Halaman Blog, silahkan sobat tambahkan kode diatas pada mode HTML/JavaScript.
    • Cara membuat Spoiler pada Postingan Blog, silahkan sobat tambahkan kode diatas pada teks editor tampilan HTML dan bukan Compose.
    • Ganti teks tulisan warna HIJAU, dengan Separator Object Video yang sobat inginkan.
    Demikian trik tutorial blog yang mengulas tentang Cara membuat Spoiler Pada Postingan Blog, semoga bisa sangat bermanfaat untuk sobat KUCOPAS semuanya.

    Artikel Terkait:

    thumbnail Title: Cara Membuat Spoiler Pada Postingan Blog
    Posted by:Ku Copas
    Published :2012-07-21T03:43:00+07:00
    Rating: 5
    Reviewer: 737 Reviews
    Cara Membuat Spoiler Pada Postingan Blog
    Comments
    3 Comments

    3 comments:

    1. Keren. Ini yang kayak di kaskus itu kan

      ReplyDelete
    2. @Dzulfikar Abdul Fattah >> Iya Sob... Terimakasih atas kunjungan dan Komentarnya.

      ReplyDelete
    3. di blog ane kok gak work ?
      rizabler.blogspot.com

      ReplyDelete

     
    Support : Google | Yahoo | Bing
    Copyright © 2011-2013. KUCOPAS - All Rights Reserved
    Sitemap | About Me | Contact Us | Privacy Policy
    Proudly powered by Blogger