Membuat Spoiler di Blog

Bagaimanakah cara membuat tombol Show/Hide pada postingan sebelumnya?? yaa,,cukup mudah sobat. Seperti pada postingan sebelumnya tentang Menjaga Artikel Agar Tidak Bisa Copy-Paste dan Membuat Tulisan Berjalan (Marquee), nampaknya sangat simpel penerapannya. Tombol Show/Hide atau lebih dikenal sebagai Spoiler ini biasanya digunakan sobat blogger untuk memperpendek sebuah tulisan, link, atau gambar yang terlalu banyak Seperti kita tahu bahwa membuat Show/Hide sangat berpengaruh dalam peningkatan pagerank Google walaupun belum seberapa.

Oke sobat, langsung saja kita mulai ulasan tentang Cara Membuat Tombol Show/Hide berikut ini:

1. Log in ke akun blog sobat. klik disini bila belum login.

2. Klik gambar pensil berwarna orange yang ada di sebelah kiri tulisan "View Blog" (untuk tampilan blogger baru).

3. Kemudian letakkan kode dibawah ini tepat di kotak postingan anda tetapi pilih tab HTML untuk membuat tombol Show/Hide.

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b> <input value="Show" 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"></div> <div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"> MASUKAN TULISAN SOBAT DI SINI</div></div></div>

4. Ganti tulisan berwarna merah diatas dengan tulisan, gambar atau link sobat yang ingin dibuat tombol Show/Hide.

5. Klik Preview untuk melihat postingan yang anda buat tadi. Jika sudah benar maka kurang lebihnya akan tampak seperti ini:

Klik show untuk melihat

Sekian dulu tutorial yang dapat saya berikan. Semoga bermanfaat !!

To insert a code use <i rel="pre">code_here</i>
To insert a quote use <b rel="quote">your_qoute</b>
To insert a picture use <i rel="image">url_image_here</i>

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.