Cara Membuat Tombol Show Ke Dalam Postingan HTML - Hallo sahabat semuanya .. pada kesempatan ini blog Berita HarianKu 2017, akan sharing informasi terbaru hari ini yang berjudul Cara Membuat Tombol Show Ke Dalam Postingan HTML .. untuk informasi seputar DP BBM dan Kata - Kata mutiara / Mutiara Cinta / Mutiara Islami / tips dan trik blog / software / MP3 / MP4 / Photoshop tutorial dan artikel menarik lainnya .. bisa sobat temukan di blog DP BBM 23 ( seputar DP BBM dan Kata - Kata Mutiara cinta terbaru ) dan MP4U ( seputar tips dan trik / tutorial / mp3 / mp4 / lirik lagu / etc ) silahkan kunjungi jika tertarik dan selamat membaca :)

Cara Membuat Tombol Show Ke Dalam Postingan HTML

Apa itu tombol show atau hide spoiler. Show kalau kita artikan ke dalam bahasa Indonesia adalah tampilkan sedangkan hide adalah sembunyikan. Sesuai dengan namanya maka kalau kita klik tombol show maka suatu konten yang ada di dalamnya akan muncul sedangkan kalau kita klik hide maka konten tersebut akan merapat atau bersembunyi. Konten tersebut bisa berupa catatan atau bisa juga berupa gambar, dll.

Selain menggunakan sebuah text area atau juga highlighter maka show spoiler ini juga menjadi pilihan yang sering digunakan oleh para blogger untuk menyisipkan suatu kode ke dalamnya. Lebih dari itu show spoiler bukan hanya bisa disisipkan sebuah kode saja melainkan banyak kegunaan lainnya. Bagi yang tertarik silahkan langsung saja ke tutor cara membuat tombol Show Spoiler dibawah ini.

Kode

<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;">
Tulis Kata-Kata Sobat Disini
</div></div></div>

Silahkan copy paste kode di atas ke laman postingan sobat dalam mode Html.

Tampilan

Apa Kabar Sobat Blogger ?

Jika sobat tidak suka dengan warna putih sobat bisa menggantinya dengan warna background sesuai keinginan. Inilah kode untuk Tombol Show Spoiler dengan background berwarna

Kode

<div id="spoiler">  
<div style="margin: 5px 20px 20px;">  
<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  
<div style="display: none;">  
Inilah hasil dari tombol show spoiler dengan background warna
</div>  
</div>  
</div>

Untuk contoh di atas adalah background: rgb (225, 228, 242) silahkan ganti dengan kode warna yang lain.

Tampilan

Tulis artikel di sini!

Kalau kita ingin memasukan sebuah kode javascript ke dalam isi dari show spoiler maka yang musti sobat lakukan yaitu rubah dulu kode javascriptnya ke kode lain, untuk hal ini sobat bisa menggunakan jasa web centricle.com/tools/html-entities untuk merubah kode. Nah jika bukan hanya tulisan yang ingin sobat masukan ke dalam show spoiler tersebut misalkan sobat ingin memasukan gambar yaitu buatlah sebuah URL gambarnya terlebih dahulu, untuk hal ini sobat bisa menggunakan jasa dari file hosting dari om Google yaitu File Hosting Google Code
Selesai...

Itulah Artikel Hari ini mengenai Cara Membuat Tombol Show Ke Dalam Postingan HTML

terimakasih bagi sobat yang sudah membaca Cara Membuat Tombol Show Ke Dalam Postingan HTML .. mudah-mudahan bisa memberi manfaat untuk sobat semua .. ok next admin rasa di cukupkan dulu perjumpaan kita kali ini .. samapai jumpa di jam berikutnya :) ..

Sobat Baru saja sedang membaca artikel Cara Membuat Tombol Show Ke Dalam Postingan HTML dan artikel ini url permalinknya adalah https://beritaharianku-2017.blogspot.com/2012/05/cara-membuat-tombol-show-ke-dalam.html Semoga artikel ini bisa bermanfaat !!! ..



Berita HarianKu 2017 - adalah sebuah blog gratis dan sederhana yang menyajikan berbagai informasi seputar DP BBM, Kata Cinta, Kata Mutiara Cinta, Kata Mutiara Islami, Blogger, Tutorial, Tips dan Trik, MP3, MP4, Software, PhotoShop, PhotoScape, Lirik Lagu, Windows10, Gadget Terbaru dan TerUpdate 2017 yang diambil dari berbagai sumber, lengkap dengan link sumber aslinya di setiap artikel yang di publish !!!

Dan untuk mengetahui / melihat daftar list postingan ( list artikel ) di blog BeritaHarianKu 2017 .. sobat bisa klik ( kunjungi ) halaman Sitemap

SHARE THIS