Cara membuat spoiler buka tutup blog terlengkap
Cara membuat spoiler buka tutup di blog terlengkap
Pada saat jalan jalan (blogwalking) di forum kaskus , banyak sekali menemukan gambar yang harus di buka namun juga bisa di tutup lagi ,, waduh lumayan keren untuk menguragi postingan yang terlalu panjang karena tertutup oleh gambar , Terlebih lagi blog neng yang banyak memuat tutorial yang harus menyertakan gambar, memang cara menggunakan spoiler buka tutup ini bisa di jadikan solusi untuk mengurang height artikel yaa dengan menggunakan spoiler ini kita dapat menghemat ruang untuk sebuah artikel sebelum kita menjelaskan cara membuat spoiler di blog, ada baiknya neng menjelaskan terlebih dahulu pengertian dari spoiler ini
Apa sebenarnya arti dari kata spoiler ini
- Spoiler yang biasa di pakai dalam istilah otomotif
- Spoiler yang biasa dipakai dalam istilah pustakawan atau cinematografi
- Secara umum arti Spoiler ini biasanya dipakai istilah blog
Spoiler di dunia otomotif
Di dalam dunia otomotif istilah spoiler ini sering digunakan sebagai Komponen onderdil yang biasanya di gunakan untuk me modifikasi bagian tertentu dari kendaraan roda empat spoiler ini biasanya di pakai pada bagian belakang sebuah kendaraan ,walaupun pada awalnya dipakai pada mobil balap yang mempunyai horse power yang besar namun seiring perkembangannya spoiler ini banyak pula di terapkan pada kendaraan pribadi biasa, karena selain dapat mempercantik tampilan exterior pemakaian Spoiler pada dibagian belakang kendaraan roda empat ini secara teoritis dapat memberikan daya tekan kebawah dari mobil ini. dan dipercaya mampu dapat meningkatkan kenyamanan pada saat mengemudi dengan kecepatan tinggi
Bentuk onderdil spoiler yang di gunakan pada exterior kendaraan
Beginilah penggunaan spoiler apabila di aplikasikan dengan mobil
Istilah spoiler cinematografi
Istilah spoiler ini kadang di pergunakan dalam dunia perfilman Dimana kita dapat mengetahui bocoran ending dari suatu cerita film atau buku ,
Untuk kode script nya silahkan lihat di bawah ini:
Kode script untuk spoiler yang berada diatas tinggan copas saja di textarea
textarea Code Select All
1 Coba sobat perhatikan pada huruf yang berwarna biru , tekan button untuk buka code sobat dapat mengganti dengan kalimat yang menerangkan isi dari spoiler tersebut
jadi pengunjung tidak merasa tertipu dengan isi dari spoiler tersebut .misalnya sobat menyimpan gambar tentang tutorial membuat spoiler , dan ternyata di dalamnya berisi gambar xxx , hehehe sungguh tidak baik bukan? jadi apabila menggunakan spoiler jenis ini , penggunjung tidak terlalu kaget apabila isinya tidak berhubungan dengan keterangan gambar
2 Value dengan keterangan sembunyikan dapat sobat rubah dengan kata apapun yang penting maksud dari kata tersebut menerangkan spoiler yang fungsinya untuk menyembunyikan
3 Kemudian selanjutnya adalah keterangan script = value yang berwarna coklat / brown, dengan keterangan show sahabat dapat menggantinya dengan kata apapun yang penting maksudnya untuk memunculkan bisa dengan show
4 Dan untuk yang berwarna merah inilah yang nantinya bertisi text yang akan di sembunyikan dengan spoiler
Spoiler ini berisi gambar maria ozawa yang sedang memakai jilbab ,, mau tau penampakannya. silahkan klik button
Kode scrift spoiler untuk menyembunyikan gambar
textarea Code Select All
Ganti saja kata kata yang berwarna merah Judul, dan url gambar untuk menyembunyikan gambar dengan spoiler
Selanjutnya adalah spoiler dengan beberapa variasi border
bila sahabat bosan dengan penampilan spoiler yang tampak biasa biasa saja maka bisa merubahnya dengan menambahkan beberapa variasi div stile yang tentu saja penampilan dari spoilrnya akan tampak lebih bervaiasi dan untuk menggunakannyapun sangan mudah sekali sobat tinggan melakukas copy terhadat script spoilernya yang berada di text area dan mengganti nya dengan text , ataupun gambar atau juga dengan script yang akan di share
klik button ini supaya textnya terbuka
Di bawah ini adalah kode script spoilernya
Atau silahkan copy paste di text area
silahkan cek terlebih dahulu kode spoiler yang akan di gunakan di toolonline check spoiler dibawah ini
:
Istilah Spoiler yang biasa pada dunia blogging
Didalam dunia blogging , istilah spoiler ini adalah suatu cara yang digunakan untuk menutupi suatu gambar atau tulisan atau script yang telah di encode ataupun telah di samarkan dengan menggunakan tool online
base64 atau tulisan apapun , dan ketika keterangan spoiler ini diklik
atau di tekan button [ open ] / [ hide ] nya sesuatu yang di sembunyikan
yang berupa gambar atau keterangan scrpit akan terbuka beberapa saat
setelah button spoiler ini di tekan,
Setelah sekilas kita membahas tentang pengertian spoiler dari tiga sudut pandang , dan selanjutnya kita akan membahas Spoiler yang biasa di pergunakan dan dipakai dalam penulisan suatu artikel ., yaa kita akan membahas istilah spoiler ini yang di gunakan dalam dunia blogging dan ada beberapa cara dan tipe untuk membuat spoiler ini pada postingan artikel di blog, di mulai dari cara membuat spoiler yang paling sederhana . sampai spoiler yang menggunakan banyak kode dan mohon maaf ini hanya untuk sebagai reperensi saja , disertai dengan kode script dan dan menerapkannya pada postingan blog kesayangan sahabat .
Macam macam spoiler yang di gunakan pada artikel:
Dan baiklah neng akan memulainya dengan sebuah spoiler yang paling sederhana , spoiler ini dikatakan sangat sederhana di karenakan tidak banyak menggunakan kode untuk yang rumit untuk berbagai bentuk variasi , jadi sangat mudah sekali untuk di pergunakan .langsung saja lihat contoh spoiler yang pertama Contohnya seperti bisa di lihat di bawah ini
Macam macam spoiler yang di gunakan pada artikel:
Dan baiklah neng akan memulainya dengan sebuah spoiler yang paling sederhana , spoiler ini dikatakan sangat sederhana di karenakan tidak banyak menggunakan kode untuk yang rumit untuk berbagai bentuk variasi , jadi sangat mudah sekali untuk di pergunakan .langsung saja lihat contoh spoiler yang pertama Contohnya seperti bisa di lihat di bawah ini
Contoh spoiler pada blog untuk menyembunyikan text atau script
tekan button untuk buka code
Untuk kode script nya silahkan lihat di bawah ini:
<div>
<div style="margin-bottom: 2px;">
<i><b><small>tekan button untuk buka code</small></b></i><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 = 'sembunyikan'; } 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="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ganti dengan text atau script yang akan di sembunyikan dengan spoiler
</div>
</div>
2 Value dengan keterangan sembunyikan dapat sobat rubah dengan kata apapun yang penting maksud dari kata tersebut menerangkan spoiler yang fungsinya untuk menyembunyikan
3 Kemudian selanjutnya adalah keterangan script = value yang berwarna coklat / brown, dengan keterangan show sahabat dapat menggantinya dengan kata apapun yang penting maksudnya untuk memunculkan bisa dengan show
4 Dan untuk yang berwarna merah inilah yang nantinya bertisi text yang akan di sembunyikan dengan spoiler
spoiler dengan keterangan untuk menyembunyikan gambar
Spoiler ini berisi gambar maria ozawa yang sedang memakai jilbab ,, mau tau penampakannya. silahkan klik button
Klik button ini supaya gambarnya terbuka
<div>
<div style="margin-bottom: 2px;">
<i><b><small>klik button ini supaya gambarnya terbuka</small></b></i><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 = 'sembunyikan'; } 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="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; image-align: center;">
<img alt="Judul" src="url gambar" />
</div>
<div class="separator" style="clear: both; image-align: center;">
<img alt="Judul" src="url gambar" />
</div>
</div>
</div>
Kode scrift spoiler untuk menyembunyikan gambar
Ganti saja kata kata yang berwarna merah Judul, dan url gambar untuk menyembunyikan gambar dengan spoiler
spoiler dengan keterangan menyembunyikan script dengan variasi div style
Selanjutnya adalah spoiler dengan beberapa variasi border
bila sahabat bosan dengan penampilan spoiler yang tampak biasa biasa saja maka bisa merubahnya dengan menambahkan beberapa variasi div stile yang tentu saja penampilan dari spoilrnya akan tampak lebih bervaiasi dan untuk menggunakannyapun sangan mudah sekali sobat tinggan melakukas copy terhadat script spoilernya yang berada di text area dan mengganti nya dengan text , ataupun gambar atau juga dengan script yang akan di share
Di bawah ini adalah kode script spoilernya
<div>
<div style="margin-bottom: 2px;">
<i><b><bold>klik button ini supaya textnya terbuka </bold></b></i><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 = 'sembunyikan'; } 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="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="border:2px solid#2c2c2c"><div style="border:2px solid#444444"><div style="border:2px solid#5a5a5a"><div style="border:2px solid#727272"><div style="border:2px solid#888888"><div style="border:2px solid#a0a0a0"><div style="border:2px solid#b8b8b8"><div style="background-color:#fff;border:2px solid#d0d0d0"><center><div class="code" style="overflow: scroll; width: 98%; height: 350px;"><pre><code class="javascript"><span class="comment"><font color="white">
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
</font></code></pre></div></center> </div></div></div></div></div></div></div></div>
</div>
</div>
Atau silahkan copy paste di text area
textarea Code Select All
Cara pembuatan spoiler dengan textarea
Untuk menggunakan spoiler ini , apabila di padukan dengan textarea dengan variasi select all textarea , selain dapat mempercantik spoiler , juga dapat menampilkan testarea yang lain dari biasanya .dan pembuatannyapun sangat mudah sekali hanya dengan menggabungkan bentuk spoiler dengan textarea maka akan di dapat sebuah spoiler yadan textarea yang sangat menarik , selain menambah rasa penasaran , dan tentu saja warna warna di spoiler ini dapat dengan mudah di rubah sesuai dengan keinginan
langsung saja lihat penampakannya spoiler dengan variasi textarea
sahabat dapat menggunakan spoiler diatas dengan menggunakan kode di bawah ini
Ataupun sobat dapat langsung mengambil kode spoiler dengan text area variasi div style di bawah ini
spoiler textarea Code Select All
langsung saja lihat penampakannya spoiler dengan variasi textarea
tekan button untuk buka code
sahabat dapat menggunakan spoiler diatas dengan menggunakan kode di bawah ini
<div>
<div style="margin-bottom: 2px;">
<i><b><small>tekan button untuk buka code</small></b></i><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 = 'sembunyikan'; } 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="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="border: 2px solid#2c2c2c;">
<div style="border: 2px solid#444444;">
<div style="border: 2px solid#5a5a5a;">
<div style="border: 2px solid#727272;">
<div style="border: 2px solid#888888;">
<div style="border: 2px solid#a0a0a0;">
<div style="border: 2px solid#b8b8b8;">
<div style="background-color: white; border: 2px solid#d0d0d0;">
<center>
<div class="code" style="height: 350px; overflow: scroll; width: 98%;">
<pre><code class="javascript"><span class="comment"><span style="color: white;">
<div style="background: #555555; border: 1px solid #a87b06; margin: 0 auto; padding: 2px; width: 100%;">
<div style="background: #464555; border: 1px solid white; color: #dddddd; font-size: 100%; margin: 2px; padding: 2px;">
<div class="css textarea">
<center>
<b>textarea Code Select All</b></center>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL">
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
masukkan text atau gambar yang akan di sembunyikan di sini
</textarea></div>
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All Code" type="button"> </div>
</form>
</div>
</div>
</div>
</span></span></code></pre>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ataupun sobat dapat langsung mengambil kode spoiler dengan text area variasi div style di bawah ini
Penutup
Sebenarnya variasi untuk spoiler ini banyak sekali namun karena postingan ini terlalu panjang dan memberatkan loading page maka akan dilanjutkan pada artikel selanjutnya ,
0 Response to "Cara membuat spoiler buka tutup blog terlengkap "
Post a Comment