Halaman

28/06/12

Cara Membuat Tombol Show / Hide Spoiler pada Bloger

Sedikit tips buat sobat semua yang ingin membuat bloger sobat menjadi rapi dan meminimalisir ruang postingan. Berikut adalah cara untuk membuat tombol Show / Hide  Spoiler yang akan membantu sobat bloger semua dalam merapihkan postingan sobat, khususnya para programer yang sering posting source code atau text serta gambar-gambar yang membuat ruang bloger menjadi penuh dengan source code dan juga kurang tertatanya postingan sobat. Karena semakin kurang tertata tulisan-tulisan yang kita posting, semakin malas dan enggan pembaca untuk melihatnya_. (itu menurut zhe,, :D).

Langsung pada pembahasan, berikut adalah cara membuat spoiler pada bloger.
Pertama, pastikan sobat Login terlebih dahulu pada blognya.
Kemudian masuk pada entri blog, tempat biasanya sobat update blog.
Ketiga, copas cource code berikut dan pastikan paste source code pada jenis entri HTML

<div style="margin-bottom: 2px;">
<b><small>Klik show untuk melihat</small></b>
<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: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukan tulisanmu disini
creadet by. 49012039uzhe.blogspot.com
</div>
</div>

Terakhir, isi data spoiler sesuai yang sobat inginkan.

Pembuatan show/hide spoiler telah selesai, sekarang sobat dapat mengupdate bloger sobat dengan lebih rapih lagi. cukup mudah dan sangat menarik. Berikut adalah contoh Show/Hide Spoiler sesuai dengan source doce diatas :

Klik show untuk melihat
Masukan tulisanmu disini
creadet by. 49012039uzhe.blogspot.com

Demikianlah tips bloger pada kali ini, jangan lupa sedikit pesan atau komentar sobat semua tentang bloger ini yah!
Semoga bermanfaat dan salam sukses. :)

Tidak ada komentar:

Posting Komentar

Silahkan Berikan Komentar Anda untuk Kesempurnaan Blog ini..