Beranda › Tanpa Kategori

Langkah Mudah Membuat Spoiler di Blog

Tambah Komentar
Masih membahas tentang tata cara membuat spoiler buka tutup untuk suatu blog atau websites , Dikarenakan pada postingan sebelumnya sudah terlalu panjang maka pembahasan tentang spoiler ini dilanjutkan pada tulisan kedua ,postingan sebelumnya .cara-membuat-spoiler-buka-tutup-blog sengaja neng membahas tentang spoiler ini agar para pembaca setia blog ini dapat dengan mudah membuat spoiler dengan berbagai variasi dan bentuk sesuai dengan apa yang diinginkan dan tinggal menggunakan fasilitas copy paste saja jadi tidak akan membuat pusing kepala . apalagi tukang copy paste tentu sudah faham betul bagaimana cara menggunakan fasilitas ini . Di dalam menggunakan tehnik spoiler ini , sahabat  hanya tinggal mengganti value tertentu saja maka akan menjadikan spoiler yang sobat buat jadi berbeda dengan orang lain Tutorial membuat spoiler ini juga dilengkapi juga dengan alat untuk mengetest skript buka tutup ini di bagian bawahnya , jadi sebelum menggunakannya di dalam postingan yang sobat buat, silahkan di test terlebih dahulu di sini test javascript atau nanti saja di bagian bawah artikel ini
pada postingan artikel yang pertama neng membahas spoiler dengan menambahkan keterangan tentang isi dari spoiler ini, maka pada postingan yang kedua ini neng menghilangkan keterangan tersebut , jadi spoilernya polos saja hanya tampak keterangan di button saja
Tergantung sobat mau menggunakan yang mana. yang penting tujuannya sama yaitu untuk menyembunyikan gambar , script atau text supaya pada saat loading awal tidak terlalu memberatkan

contoh spoiler tanpa keterangan

Didalam membuat spoiler yang tidak dilengkapi dengan keterangan ini sengaja di variasikan dengan berbagai macam betuk spoiler diantaranya :
  1. Spoiler tanpa keterangan untuk text atau script
  2. Spoiler tanpa keterangan untuk menyembunyikan gambar
  3. Spoiler tanpa keterangan untuk menyembunyikan textarea dengan variasi textarea select all


script spoiler tanpa keterangan

Jikalau sobat ingin membedakan antara spoiler buka tutup yang pertama dengan spoiler yang ini lihat saja gambarnya:
spoiler dengan keterangan

pada gambar diatas itu adalah spoiler yang dilengkapi dengan keteranagn , dan kita hanya menghilangkan saja keterangan tersebut maka jadinya seperti ini:

Kode script untuk spoiler diatas tersebut adalah: (lihat di bawah ini) 


<div>
<div style="margin-bottom: 5px;">
<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: 12px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
GANTI SAJA TEXT INI dengan text atau script yang akan di sembunyikan
</div>
</div>
</div>
Silahkan copy saja di disini



  • Parameter spoiler yang dapat diganti dengan tidak menghilangkan fungsinya antara lain pada Value = Sembunyikan boleh di ganti apa saja yang penting keterangan menjelaskan untuk menyembunyikan, sobat bisa menggantinya dengan show
  • Kata Show dapat di ganti dengan apa saja yang penting menjelaskan untuk memunculkan isi spoiler
  • Ganti saja kata yang berwarna merah ini dengan kode script yang akan di sembunyikan ataupun dengan text yang akan di sembunyikan GANTI SAJA TEXT INI dengan text atau script yang akan di sembunyikan

Ohh iyya kode spoiler diatas dapat juga di kombinasikan dengan variasi warna . maka hasilnya seperti ini

Dibawah ini kode spoiler untuk membuat spoiler buka tutup pada blog dan juga Sobat dapat mengcopy langsung di di textarea dibawah ini, dan boleh juga untuk langsung di test pada tool online untuk mengetest kode spoiler yang berada pada postingan paling bawah 

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" value="Buka" type="button"> </div>
<div style="background-color: black; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: red; font-style: regular;"><span style="color: white; font-family: Verdana, sans-serif;">
<div class="code" style="overflow: scroll; width: 98%; height: 350px;">
<pre><code class="javascript"><span class="comment"><font color="white">

MASUKAN TEXT DI SINI

</font>
</code></pre>
</div>
</span></span></div>
</div>
</div>
Silahkan copy paste di disini


Untuk menampilkan kode script di dalam artikel sobat, dapat menggunakan tool online ini :html-encoder-tools-online


Spoiler tanpa keterangan untuk menampilkan gambar

untuk dapat menampilkan gambar pada blog atau websites dengan menggunakan kode spoiler lihat saja pada spoiler buka tutup Dibawah ini:

Script spoiler untuk menampilkan gambar pada artikel dapat di lihat di dalam syntak di bawah ini: 

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" value="Buka" type="button"> </div>
<div style="background-color: black; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: red; font-style: regular;"><span style="color: white; font-family: Verdana, sans-serif;">
<div class="code" style="overflow: scroll; width: 98%; height: 350px;">
<pre><code class="javascript"><span class="comment"><font color="white">

<img alt="KETERANGAN GAMBAR" src="URL GAMBAR" title="JUDUL GAMBAR" border="0" height="TINGGI GAMBAR" width="LEBAR"/>

</font>
</code></pre>
</div>
</span></span></div>
</div>
</div>
Silahkan copy paste di disini



Spoiler tanpa keterangan untuk textarea

Untuk dapat menampilkan textarea pada blog atau websites dengan menggunakan kode spoiler lihat saja pada spoiler open hide Dibawah ini:

Dan neng akan membaginya menjadi 3 tiga mode textarea
spoiler dengan textarea mode normal
spoiler dengan textarea mode read only
Spoiler dengan textarea mode variasi div style
Spolier dengan text area mode normal dapat sobat lihat pada penampakan di bawah ini:

Spoiler dengan textarea mode nrmal dapat sobat ambil di bawah ini: 

<div>
<div style="margin-bottom: 5px;">
<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: 12px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="css textarea">
<center>spolier dengan textarea mode normal</center>
<br>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto; width: 477px; height: 281px;" wrap="VIRTUAL">
ganti saja text ini
</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>
</div>
Silahkan copy paste di disini


spooiler dengan text area read only ini , isi dari kode di dalam textarea tidak dapat di edit

Kode script spoiler dengan textarea yang tidak dapat di edit dapat sahabat copy di bawah ini 

<div>
<div style="margin-bottom: 5px;">
<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: 12px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Munculkan" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="css textarea" readonly="readonly">
<center>spolier dengan textarea yang tidak dapat di ubah isinya</center>
<br>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto; width: 477px; height: 281px;" wrap="VIRTUAL"readonly="readonly">
ganti saja text ini
</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>
</div>
Silahkan copy paste di disini



Di bawah ini adalah kode script spoilernya 

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" value="Buka" type="button"> </div>
<div style="background-color: black; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: red; font-style: regular;"><span style="color: white; font-family: Verdana, sans-serif;">
<div class="code" style="overflow: scroll; width: 98%; height: 350px;">
<pre><code class="javascript"><span class="comment"><font 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>
<br>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL">



GANTI DENGAN KODE SCRIPT YANG AKAN DI TAMPILKAN
</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>
</font>
</code></pre>
</div>
</span></span></div>
</div>
</div>
Silahkan copy paste di disini



Penutup

Dengan spoiler berbagai bentuk dan variasi ini mudah mudahan dapat bermanfaat
Dan pada artikel selanjutnya neng akan membahas cara membuat spoiler yang dapt di gunakan untuk membuat menu dropdown vertikal


sumber : http://webtool31.blogspot.com/2016/01/cara-membuat-spoiler-di-blog-atau.html

Belum ada Komentar untuk "Langkah Mudah Membuat Spoiler di Blog"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel