Pernahkah anda mendengar istilah Thread atau Spoiler? Dua istilah ini merujuk pada gambar yang disembunyikan di dalam sebuah tombol, yang ketika di klik keluarlah gambar tersebut. Istilah Thread pertama kali populer setelah kemunculan komunitas internet raksasa bernama Kaskus. Thread memiliki istilah gaul yaitu "trit" sebenarnya merupakan julukan untuk post seorang user dalam kaskus, yang didalamnya juga mengandung gambar. Hampir sama juga dengan spoiler, namun spoiler lebih spesifik digunakan untuk menyembunyikan gambar di dalam tombol. Kali ini saya menyamakan kedua istilah tersebut untuk menyembunyikan gambar dalam tombol.
 |
| Image Thread/Spoiler |
Penggunaan thread atau spoiler di post sangat menguntungkan bagi yang suka memasang gambar dengan ukuran large atau lebih. Selain itu keuntungannya, anda dapat menentukan sendiri ukuran gambar melalui opsi pixel yang terdapat di kode HTML thread/spoiler tersebut. Hal ini lebih baik jika dibandingkan langsung memasukkan gambar di post tanpa menggunakan thread/spoiler ini yang hanya dapat menentukan gambar tanpa ukuran yang pasti (melalui satuan tetap small, medium, dst). Untuk penampakan dari thread/spoiler untuk gambar bisa dilihat pada contoh dibawah ini (klik tombol "image" untuk membuka gambar).
Image Thread/Spoiler
Tertarik untuk membuatnya di post anda? Ikuti langkah-langkah yang mungkin memberatkan anda yang masih newbie dibawah ini. :D
1. Jika anda telah ada di post baru langsung ambil mode penulisan "HTML", bukan "Compose".
2. Copy kode HTML thread/spoiler untuk gambar dibawah ini terlebih dahulu ke Notepad, Microsoft Word, atau program pengolah kata lainnya.
</div>
<div style="text-align: center;">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 = 'Image'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 250px;" type="button" value="Image" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img border="0" height="320" src="http://www.imagesource.com/yourimage.jpg" width="300" /></div>
</div>
</div>
</div>
</div>
3. Ganti tulisan berwarna
merah dengan ukuran lebar kanan-kiri gambar yang anda inginkan.
4. Ganti tulisan berwarna
hijau dengan link gambar anda. Ingat! link yang lansung mengandung gambar, yang memiliki format gambar dibelakang linknya. Format gambar tersebut berupa .jpg, .png, dan lain sebagainya. Link gambar jika dibuka hanya terdapat gambar tersebut saja, tidak ada apapun kecuali dibelakang gambar tersebut latar berwarna putih, dan gambar tersebut berada di pojok kiri atas tab. Tidak ada apapun kecuali gambar itu!
5. Ganti tulisan berwarna
biru dengan ukuran tinggi atas-bawah gambar yang anda inginkan.
6. Selebihnya, anda dapat mengeksplorasi sendiri karena sebenarnya di kode HTML tersebut terdapat banyak opsi seperti batas gambar, kata-kata pada tombol, font huruf pada tombol, besar kecil tombol, dan masih banyak lagi. Namun saya hanya memberi anda settingan dasarnya saja sudah cukup.
7. Lanjutkan menulis post anda di mode penulisan "Compose" (masa post isinya cuma thread/spoiler gambar doank? :D)
8. Publikasikan post anda dan lihat ada hal baru di blog anda. Jika terjadi error, ulang dari awal langkahnya atau bertanya melalui komentar dibawah ini.
Demikian post saya kali ini, maaf jika agak menyulitkan anda dalam memasang thread/spoiler gambar ini.
Wassalamualaikum Wr. Wb.