DON'T LIKE ME

Memasang Button Show/Hide (Spoiler)

Memasang Button Show/Hide (Spoiler)

Memasang Button Show/Hide (Spoiler) Spoiler apaan OB? "Oh, asessoris yang biasa digunakan di belakang mobil, sehingga kaya mobil balap". Kalau OB membahas mobil, apa ada hubungannya dengan optimasi blog??? (wkakakakakak). Maksud spoiler di sini adalah menyembunyikan teks, image, dan/atau widget sehingga menghemat ruang suatu blog. Kemudian teks, image, dan/atau widget tersebut dapat ditampilkan kembali dengan menggunakan perintah (baca: bahasa pemprograman) tertentu. Ujung-ujungnya kita menggunakan "button" lagi, "button" memang ngga ada matinya (he..he.. no promotion). Khusus pengguna Wordpress, pluginnya dapat langsung diunduh di felixtriller.de. Sedangkan untuk blogger, mari kita ulas trik Memasang Button Show/Hide (Spoiler) tentang memasang spoiler.


Widget ini dapat kamu manfaatkan baik dalam postingan, sidebar, dan/atau elemen lainnya yang memiliki kesesuaian dengan widget spoiler.


Adapun kode HTML-nya adalah sebagai berikut :
<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Penggunaan Spoiler" 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 Lagi'; }" type="button"/></div><div class="spoiler"><div style="display: none;">
<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">
Silakan disimak dan dicermati :
<ul><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>
<li>Kamu juga bisa memasukkan image</li>
<center><img border="0" alt="U Comments I Follow" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg"/></center>
<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>
</div></div></div></div>

Keterangan :
  • Ganti kode berwarna biru dengan kata atau kalimat yang kamu inginkan.
  • Kode berwarna hijau merupakan gambaran area teks, image, dan/atau widget yang akan kamu masukan.
  • Ganti kode yang berwarna merah dengan teks, image, dan/atau widget yang akan kamu inginkan.
  • Tidak menutup kemungkinan kamu dapat menambah dan mengurangi kode yang telah ada selama format dasar kode pembuatan spoiler tidak berubah, seperti dalam kode style="....." (yang berkelap-kelip) dapat ditambah atau dikurangi.

Silakan disimak dan dicermati :
  • Di sini kamu bisa memasukkan teks, kode, atau script
  • Kamu juga bisa memasukkan image
  • U Comments I Follow
  • Klik button "Tutup" untuk menghilangkan area ini



Hasilnya :
Silakan disimak dan dicermati :
  • Di sini kamu bisa memasukkan teks, kode, atau script
  • Kamu juga bisa memasukkan image
  • U Comments I Follow
  • Klik button "Tutup" untuk menghilangkan area ini

Akhirnya selamat menyembunyikan teks, image, dan/atau widget dengan spoiler..Memasang Button Show/Hide (Spoiler)....Memasang Button Show/Hide (Spoiler)...
.
By : Bang Udin
----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :


Comments
4 Comments

4 komentar:

puluth® mengatakan... Reply To This Comment

Wah, Terima Kasih ne, lebih simple..

Anonim mengatakan... Reply To This Comment

Wah gan, ini tutorial yg ane cari,
dan ternyata setelah ane coba berhasil,

trima kasih gan, ane tunggu tutorial yang lain,....

@zahroul

Bang Udin mengatakan... Reply To This Comment

puluth :
sama2 sobat silahkan di coba tutorial lainnya...
makasih atas kunjungannya.

Bang Udin mengatakan... Reply To This Comment

Zahroul :
semoga bermanfaat sahabat semoga blog bang udin bisa membantu anda....
makasih atas kunjungannya.

Posting Komentar