Cara Menambahkan Tombol Show/Hide Pada Postingan Blogger/Blogspot

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

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


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>

0 Response to "Cara Menambahkan Tombol Show/Hide Pada Postingan Blogger/Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel