Tampilkan postingan dengan label Button. Tampilkan semua postingan
Cara Membuat Tombol Sopiler di Blog - Apa itu spoiler? Saya yakin teman-teman blogger sudah pada tahu semua mengenai arti dari spoiler ini yaitu sebuah script yang berfungsi sebagai tombol buka tutup (open close button). Spoiler telah banyak digunakan didalam web blog site karena fungsinya yang sangat membantu tampilan sebuag web blog site itu sendiri. Salah satu kesamaan dengan spoiler ini adalah scroll bar dan tab view yang juga memiliki fungsi yang sama diantara ketiganya.
Apa saja fungsi tombol spoiler ini untuk sebuah blog?
Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini
Apa saja fungsi tombol spoiler ini untuk sebuah blog?
- Membuat tampilan minimalis
- Menghemat ruang tampilan pada blog
- Menyembunyikan objek atau teks yang ada didalam blog atau artikel
- dan sebagai tombol yaitu open close button
Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini
Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>
Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>- Keterangan:
Warna merah : Silahkan ganti dengan objek atau teks yang anda inginkan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tombol Spoiler di Blog
If you are developing a website and you must integrate with social networks sites like Facebook, Twitter and Google plus to reach more people. I strongly believe Facebook is the new virtual world to increase your product sales and generating web traffic. In this post I want to explain a simple tip, that how to integrate Facebook like button in optimizing way for just adding few FBML META tags.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Better way to Integrate Facebook Like Button
