Cara-Cara Terbaik Untuk Menambahkan Tombol Show/Hide Pada Postingan Blogspot

Cara-viz.blogspot.com :: Dengan menambahkan tombol Show dan Hide atau Buka dan Tutup pada postingan blog milik Anda, maka postingan tersebut akan terlihat lebih rapi. Dan tentu saja untuk menambahkan tombol tersebut tidak susah, karena kode untuk menambahkannya sudah ada, sehingga Anda tinggal menggunakannya. Dan berikut kode-kode yang dapat Anda gunakan untuk menambahkan tombol Show/Hide atau Buka/Tutup pada postingan blog milik Anda.

Menambahkan Tombol Show/Hide div Sederhana pada Postingan Blog

LIVE DEMO

LETAKKAN TEKS DAN GAMBAR DISINI

Buka post editor HTML, dan pastekan kode berikut

LETAKKAN TEKS DAN GAMBAR DISINI

Anda dapat merubah lebar content tersebut, dengan merubah kode width:300px dan text-align untuk posisi dari teks atau gambar yang Anda masukkan pada content tersebut.

Menambahkan Tombol Show/Hide Kaskus pada Postingan Blog

LIVE DEMO

Klik show untuk melihat

LETAKAN TEKS DAN GAMBAR DISINI

Buka post editor HTML, dan pastekan kode berikut

<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;">

LETAKAN TEKS DAN GAMBAR DISINI

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

Menambahkan Tombol Show/Hide Dengan Sedikit Modifikasi pada Postingan Blog

LIVE DEMO

LETAKKAN TEKS DAN GAMBAR DISINI

Buka post editor HTML, dan pastekan kode berikut

<div style="margin-bottom: 2px;">

<div style="margin-top: 5px; text-align: left;">

<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: 12px; margin-top: 5px; width: 60px;" type="button" value="SHOW" /> </div>

<div style="background-color: black; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;">

<div style="display: none;">

<span style="color: white;">

LETAKKAN TEKS DAN GAMBAR DISINI

</span></div>

</div>

</div>