Putra Semarang: Cara Membuat Spoiler (Show/Hide)

Cara Membuat Spoiler (Show/Hide)

Rabu, 02 Juni 2010 04.29

Diposting oleh Putra Semarang

Cara Membuat Spoiler (Show/Hide) pada Sidebar Blog

Pertama-tama saya ucapkan selamat gajian kepada shobat sekalian yang menerima gaji di tanggal muda ini. Oke langsung saja,

Langkah Pertama

Sobat masuk ke www.blogger.com silahkan Sign In dengan ID shobat masing-masing.

Langkah Kedua

Kalau sudah Sign In silahkan klik Tata Letak>>>klik Tambah Gadget>>>Pilih HTML/Java Scrip

Langkah Ketiga

Silahkan copy dan paste code dibawah ini pada HTML/Java Srip yang telah shobat sekalian pilih tadi.

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">Selamat Datang di Putra Semarang Blog "http://putra-semarang.blogspot.com" Jika sudah baca aryikel di Blog ini silahkan isi komentar atau Buku Tamu. Terimakasih...!!!!</div></div></div !akhir spoiler>

Hasilnya seperti berikut ini :

Keterangan :

Pada tulisan yang berwarna hitam tebal silahkan ganti atau sesuaikan dengan keinginan shobat sekalian.

Dan pada tulisan yang berwarna biru tebal silahkan ganti dengan kalimat, kode html, link atau gambar sesuai dengan yang shobat sekalian kehendaki.

Dan langkah terakhir klik Simpan/Save.

Silahkan Lihat Blog shobat, tak lupa ucapkan Alhamdulillahirrobbil'alamin.