Home » » Cara Membuat Tombol Show/Hide di Postingan Blog

Cara Membuat Tombol Show/Hide di Postingan Blog

Written By AiRa LoKa on Senin, 22 April 2013 | 13:36



     Barusan Jalan-jalan di dunianya mbah google, eh malah nemu artikel yang menarik. Judulnya cara membuat tombol klik show untuk melihat di postingan Blog Saya pun tertarik untuk membukanya. Dan ternyata cukup mudah. Nah mumpung saya lagi berbaik hati, saya akan membagikan caranya kepada para AiRa LoKa best friend... Nah bagi yang mau coba, Langsung saja..
Chek It Out......

1.  Pada halaman Edit Entri atau Entri Baru, Buka tab HTML.

  2.  Pastekan script dibawah ini.
<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;">
Masukkan tulisanmu di sini
</div></div></div>
 3.  Ganti tulisan yang berwarna merah dengan pesan untuk mengklik tombol show.
kemudian ganti tulisan yang berwarna biru dengan tulisan, script, url gambar,  atau apapun.

Klik show untuk melihat
Masukkan tulisanmu di sini

Selamat mencoba!

9 komentar:

  1. thankz gan atas infony

    mmpir k blog ane juga

    www.miftahshidiq.blogspot.com

    BalasHapus
  2. Sep Gan Thx Berguna Banget nih hehehe Ane Save yah ^_^
    Follow+Comment Done
    Kunjungan Dari : Valerie Alay

    BalasHapus
  3. thx info'y
    http://duniagame7.blogspot.com/

    BalasHapus
  4. thx gan minta kunjung baliknya ya gan muhammadyahsyallah.blogspot.com

    BalasHapus
  5. mantap gan, punya ane sukses....

    visit my blog gan http://i66m.blogspot.com/2013/12/program-program-tv-tahun-2013-di.html

    BalasHapus
  6. mampir ke febri-elektro.blogspot.com

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. Terima kasih atas tutorialnya, sudah berhasil diterapkan. Ditunggu kunjungan balik di blog saya Anditaan3

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger