Cara Melakukan Berbagai Hal
Selamat Datang Di Blog Cara-Viz
Terima kasih atas kunjungan Anda di blog Cara-Viz,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan pengetahuan baru pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

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

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


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>
Enter your email address to get update from Cara-Viz.
Print PDF
Next
« Prev Post
Previous
Next Post »

1 comments:

Copyright © 2013. Cara-Viz - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger